Skip to content

Instantly share code, notes, and snippets.

@syntagmatic

syntagmatic/index.html

Created August 9, 2012 23:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save syntagmatic/3309044 to your computer and use it in GitHub Desktop.
Save syntagmatic/3309044 to your computer and use it in GitHub Desktop.
Download ZIP
Device Orientation and Motion
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment