-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (99 loc) · 2.33 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
.barContainer{
float:left;
height:100px;
width:1px;
}
.xbar{
position: relative;
background-color: rgba(250,0,0,0.3);
}
.ybar{
position: relative;
background-color: rgba(0,250,0,0.3);
}
.zbar{
position: relative;
background-color: rgba(0,0,250,0.3);
}
.graph{
position: absolute;
height:100px;
width:1000px
}
</style>
</head>
<body>
<button type="button" onclick="withGraphics=!withGraphics">Turn on/off Graphs</button>
<p id='pItem'>
</p>
<script type='text/javascript'>
function currentmillis() {
return (new Date()).getTime()-startMs;
}
var lastx=0
var lasty=0
var lastz=0
var withGraphics=false;
var parent =null;
var nbDifferentValues=0;
var startMs=0
startMs=currentmillis();
window.ondevicemotion = function(event){
nbDifferentValues++;
if(withGraphics){
if(parent==null){
parent=[document.getElementById('xgraph'),document.getElementById('ygraph'),document.getElementById('zgraph')];
}
var x=event.accelerationIncludingGravity.x;
var y= event.accelerationIncludingGravity.y;
var z= event.accelerationIncludingGravity.z;
data=[['xgraph',x-lastx],['ygraph',y-lasty],['zgraph',z-lastz]];
for(i in data){
var el=parent[i].children[0];
el.remove();
var diff=Math.floor(data[i][1]*300);
el.children[0].style.setProperty('height',Math.abs(diff)+'px');
if(diff<0){
el.children[0].style.setProperty('margin-top',diff+'px');
}
else{
el.children[0].style.setProperty('margin-top',0+'px');
}
parent[i].appendChild(el);
}
lastx=x;
lasty=y;
lastz=z;
}
// }
}
// }
function reset(){
nbDifferentValues=startMs=0;
startMs=currentmillis();
}
setInterval(function(){document.getElementById('pItem').innerHTML='Accelerometer data frequency is ' + Math.floor(1000*nbDifferentValues/currentmillis()) +'Hz'; reset()},1000);
</script>
<script type="text/javascript">
var ids=["x","y","z"]
for(j in ids){
axis=ids[j];
var marg=j*150;
marg+=100;
document.write('<div class="graph" id="'+axis+'graph" style="margin-top:'+marg+'px">')
var nbgraphdots=360;
for(i=0;i<nbgraphdots;i++){
document.write('<div class="barContainer"'+'><div class="'+axis+'bar"'+'></'+'div></'+'div>');
}
document.write('</div'+'>')
}
</script>
</body>
</html>