-
Notifications
You must be signed in to change notification settings - Fork 3
/
interface.html
121 lines (102 loc) · 2.66 KB
/
interface.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
<!DOCTYPE html>
<html>
<head>
<title>Chillmon</title>
<style type="text/css">
body {
background-color: #111111;
color: #eeeeee;
font-family: tahoma, arial, sans-serif;
padding-left: 100px;
}
h4 {
margin-bottom: 1px;
}
</style>
<script type="text/javascript" src="smoothie.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function Boxed(type) {
this.type = type;
this.val = 0;
}
Boxed.prototype.get = function() {
return this.val;
}
Boxed.prototype.set = function(v) {
this.val = v;
}
function init() {
$.ajax({
url: '/trace',
dataType: 'json',
success: function(data) {
trace_set = data.data;
for (var tracetype in trace_set) {
var tl = new SmoothieChart({
millisPerPixel: 5000,
grid: {
strokeStyle: '#555555',
lineWidth: 1,
millisPerLine: 300000,
verticalSections: 4
},
fps: 0.2,
interpolation: 'line',
scaleSmoothing: 1.0
});
traces = trace_set[tracetype];
for (var id in traces) {
setup_traces(tl, tracetype, traces[id], id);
}
}
}
});
}
function setup_traces(tl, tracetype, tracename, id) {
var dataset = new TimeSeries();
var ts = new Boxed();
var rgb = [
'rgba(255, 0, 0, 1)',
'rgba(0, 255, 0, 1)',
'rgba(0, 0, 255, 1)',
'rgba(220, 0, 220, 1)',
'rgba(2, 183, 98, 1)',
'rgba(98, 27, 120, 1)'
]
// Every second, get the total trace
setInterval(function() {
update_dataset(dataset, ts, tracetype, tracename);
}, 5000);
tl.addTimeSeries(dataset, {strokeStyle: rgb[id], fillStyle: 'rgba(10, 10, 10, 0.1)', lineWidth: 2});
tl.streamTo(document.getElementById(tracetype), 5000);
}
function update_dataset(dataset, ts, tt, tn) {
$.ajax({
url: '/trace/' + tt + '/' + tn + '/' + ts.get(),
dataType: 'json',
success: function(data) {
for (var i in data['data']) {
v = data['data'][i];
dataset.append(v[0], v[1]);
ts.set(v[0]);
}
}
});
}
</script>
</head>
<body onload="init()">
<h1>Chillmon</h1>
<h4>Temps</h4>
<canvas id="temps" width="720" height="200"></canvas>
<h4>PID States</h4>
<canvas id="pidstate" width="720" height="200"></canvas>
<h4>Constants</h4>
<canvas id="constants" width="720" height="200"></canvas>
<h4>Errors</h4>
<canvas id="errors" width="720" height="200"></canvas>
<h4>Physical</h4>
<canvas id="physical" width="720" height="200"></canvas>
</body>
</html>