-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (108 loc) · 3.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
</head>
<style>
html{
background-color: rgb(46, 46, 46);
}
</style>
<canvas id="myChart" style="background-color: rgb(46, 46, 46);"></canvas>
</html>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{},{},{},{},{},{},{},{},{},{},{}]
},
options:{
responsive: true,
maintainAspectRatio: false,
animation: false
}
});
</script>
<script src="javas/socket.io.js"></script>
<script src="javas/jquery-3.5.1.js"></script>
<script>
var socket = io.connect('http://192.168.20.106:8000/');
var data0,data1,data2,data3,data4,data5,data6,data7,data8,data9,data10;
socket.on('data0', function(data){ data0 = data; });
socket.on('data1', function(data){ data1 = data; });
socket.on('data2', function(data){ data2 = data; });
socket.on('data3', function(data){ data3 = data; });
socket.on('data4', function(data){ data4 = data; });
socket.on('data5', function(data){ data5 = data; });
socket.on('data6', function(data){ data6 = data; });
socket.on('data7', function(data){ data7 = data; });
socket.on('data8', function(data){ data8 = data; });
socket.on('data9', function(data){ data9 = data; });
socket.on('data10', function(data){ data10 = data; });
timeout();
function timeout() {
setTimeout(function () {
chart.data.datasets[0].data.push(data0);
chart.data.datasets[0].label = 'I9-16';
chart.data.datasets[0].borderColor = '#852942';
chart.data.datasets[1].data.push(data1);
chart.data.datasets[1].label = 'I1-8';
chart.data.datasets[1].borderColor = '#FA41CA';
chart.data.datasets[2].data.push(data2);
chart.data.datasets[2].label = 'V-IN';
chart.data.datasets[2].borderColor = '#F599A6';
chart.data.datasets[3].data.push(data3);
chart.data.datasets[3].label = 'TEMP';
chart.data.datasets[3].borderColor = '#ECE976';
chart.data.datasets[4].data.push(data4);
chart.data.datasets[4].label = 'V-OUT';
chart.data.datasets[4].borderColor = '#44B05B';
chart.data.datasets[5].data.push(data5);
chart.data.datasets[5].label = 'V-OUT';
chart.data.datasets[5].borderColor = '#96BDE4';
chart.data.datasets[6].data.push(data6);
chart.data.datasets[6].label = 'V-OUT';
chart.data.datasets[6].borderColor = '#792096';
chart.data.datasets[7].data.push(data7);
chart.data.datasets[7].label = 'V-OUT';
chart.data.datasets[7].borderColor = '#EB4762';
chart.data.datasets[8].data.push(data8);
chart.data.datasets[8].label = 'V-OUT';
chart.data.datasets[8].borderColor = '#D96237';
chart.data.datasets[9].data.push(data9);
chart.data.datasets[9].label = 'V-OUT';
chart.data.datasets[9].borderColor = '#228BDC';
chart.data.datasets[10].data.push(data10);
chart.data.datasets[10].label = 'V-OUT';
chart.data.datasets[10].borderColor = '#55FFFF';
chart.data.labels.push(tempo);
chart.update();
if(chart.data.datasets[0].data.length > 50){
chart.data.datasets[0].data.shift();
chart.data.datasets[1].data.shift();
chart.data.datasets[2].data.shift();
chart.data.datasets[3].data.shift();
chart.data.datasets[4].data.shift();
chart.data.datasets[5].data.shift();
chart.data.datasets[6].data.shift();
chart.data.datasets[7].data.shift();
chart.data.datasets[8].data.shift();
chart.data.datasets[9].data.shift();
chart.data.datasets[10].data.shift();
chart.data.labels.shift();
}
timeout();
},100);
}
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var date = new Date();
var hours = date.getHours();
var minutes = addZero(date.getMinutes());
var tempo = hours+':'+minutes;
</script>