Difference between revisions of "Device orientation on the browser"
From Publication Station
| Line 74: | Line 74: | ||
==debugging mobile browsers== | ==debugging mobile browsers== | ||
[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi] | [https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi] | ||
Revision as of 21:55, 14 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/
