Skip to content

Instantly share code, notes, and snippets.

@psenough

psenough/index.html

Created May 15, 2019 16:38
Show Gist options
  • Save psenough/865c2effc328060429ecc90f21ea8766 to your computer and use it in GitHub Desktop.
Save psenough/865c2effc328060429ecc90f21ea8766 to your computer and use it in GitHub Desktop.
Download ZIP
device orientation and motion detection test page
Raw
index.html
<DOCTYPE html>
<html>
<head>
<script>
function init() {
//Find our div containers in the DOM
var dataContainerOrientation = document.getElementById('dataContainerOrientation');
var dataContainerMotion = document.getElementById('dataContainerMotion');
//Check for support for DeviceOrientation event
if(window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', function(event) {
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
if(alpha!=null || beta!=null || gamma!=null)
dataContainerOrientation.innerHTML = 'alpha: ' + alpha + '<br/>beta: ' + beta + '<br />gamma: ' + gamma;
}, false);
}
// Check for support for DeviceMotion events
if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', function(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
var r = event.rotationRate;
var html = 'Acceleration:<br />';
html += 'x: ' + x +'<br />y: ' + y + '<br/>z: ' + z+ '<br />';
html += 'Rotation rate:<br />';
if(r!=null) html += 'alpha: ' + r.alpha +'<br />beta: ' + r.beta + '<br/>gamma: ' + r.gamma + '<br />';
dataContainerMotion.innerHTML = html;
});
}
}
</script>
</head>
<body onload="init()">
<div id="dataContainerOrientation">
No device orientation data
</div>
<div id="dataContainerMotion">
No device motion data
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment