Device orientation on the browser

From Publication Station

To detect the orientation of devices where the web browser is running, using Javascript, we rely on the window.addEventListener("deviceorientation") that listens to the orientation of the device.

Example

See it running in: http://publicationstation.wdka.hro.nl/D&T/orientation/


code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <title>Device orientation</title>
    <style type="text/css">
      .h5logo {
        width: 50%;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

    </style>
  </head>
  <body>
    <div role="main" class="container">
      <h1>Device Orientation</h1>
      <p>example from <a href="http://googlesamples.github.io/web-fundamentals/fundamentals/native-hardware/device-orientation/dev-orientation.html">http://googlesamples.github.io/web-fundamentals/fundamentals/native-hardware/device-orientation/dev-orientation.html</a></p>
      <p>
        Device orientation is <b><span id="doeSupported">not</span></b> supported 
        on your device.
      </p>

      <img id="h5logo" src="http://publicationstation.wdka.hro.nl/wiki/images/8/85/Guttenberg.jpg" class="h5logo">

      <h2>Rotation Data</h2>
      <p>
        <b>alpha:</b> <span id="alpha"></span><br>
        <b>beta:</b> <span id="beta"></span><br>
        <b>gamma:</b> <span id="gamma"></span><br>
      </p>

      <p>
        <b>Last updated:</b> <span id="timestamp"></span>
      </p>

    </div>
    <script type="text/javascript">

      var fixed = 2;
      var h5logo  = $("#h5logo");
      var timestamp = $("#timestamp");
      var alpha = $("#alpha");
      var beta = $("#beta");
      var gamma = $("#gamma");


      /* // [START devori] */
      if (window.DeviceOrientationEvent) {
        window.addEventListener('deviceorientation', deviceOrientationHandler, false);
        $("#doeSupported").innerText = "";
      }
      /* // [END devori] */

      var deviceOrientationData;

      function deviceOrientationHandler(evt) {
        deviceOrientationData = evt;
        try {
            timestamp.text( new Date(evt.timeStamp));
            alpha.text( evt.alpha.toFixed(fixed) );
            beta.text(  evt.beta.toFixed(fixed) );
            gamma.text( evt.gamma.toFixed(fixed) );
          var rotation = "rotate("+ evt.alpha +"deg) rotate3d(1,0,0, "+ (evt.gamma * -1)+"deg)";
	    h5logo.css('transform', rotation).css('webkitTransform', rotation);
	    
        } catch (ex) {
            $("EdoeSupported").text("NOT");
        }
      }


    </script>
  </body>
</html>

Emulate device orientation

On a desktop computer the device orientation can be emulated by the browser.

In Chrome sensors can be simulated by:

  • Opening the DevTools main menu, then
  • Under More Tools, clicking on Sensors

https://developers.google.com/web/tools/chrome-devtools/device-mode/imgs/navigate-to-sensors.png

More info at: https://developers.google.com/web/tools/chrome-devtools/device-mode/device-input-and-sensors

more on Device orientation/motion

http://googlesamples.github.io/web-fundamentals/fundamentals/native-hardware/device-orientation/dev-orientation.html

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

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Device_orientation_on_the_browser&oldid=5947’