Difference between revisions of "Device orientation on the browser"

From Publication Station
 
Line 1: Line 1:
To detect the motion of devices where the web browser is running, using Javascript, we rely on the
To detect the orientation of devices where the web browser is running, using Javascript, we rely on the
<code> window.addEventListener("devicemotion")</code> that listens to the motion of the device.
<code> window.addEventListener("deviceorientation")</code> that listens to the orientation of the device.


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




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


<body>
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<div id="status"><a href=\"http://www.w3.org/TR/orientation-event/">http://www.w3.org/TR/orientation-event/</a> is supported.</div>
     <style>
<br/><br/>
      body {
     <div id="accelerometer">
        margin: 2em;
     <p><b>X</b>: <div id="x"></div></p>
      }
     <p><b>Y</b>: <div id="y"></div></p>
     </style>
     <p><b>Z</b>: <div id="z"></div></p>
     <title>Device orientation</title>
</div>
     <style type="text/css">
    <br/><br/>
      .h5logo {
   
        width: 50%;
<p>Example based on<a href="https://github.com/altermarkive/Learning-Sensor-Access-in-JS">Learning Sensor Access in JS</a> by altermarkive.</p>
        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">


<script type="text/javascript">
      <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>


function motion(event){
      <p>
    $("div#x").html(event.accelerationIncludingGravity.x);
        <b>Last updated:</b> <span id="timestamp"></span>
    $("div#y").html(event.accelerationIncludingGravity.y);
      </p>
    $("div#z").html(event.accelerationIncludingGravity.z);
}


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


function go(){
      var fixed = 2;
  if(window.DeviceMotionEvent){
      var h5logo  = $("#h5logo");
       window.addEventListener("devicemotion", motion, false);
      var timestamp = $("#timestamp");
       // window.addEventListener does:
       var alpha = $("#alpha");
      // * listen to device motion
       var beta = $("#beta");
      // * at every update run motion function, to update the html
      var gamma = $("#gamma");
  }else{
    var status = document.getElementById("status");
    status.innerHTML = status.innerHTML.replace(
      "is supported", "is not supported"
    );
  }
}


$(document).ready(function(){
    go();
})


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


</script>
      var deviceOrientationData;


</body>
      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>
</html>


</source>
</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==
==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://mobiforge.com/design-development/html5-mobile-web-device-orientation-events


Line 71: Line 116:


https://www.html5rocks.com/en/tutorials/device/orientation/
https://www.html5rocks.com/en/tutorials/device/orientation/


==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]

Latest revision as of 19:22, 15 December 2016

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’