public
Last active

Device Orientation and Motion

  • Download Gist
index.html
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
<!DOCTYPE HTML>
<html>
<head>
<title>Device Orientation</title>
<style>
body { font-family: monospace; font-size: 40px; text-align: center; margin: 0;}
span { font-size: 1.4em; font-weight: bold;}
p { width: 33%; height: 20%; float: left; }
</style>
</head>
<body>
<p>
alpha<br/><span id="alpha"></span>
</p>
<p>
beta<br/><span id="beta"></span>
</p>
<p>
gamma<br/><span id="gamma"></span>
</p>
<p>
absolute<br/><span id="absolute"></span>
</p>
<p>
x<br/><span id="x"></span>
</p>
<p>
y<br/><span id="y"></span>
</p>
<p>
z<br/><span id="z"></span>
</p>
<p>
<small style="font-size: 18px;"><a href="https://developer.mozilla.org/en-US/docs/DOM/Orientation_and_motion_data_explained">orientation and motion</a></small><br/>
<small style="font-size: 18px;"><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation">learn more</a></small>
</p>
<script src="http://d3js.org/d3.v2.js"></script>
<script>
function handleOrientation(orientData) {
var absolute = orientData.absolute;
var alpha = orientData.alpha;
var beta = orientData.beta;
var gamma = orientData.gamma;
d3.select('#alpha').text(alpha ? alpha.toFixed(1) : null);
d3.select('#beta').text(beta ? beta.toFixed(1) : null);
d3.select('#gamma').text(gamma ? gamma.toFixed(1) : null);
d3.select('#absolute').text(gamma ? absolute.toFixed(1) : null);
}
 
function handleMotionEvent(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
 
d3.select('#x').text(x ? x.toFixed(1) : null);
d3.select('#y').text(y ? y.toFixed(1) : null);
d3.select('#z').text(z ? z.toFixed(1) : null);
}
 
window.addEventListener("deviceorientation", handleOrientation, true);
window.addEventListener("devicemotion", handleMotionEvent, true);
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.