-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (94 loc) · 2.92 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
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="all"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" media="all"/>
<link rel="stylesheet" href="flatui/css/flat-ui.css" medial="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<html>
<body style='margin-top:20px'>
<div class='container-fluid '>
<div class="col-xs-4 col-md-4 col-sm-4">
<p class='lead'>Device Orientation</p>
<table class='table'>
<tr>
<td>Tilt Left/Right</td>
<td>gamma</td>
<td id="doTiltLR">Null</td>
</tr>
<tr>
<td>Tilt Front/Back</td>
<td>beta</td>
<td id="doTiltFB">Null</td>
</tr>
<tr>
<td>Direction</td>
<td>alpha</td>
<td id="doDirection">Null</td>
</tr>
</table>
<div class="image" style="perspective:300px;">
<img src='html5-logo-thum.png' id="imgLogo" class="logo">
</div>
</div>
<!-- <h2>Device Motion</h2> -->
<!-- <table> -->
<!-- <tr> -->
<!-- <td>Event Supported</td> -->
<!-- <td id="dmEvent"></td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td>acceleration</td> -->
<!-- <td id="moAccel"></td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td>accelerationIncludingGravity</td> -->
<!-- <td id="moAccelGrav"></td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td>rotationRate</td> -->
<!-- <td id="moRotation"></td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td>interval</td> -->
<!-- <td id="moInterval"></td> -->
<!-- </tr> -->
<!-- </table> -->
</div>
</body>
</html>
<script>
if (window.DeviceOrientationEvent) {
console.log("Device orientation supported");
window.addEventListener('deviceorientation', function(eventData) {
var tiltLR = eventData.gamma;
var tiltFB = eventData.beta;
var dir = eventData.alpha;
document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR) + ' deg';
document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB) + ' deg';
document.getElementById("doDirection").innerHTML = Math.round(dir) + ' deg';
var logo = document.getElementById("imgLogo");
logo.style.webkitTransform =
"rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
logo.style.MozTransform = "rotate("+ tiltLR +"deg)";
logo.style.transform =
"rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
}, false);
}
else
{
document.getElementById("doEvent").innerHtml = "Not Supported";
}
<!-- if (window.DeviceMotionEvent) { -->
<!-- console.log("Device motion supported"); -->
<!-- } -->
<!-- if (window.DeviceMotionEvent) { -->
<!-- window.addEventListener('devicemotion', deviceMotionHandler, -->
<!-- false); -->
<!-- } -->
<!-- else -->
<!-- { -->
<!-- document.getElementById("dmEvent").innerHtml = "Not Supported"; -->
<!-- } -->
</script>