104 lines
3.0 KiB
HTML
104 lines
3.0 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<!-- Plotly.js -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.32.0/smoothie.min.js"></script>
|
|
</head>
|
|
|
|
<body onload="createTimeline()">
|
|
<h1>Downstream</h1>
|
|
|
|
<h4>Channel 1</h4>
|
|
<canvas id="channel0_0" width="500" height="100"></canvas>
|
|
<canvas id="channel0_1" width="500" height="100"></canvas>
|
|
|
|
<h4>Channel 2</h4>
|
|
<canvas id="channel1_0" width="500" height="100"></canvas>
|
|
<canvas id="channel1_1" width="500" height="100"></canvas>
|
|
|
|
<h4>Channel 3</h4>
|
|
<canvas id="channel2_0" width="500" height="100"></canvas>
|
|
<canvas id="channel2_1" width="500" height="100"></canvas>
|
|
|
|
<h4>Channel 4</h4>
|
|
<canvas id="channel3_0" width="500" height="100"></canvas>
|
|
<canvas id="channel3_1" width="500" height="100"></canvas>
|
|
|
|
<h4>Channel 5</h4>
|
|
<canvas id="channel4_0" width="500" height="100"></canvas>
|
|
<canvas id="channel4_1" width="500" height="100"></canvas>
|
|
|
|
<h4>Channel 6</h4>
|
|
<canvas id="channel5_0" width="500" height="100"></canvas>
|
|
<canvas id="channel5_1" width="500" height="100"></canvas>
|
|
|
|
<h4>Channel 7</h4>
|
|
<canvas id="channel6_0" width="500" height="100"></canvas>
|
|
<canvas id="channel6_1" width="500" height="100"></canvas>
|
|
|
|
<h4>Channel 8</h4>
|
|
<canvas id="channel7_0" width="500" height="100"></canvas>
|
|
<canvas id="channel7_1" width="500" height="100"></canvas>
|
|
|
|
<script>
|
|
var data = {'data': [] , 'chart': []}
|
|
|
|
function createTimeline() {
|
|
for(i = 0; i <= 7; i++) {
|
|
data['data'].push([new TimeSeries(), new TimeSeries()]);
|
|
}
|
|
|
|
for(i = 0; i <= 7; i++) {
|
|
var chart1 = new SmoothieChart({millisPerPixel:100});
|
|
chart1.addTimeSeries(data['data'][i][0], {lineWidth:2,strokeStyle:'#00ff00'});
|
|
chart1.streamTo(document.getElementById("channel" + i + "_0"), 2000);
|
|
data['chart'].push(chart1);
|
|
|
|
var chart2 = new SmoothieChart({millisPerPixel:100});
|
|
chart2.addTimeSeries(data['data'][i][1], {lineWidth:2,strokeStyle:'#ff0000'});
|
|
chart2.streamTo(document.getElementById("channel" + i + "_1"), 2000);
|
|
data['chart'].push(chart2);
|
|
}
|
|
}
|
|
|
|
ws = new WebSocket("ws://192.168.1.4:5678/down")
|
|
var request_data_interval
|
|
|
|
/*
|
|
ws.onopen = function()
|
|
{
|
|
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);
|
|
|
|
for(i = 0; i <= 7; i++) {
|
|
data['data'][i][0].append(new Date().getTime(), d['channels'][i]['power_val_dn']);
|
|
data['data'][i][1].append(new Date().getTime(), d['channels'][i]['snr_val_dn']);
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
ws.onclose = function()
|
|
{
|
|
// websocket is closed.
|
|
window.clearInterval(request_data_interval)
|
|
};
|
|
|
|
/*
|
|
function requestData()
|
|
{
|
|
//ws.send("get-data");
|
|
}
|
|
*/
|
|
</script>
|
|
</body>
|
|
|
|
</html> |