Device orientation on the browser

From Publication Station

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/

debugging mobile browsers

debugging Firefox over Wifi