Editing Device orientation on the browser (section)

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


==code==
<source lang="html4strict">
<!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>

</source>

== 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==
[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi]