-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathindex.html
108 lines (82 loc) · 3.14 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
<!DOCTYPE html>
<meta charset="utf-8">
<hr>
<script src="javascript/jquery.min.js"></script>
<script src="javascript/RGraph/RGraph.common.core.js"></script>
<script src="javascript/RGraph/RGraph.gauge.js"></script>
<script src="javascript/RGraph/RGraph.common.effects.js" ></script>
<script src="javascript/RGraph/RGraph.line.js" ></script>
<script>
let gauge;
let canvas;
let obj = null;
let data = [];
const numvalues = 1200;
window.onload = function () {
gauge = new RGraph.Gauge('cvs', 0, 100, 84)
.set('scale.decimals', 0)
.set('tickmarks.small', 50)
.set('tickmarks.big', 5)
.set('title.top', 'Temperature')
.set('title.top.size', 24)
.set('title.top.pos', 0.15)
.set('title.bottom', 'm³')
.set('title.bottom.color', '#aaa')
.set('border.outer', 'Gradient(white:white:white:white:white:white:white:white:white:white:#aaa)')
.draw();
canvas = document.getElementById("cvs_graph");
function prepare_graph() {
obj = new RGraph.Line('cvs_graph', [])
.set('title.vpos', 0.5)
.set('title.yaxis.pos', 0.5)
.set('colors', ['black'])
.set('linewidth',0.75)
.set('yaxispos', 'right')
.set('ymax', 100)
.set('xticks', 25)
.set('numyticks', 0)
.set('numxticks', 0)
.set('background.grid', true)
.set('tickmarks', true)
.set('shadow', false)
.set('gutter.top', 5)
.set('gutter.bottom', 5);
// Pre-pad the arrays with null values
for (let i=0; i<numvalues; ++i) { data.push(null); }
}
prepare_graph();
}
function drawGraph (value,timestamp) {
if (!obj) return;
RGraph.Clear(canvas);
// Add some data to the data arrays
const len = data.length;
data.push(value);
if (data.length > numvalues) {
data = RGraph.array_shift(data);
}
obj.original_data[0] = data;
obj.Draw();
}
</script>
<canvas id="cvs" width="250" height="250">[No canvas support]</canvas>
<canvas id="cvs_graph" width="650" height="250">[No canvas support]</canvas>
<div id="field"></div>
<div id="content"></div>
<div id="info"></div>
<script src='/socket.io/socket.io.js'></script>
<script>
const field = document.getElementById("field");
const sendButton = document.getElementById("send");
const content = document.getElementById("content");
const info = document.getElementById("info");
const messages = [];
const socket = io.connect('http://localhost:3700');
socket.on('message', function (data) {
gauge.value = data.value;
gauge.draw();
gauge.set('title.top', data.browseName);
info.innerHTML = "nodeId= " + data.nodeId + " timestamp= "+ data.timestamp;
drawGraph(data.value);
});
</script>