accelerometer-iot-demo/index.html at gh-pages · AlgorithmHub/accelerometer-iot-demo · GitHub

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accelerometer Demo</title>
<meta name="viewport" content="width=device-width,user-scalable=yes" />
<style>
body {
	font-family: helvetica, arial, sans serif;
}
</style>
</head>

<body>
<div id="content">
    <h1>Accelerometer Data</h1>
<ul>
	<li>acceleration x: <span id="accelerationX"></span> g</li>
	<li>acceleration y: <span id="accelerationY"></span> g</li>
	<li>acceleration z: <span id="accelerationZ"></span> g</li>
	<li>rotation alpha: <span id="rotationAlpha"></span> degree</li>
	<li>rotation beta: <span id="rotationBeta"></span> degree</li>
	<li>rotation gamma: <span id="rotationGamma"></span> degree</li>
</ul>
</div>
<script type="text/javascript">

var  x = 0,  y = 0;
var vx = 0, vy = 0;
var ax = 0, ay = 0;

if (window.DeviceMotionEvent != undefined) {
	window.ondevicemotion = function(e) {
		ax = event.accelerationIncludingGravity.x * 5;
		ay = event.accelerationIncludingGravity.y * 5;
		document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x;
		document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y;
		document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z;

		if ( e.rotationRate ) {
			document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha;
			document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta;
			document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma;
		}
	}

	setInterval( function() {
		var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
		if ( landscapeOrientation) {
			vx = vx + ay;
			vy = vy + ax;
		} else {
			vy = vy - ay;
			vx = vx + ax;
		}
		vx = vx * 0.98;
		vy = vy * 0.98;
		y = parseInt(y + vy / 50);
		x = parseInt(x + vx / 50);
	}, 250);
}

</script>

</body>
</html>