Device orientation on the browser: Difference between revisions
From Publication Station
m Andre moved page Browser motion to Device orientation on the browser |
|
(No difference)
| |
Revision as of 19:14, 15 December 2016
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/
