82 lines
2.0 KiB
HTML
82 lines
2.0 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<!-- Plotly.js -->
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Downstream</h1>
|
|
<div id="down-potencia"></div>
|
|
|
|
<script>
|
|
first = true;
|
|
mydata = [];
|
|
ws = new WebSocket("ws://192.168.1.4:5678/down")
|
|
var request_data_interval
|
|
ws.onopen = function()
|
|
{
|
|
// Web Socket is connected, send data using send()
|
|
//ws.send("Message to send");
|
|
request_data_interval = window.setInterval(requestData, 50);
|
|
};
|
|
|
|
ws.onmessage = function (evt)
|
|
{
|
|
if ('data' in evt) {
|
|
|
|
var received_msg = evt.data;
|
|
d = JSON.parse(received_msg);
|
|
|
|
ts = d['ts'];
|
|
var arrayLength = d['channels'].length;
|
|
for (var i = 0; i < arrayLength; i++) {
|
|
if (first) {
|
|
|
|
var my_plot = {
|
|
uid: 'recetor' + i,
|
|
name: 'Canal ' + i,
|
|
x: [ts],
|
|
y: [d['channels'][i]['power_val_dn']],
|
|
type: 'lines',
|
|
};
|
|
mydata.push(my_plot);
|
|
|
|
} else {
|
|
|
|
for(z in mydata) {
|
|
//console.log(z);
|
|
if (mydata[z].uid =='recetor' + i) {
|
|
mydata[z].x.push(ts);
|
|
mydata[z].y.push(d['channels'][i]['power_val_dn']);
|
|
//console.log(z);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
if (first) {
|
|
Plotly.newPlot('down-potencia', mydata);
|
|
} else {
|
|
Plotly.animate('down-potencia', mydata, { transition: { duration: 500, easing: 'cubic-in-out' } });
|
|
}
|
|
|
|
first = false;
|
|
}
|
|
};
|
|
|
|
ws.onclose = function()
|
|
{
|
|
// websocket is closed.
|
|
window.clearInterval(request_data_interval)
|
|
};
|
|
|
|
function requestData()
|
|
{
|
|
//ws.send("get-data");
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |