Skip to content

Instantly share code, notes, and snippets.

@Half-Shot

Half-Shot/motion.html

Last active January 29, 2019 12:42
Show Gist options
  • Save Half-Shot/9e661aba6b73b49dab6df9b6f0843f49 to your computer and use it in GitHub Desktop.
Save Half-Shot/9e661aba6b73b49dab6df9b6f0843f49 to your computer and use it in GitHub Desktop.
Download ZIP
Motion test
Raw
motion.html
<body>
<h1> Motion! </h1>
<p style="color:red" id="error" hidden> Hmm, your device isn't sending any motion events. Is this really a mobile device? </p>
<p> X: <span id="moX">$</p>
<p> Y: <span id="moY">$</p>
<p> Z: <span id="moZ">$</p>
<script>
setTimeout(() => {
if (window.accelSupported === false) {
document.querySelector("#error").hidden = false;
}
}, 1500);
window.accelCooldown = false;
window.accelSupported = false;
function handleMotionEvent(event) {
window.accelSupported = true;
const x = Math.round(event.acceleration.x * 100) / 100;
const y = Math.round(event.acceleration.y * 100) / 100;
const z = Math.round(event.acceleration.z * 100) / 100;
if (x > 6 || y > 6) {
if (!window.accelCooldown) {
window.accelCooldown = true;
document.body.style.setProperty("background-color", "red");
setTimeout(() => {
document.body.style.removeProperty("background-color");
window.accelCooldown = false;
}, 400);
}
}
document.querySelector("#moX").innerHTML = x;
document.querySelector("#moY").innerHTML = y;
document.querySelector("#moZ").innerHTML = z;
// Do something awesome.
}
window.addEventListener("devicemotion", handleMotionEvent, true);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment