Get different angles

The above screenshot came from an iPad laying immobile on a desk. Theoretically, all the angle values will be zero when the device is laid flat, providing it has not been moved since the page loaded. However, depending on the hardware, these values may change even if the device is stationary: a very sensitive sensor might report constantly changing values. This is why, in the example, we round the returned values with Math.round() at display time (see code).

If we change the orientation of the device here are the results:

Typical use / code from the above example:

...

<h2>Device Orientation with HTML5</h2>

You need to be on a mobile device or use a laptop with accelerometer/orientation

device.

<p>

<div id="LR"></div>

<div id="FB"></div>

<div id="DIR"></div>

<script type="text/javascript">

   if (window.DeviceOrientationEvent) {

      console.log("DeviceOrientation is supported");

      window.addEventListener('deviceorientation', function(eventData) {

         // gamme is for left/right inclination

         var LR = eventData.gamma;

         // beta is for front/back inclination

         var FB = eventData.beta;

         // alpha is for orientation

         var DIR = eventData.alpha;

         // display values on screen

         deviceOrientationHandler(LR, FB, DIR);

      }, false);

   } else {

      alert("Device orientation not supported on your device or browser. Sorry.");

   }

function deviceOrientationHandler(LR, FB, DIR) {

   document.querySelector("#LR").innerHTML = "gamma : " + Math.round(LR);

   document.querySelector("#FB").innerHTML = "beta : " + Math.round(FB);

   document.querySelector("#DIR").innerHTML = "alpha : " + Math.round(DIR);

}

</script>

 ...

Another example that shows how to orient the HTML5 logo using the orientation API + CSS3 3D rotations

This is just a variation of the previous example, try it at JsBin

Results on the iPad: the logo rotates when we change the iPad's orientation. This is good "visual feedback" for an orientation controlled game...

This example is also on video.

Code from the example:

...

<h2>Device Orientation with HTML5</h2>

You need to be on a mobile device or use a laptop with accelerometer/orientation

device.

<p>

<div id="LR"></div>

<div id="FB"></div>

<div id="DIR"></div>

<img src="https://www.html5

rocks.com/en/tutorials/device/orientation/html5_logo.png" id="imgLogo"

class="logo">

<script type="text/javascript">

   if (window.DeviceOrientationEvent) {

      console.log("DeviceOrientation is supported");

      window.addEventListener('deviceorientation', function(eventData) {

          var LR = eventData.gamma;

          var FB = eventData.beta;

          var DIR = eventData.alpha;

          deviceOrientationHandler(LR, FB, DIR);

      }, false);

   } else {

      alert("Not supported on your device or browser. Sorry.");

   }

   function deviceOrientationHandler(LR, FB, DIR) {

      // USE CSS3 rotations for rotating the HTML5 logo

      //for webkit browser

      document.getElementById("imgLogo").style.webkitTransform =

      "rotate(" + LR + "deg) rotate3d(1,0,0, " + (FB * -1) + "deg)";

      //for HTML5 standard-compliance

      document.getElementById("imgLogo").style.transform =

      "rotate(" + LR + "deg) rotate3d(1,0,0, " + (FB * -1) + "deg)";

      document.querySelector("#LR").innerHTML = "gamma : " + Math.round(LR);

      document.querySelector("#FB").innerHTML = "beta : " + Math.round(FB);

      document.querySelector("#DIR").innerHTML = "alpha : " + Math.round(DIR);

}

</script>

 ...

A simple level tool using device orientation

This example works in Firefox, Chrome, and IOS Safari. Created by Derek Anderson @Media Upstream. Original source code available GitHub.

We adapted the source code so that you can tweak it in JsBin, or test it in standalone mode (using a mobile device).