Device orientation on the browser
From Publication Station
Revision as of 19:14, 15 December 2016 by Andre (talk | contribs) (Andre moved page Browser motion to Device orientation on the browser)
To detect the motion of devices where the web browser is running, using Javascript, we rely on the
window.addEventListener("devicemotion") that listens to the motion of the device.
Example
See it running in: http://publicationstation.wdka.hro.nl/motion/
code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Acess browser accelerometer</title>
</head>
<body>
<div id="status"><a href=\"http://www.w3.org/TR/orientation-event/">http://www.w3.org/TR/orientation-event/</a> is supported.</div>
<br/><br/>
<div id="accelerometer">
<p><b>X</b>: <div id="x"></div></p>
<p><b>Y</b>: <div id="y"></div></p>
<p><b>Z</b>: <div id="z"></div></p>
</div>
<br/><br/>
<p>Example based on<a href="https://github.com/altermarkive/Learning-Sensor-Access-in-JS">Learning Sensor Access in JS</a> by altermarkive.</p>
<script type="text/javascript">
function motion(event){
$("div#x").html(event.accelerationIncludingGravity.x);
$("div#y").html(event.accelerationIncludingGravity.y);
$("div#z").html(event.accelerationIncludingGravity.z);
}
function go(){
if(window.DeviceMotionEvent){
window.addEventListener("devicemotion", motion, false);
// window.addEventListener does:
// * listen to device motion
// * at every update run motion function, to update the html
}else{
var status = document.getElementById("status");
status.innerHTML = status.innerHTML.replace(
"is supported", "is not supported"
);
}
}
$(document).ready(function(){
go();
})
</script>
</body>
</html>
more on Device orientation/motion
https://mobiforge.com/design-development/html5-mobile-web-device-orientation-events
https://www.w3.org/TR/orientation-event/
https://www.html5rocks.com/en/tutorials/device/orientation/
