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);
});