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]
[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android]

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/

debugging mobile browsers

debugging Firefox over Wifi

[1]