-
Notifications
You must be signed in to change notification settings - Fork 4
/
receiver_graphs.html
123 lines (96 loc) · 3.09 KB
/
receiver_graphs.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
<!DOCTYPE html>
<html>
<head>
<title>Touch Receiver Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style type="text/css">
body { margin: 0px; overflow: hidden; }
</style>
</head>
<body>
<script src="src/wire.js"></script>
<script src="src/connection.js"></script>
<script src="src/receiver.js"></script>
<script>
var canvas = document.createElement('canvas');
canvas.width = innerWidth;
canvas.height = innerHeight;
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
function Counter() {
this.data = [];
}
Counter.prototype.push = function(d) {
this.data.push(d);
if (this.data.length > innerWidth) this.data.shift();
}
var dm_x = new Counter();
var dm_y = new Counter();
var dm_z = new Counter();
var dm_a = new Counter();
var dm_b = new Counter();
var dm_g = new Counter();
var do_a = new Counter(); // 0 to 360 Z axis
var do_b = new Counter(); // -180 to 180 X axis
var do_g = new Counter(); // -90 to 90 Y Axis
var dm_amp = new Counter();
var so = new Counter();
var orient = 0;
function onOrientation(o) {
orient = o;
}
function onDm(x, y, z, a, b, g) {
dm_x.push(x);
dm_y.push(y);
dm_z.push(z);
dm_a.push(a);
dm_b.push(b);
dm_g.push(g);
dm_amp.push(Math.sqrt(x * x + y * y + z * z));
}
function onDo(a, b, g, _, o) {
do_a.push(a);
do_b.push(b);
do_g.push(g);
// so.push(orient);
so.push(o);
}
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(10, 0);
ctx.fillText(window.connection && connection.status, 0, 20);
ctx.font = '34px monospace';
renderUnit(dm_x, 0.5);
renderUnit(dm_y, 0.5);
renderUnit(dm_z, 0.5);
renderUnit(dm_a, 30);
renderUnit(dm_b, 30);
renderUnit(dm_g, 30);
renderUnit(do_a, 15);
renderUnit(do_b, 15);
renderUnit(do_g, 15);
renderUnit(so, 5);
renderUnit(dm_amp, -0.25);
ctx.restore();
requestAnimationFrame(render);
}
function renderUnit(unit, scale) {
scale = scale || 1;
ctx.translate(0, 50);
ctx.beginPath();
var data = unit.data;
if (!data.length) return;
ctx.moveTo(0, data[0] / scale);
for (var i = 0; i < data.length; i++) {
ctx.lineTo(i, data[i] / scale);
}
ctx.stroke();
ctx.fillStyle = 'purple';
var l = data[data.length - 1].toFixed(1);
ctx.fillText(Array(Math.max(7 - l.length, 0)).fill(' ').join('') + l, 0, 0);
}
render();
</script>
</body>
</html>