-
Notifications
You must be signed in to change notification settings - Fork 0
/
myscript.js
91 lines (82 loc) · 1.52 KB
/
myscript.js
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
const DS = {
x: [],
alpha: [],
beta: [],
gamma: []
};
// // initialize chart --->
const myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });
const option = {
title: {
text: 'DeviceOrientation API Demo'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
}
},
color: ['#c4c', '#cc4', '#4cc'],
legend: {
data: ['alpha', 'beta', 'gamma'],
bottom: 'bottom'
},
xAxis: {
data: DS.x
},
yAxis: {
name: 'value (deg.)',
max: 400,
min: -200
},
series: [
{
name: 'alpha',
type: 'line',
data: DS.alpha,
symbol: 'none'
},
{
name: 'beta',
type: 'line',
data: DS.beta,
symbol: 'none'
},
{
name: 'gamma',
type: 'line',
data: DS.gamma,
symbol: 'none'
},
],
animation: false
};
myChart.setOption(option);
// // <--- initialize chart
let cnt = 0;
window.addEventListener("deviceorientation", ev => {
addData({ x: cnt++, alpha: ev.alpha, beta: ev.beta, gamma: ev.gamma });
if (cnt > 100) removeData();
myChart.setOption(option);
// for debug
timer();
})
function addData(data) {
for (key in DS)
DS[key].push(data[key]);
}
function removeData() {
for (key in DS)
DS[key].shift();
}
// for debug
const start = Date.now();
let lastTime = start;
function timer() {
if (cnt % 100 == 0) {
const now = Date.now();
console.log(`${cnt} times, ${Math.floor((now - start) / 1000)} s from start, LAP: ${now - lastTime} ms, about ${(now - lastTime) / 100} ms per single draw`)
lastTime = now;
}
}