/
whereami.html
93 lines (85 loc) · 3.26 KB
/
whereami.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
<html>
<head>
<title>Orientation and Motion</title>
<style>
body { font-size: 100%; }
input { font-size: 100%; }
table { font-size: 100%; }
</style>
</head>
<script type="text/javascript">
var compOrientation = {alpha: 0, beta: 0, gamma: 0};
var orientationEventReceived = false;
function registerListeners() {
window.addEventListener('deviceorientation', function(event) {
orientationEventReceived = true;
document.getElementById('alpha').value = Math.round(event.alpha);
document.getElementById('beta').value = Math.round(event.beta);
document.getElementById('gamma').value = Math.round(event.gamma);
});
window.addEventListener('devicemotion', function(event) {
const accel = event.acceleration;
compOrientation.alpha += event.rotationRate.alpha*event.interval;
compOrientation.beta += event.rotationRate.beta*event.interval;
compOrientation.gamma += event.rotationRate.gamma*event.interval;
document.getElementById('ax').value = (100*accel.x).toFixed(2);
document.getElementById('ay').value = (100*accel.y).toFixed(2);
document.getElementById('az').value = (100*accel.z).toFixed(2);
document.getElementById('ralpha').value = event.rotationRate.alpha.toFixed();
document.getElementById('rbeta').value = event.rotationRate.beta.toFixed();
document.getElementById('rgamma').value = event.rotationRate.gamma.toFixed();
document.getElementById('calpha').value = Math.round(compOrientation.alpha);
document.getElementById('cbeta').value = Math.round(compOrientation.beta);
document.getElementById('cgamma').value = Math.round(compOrientation.gamma);
});
}
function requestPermissions() {
if (typeof DeviceMotionEvent === 'undefined') {
return;
}
if (typeof DeviceMotionEvent.requestPermission !== 'function') {
return;
}
DeviceMotionEvent.requestPermission(function(state) {
if (state == 'granted') {
registerListeners();
}
}).catch(console.error);
}
function displayClickToEnable() {
document.getElementById('click-to-enable').style.visibility='visible';
}
function onLoad() {
registerListeners();
setTimeout(function() {
if (orientationEventReceived) {
return;
}
displayClickToEnable();
}, 1500);
}
</script>
<body onload='onLoad();'>
<DIV>
<H3 style="display:inline">Orientation</H3>
<DIV style="display:inline;visibility:hidden" id="click-to-enable">
<INPUT TYPE="submit" onClick="requestPermissions();" value="Click here to enable orientation events" />
</DIV>
</DIV>
<TABLE>
<TR><TH>Angle</TH><TD>Event</TD><TD>Computed</TD></TR>
<TR><TD>Alpha</TD><TD><INPUT id="alpha"/> deg</TD><TD><INPUT id="calpha"/> deg</TD></TR>
<TR><TD>Beta</TD><TD><INPUT id="beta"/> deg</TD><TD><INPUT id="cbeta"/> deg</TD></TR>
<TR><TD>Gamma</TD><TD><INPUT id="gamma"/> deg</TD><TD><INPUT id="cgamma"/> deg</TD></TR>
</TABLE>
<H3>Motion</H3>
<TABLE>
<TR><TD>Rot.Alpha</TD><TD><INPUT id="ralpha"/> deg/sec</TD></TR>
<TR><TD>Rot.Beta</TD><TD><INPUT id="rbeta"/> deg/sec</TD></TR>
<TR><TD>Rot.Gamma</TD><TD><INPUT id="rgamma"/> deg/sec</TD></TR>
<TR><TD>Acc.x</TD><TD><INPUT id="ax"/> cm/sec2</TD></TR>
<TR><TD>Acc.Y</TD><TD><INPUT id="ay"/> cm/sec2</TD></TR>
<TR><TD>Acc.Z</TD><TD><INPUT id="az"/> cm/sec2</TD></TR>
</TABLE>
</BODY>
</HTML>