Fill an array with real-time data

Viewed 164

I have a robot in my project that moves and gives me x and y coordinates. I also get 2 data in roughly 1 second. I would like to ask if I can get this data to be loaded into an array so that I can work with it afterwards.

I would like to display this in a figure later, but for this to happen, I think we need to populate the array with the data.

index.html:
    html>
    <head>

        <script type="text/javascript" src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js">
        </script>
        <script type="text/javascript" src="main.js">
        </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    </head>

        <body>

            <h1 style="text-align: center;">Topic visualization</h1>

            <div>

                <h3 id="positionX" style="text-align: center;">X:<span id="posX"></span></h3>
                <h3 id="positionY" style="text-align: center;">Y:<span id="posY"></span></h3>

            </div>

            
        </body>

        
        <canvas id="myChart" width="500" height="150"></canvas>

<script>

/////////////////////////////
let array = [];
array.push(document.getElementById("posX"))
console.log(array)
////////////////////////////


const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'GOKART MOVING',
            data: posX//call the function later,    
        }],
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 20,
                }
            }]
        }
    }
});


</script>

</html>

main.js:

//Connecting and message print out

var ros = new ROSLIB.Ros({
    url:'ws://10.0.2.10:9090'
});
ros.on('connection',function(){
    console.log("Connected to websocket server")
});
ros.on('error',function(){
    console.log("Error connecting to websocket server: ",error)
}); 
ros.on('close',function(){
    console.log("Connection to websocket server closed.")
});

var tag5617 = new ROSLIB.Topic({
    ros:ros,
    name:"/dwm1001/tag5617",
    messageType:"dwm1001/anchor"
});

tag5617.subscribe(function(message) {
    //console.log("X: " + message.x);
    //console.log("Y: " + message.y);
    let h2_x = document.getElementById('posX');
    h2_x.innerHTML = message.x.toFixed(2);

    let h2_y = document.getElementById('posY');
    h2_y.innerHTML = message.y.toFixed(2);
});
1 Answers

You can declare this array in global scope, and push the values in the subscription.

const array = [];
tag5617.subscribe(function(message) {
    //console.log("X: " + message.x);
    //console.log("Y: " + message.y);
    let h2_x = document.getElementById('posX');
    h2_x.innerHTML = message.x.toFixed(2);

    let h2_y = document.getElementById('posY');
    h2_y.innerHTML = message.y.toFixed(2);
   
    array.push({x:h2_x, y:h2_y});

});

this will push your x and y values as an object in the array, you can add additional details to the object and later on retrieve it from the array!

Related