-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (84 loc) · 3.4 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
<html>
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.34.0/smoothie.js'></script>
<script type='text/Javascript'>
var charts = {};
function newchart(name) {
var sc=new SmoothieChart({millisPerPixel:2000,grid:{fillStyle:'#000000',millisPerLine:3600000,verticalSections:13},yRangeFunction:function(r){return{min:0,max:130}}});
var line1 = new TimeSeries();
var line2 = new TimeSeries();
var line3 = new TimeSeries();
var line4 = new TimeSeries();
var line5 = new TimeSeries();
var line6 = new TimeSeries();
sc.addTimeSeries(line1, { strokeStyle:'rgb(0, 250, 0)', fillStyle:'rgba(0, 250, 0, 0.5)', lineWidth:3 });
sc.addTimeSeries(line2, { strokeStyle:'rgb(255, 0, 0)', fillStyle:'rgba(255, 0, 0, 0.5)', lineWidth:3 });
sc.addTimeSeries(line3, { strokeStyle:'rgb(0, 50, 150)', fillStyle:'rgba(0, 50, 150, 0.5)', lineWidth:3 });
sc.addTimeSeries(line4, { strokeStyle:'rgb(250, 0, 0)', fillStyle:'rgba(0, 0, 0, 0.1)', lineWidth:3 });
sc.addTimeSeries(line5, { strokeStyle:'rgb(0, 250, 50)', lineWidth:1 });
sc.addTimeSeries(line6, { strokeStyle:'rgb(250, 0, 0)', lineWidth:1 });
var canvas = document.createElement('canvas');
var div = document.getElementById('graphs');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.innerText = name;
canvas.id = name;
canvas.width = 1224;
canvas.height = 80;
canvas.style.zIndex = 8;
canvas.style.border = "1px solid";
div.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
td2.appendChild(canvas)
sc.streamTo(canvas);
return [sc, canvas, line1, line2, line3, line4, line5, line6];
}
setInterval(async function() {
r=await fetch('/57f451ba-95c0-4d17-9c0f-22670042f212.json');
data=await r.json();
n=Date.now();
var unresponsive_at = 10 * 60 * 1000; // ten minutes
const ordered = Object.keys(data).sort().reduce(
(obj, key) => {
obj[key] = data[key];
return obj;
}, {});
for (const [key, value] of Object.entries(ordered)) {
if(charts[key] == undefined) {
charts[key] = newchart(key);
}
[sc, canvas, line1, line2, line3, line4, line5, line6] = charts[key];
var time = Date.parse(value.time);
if(n - time > unresponsive_at) continue;
if(value.voltage) {
if(value.voltage < 4.9 && value.battery) {
line1.append(n, (value.voltage - 3.2)*100.0);
} else {
pc = (value.voltage - 11.65) * 83; // 0% at 11.65v to 100% at 12.85v
line1.append(n, pc);
}
}
if(value.current) {
if(value.current > 0) {
line2.append(n, 0);
line3.append(n, value.current / 8);
} else {
line2.append(n, -value.current / 8);
line3.append(n, 0);
}
}
if(value.temperature) line4.append(n, (value.temperature*9/5)+32);
if(value.voltage || value.battery) {
line5.append(n, 100);
//line6.append(n, 114);
}
}
}, 4000);
</script>
</head>
<body>
<table id="graphs" style="height:100%"></table>
</body>
</html>