Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Device Orientation and Motion
<title>Device Orientation</title>
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; }
alpha<br/><span id="alpha"></span>
beta<br/><span id="beta"></span>
gamma<br/><span id="gamma"></span>
absolute<br/><span id="absolute"></span>
x<br/><span id="x"></span>
y<br/><span id="y"></span>
z<br/><span id="z"></span>
<small style="font-size: 18px;"><a href="">orientation and motion</a></small><br/>
<small style="font-size: 18px;"><a href="">learn more</a></small>
<script src=""></script>
function handleOrientation(orientData) {
var absolute = orientData.absolute;
var alpha = orientData.alpha;
var beta = orientData.beta;
var gamma = orientData.gamma;'#alpha').text(alpha ? alpha.toFixed(1) : null);'#beta').text(beta ? beta.toFixed(1) : null);'#gamma').text(gamma ? gamma.toFixed(1) : null);'#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;'#x').text(x ? x.toFixed(1) : null);'#y').text(y ? y.toFixed(1) : null);'#z').text(z ? z.toFixed(1) : null);
window.addEventListener("deviceorientation", handleOrientation, true);
window.addEventListener("devicemotion", handleMotionEvent, true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.