van an nguyen

Get different angles

Get the different angles using the JavaScript HTML5 orientation API

Typical use

The use of this API is very straightforward:

    1. Test if your browser supports the orientation API (window.DeviceOrientationEvent is not null),
    2. Define a listener for the ‘deviceorientation‘ event as follows: window.addEventListener(‘deviceorientation’, callback, false); with the callback function accepting the event object as its single input parameter,
    3. Extract the angles from the event (use its properties: alpha, beta, gamma).

Here’s an example on JsBin. Try it with  a smartphone, a tablet, or a device with an accelerometer: 

(If using a mobile device,  open the page in standalone mode (without the JsBin editor) )

orientation api 2

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 withMath.round() at display time (see code).
If we change the orientation of the device here are the results:
orientation api 3orientation api 1orientation api 2
Typical use / code from the above example:
  1. …
  2. <h2>Device Orientation with HTML5</h2>
  3. You need to be on a mobile device or use a laptop with accelerometer/orientation
  4. device.
  5. <p>
  6.  id=“LR”>
  7.  id=“FB”>
  8.  id=“DIR”>
  9.  type=“text/javascript”>
  10.    if (window.DeviceOrientationEvent) {
  11.       console.log(“DeviceOrientation is supported”);
  12.       window.addEventListener(‘deviceorientation’, function(eventData) {
  13.          // gamme is for left/right inclination
  14.          var LR = eventData.gamma;
  15.          // beta is for front/back inclination
  16.          var FB = eventData.beta;
  17.          // alpha is for orientation
  18.          var DIR = eventData.alpha;
  19.          // display values on screen
  20.          deviceOrientationHandler(LR, FB, DIR);
  21.       }, false);
  22.    } else {
  23.       alert(“Device orientation not supported on your device or browser. Sorry.”);
  24.    }
  26. function deviceOrientationHandler(LR, FB, DIR) {
  27.    document.querySelector(“#LR”).innerHTML = “gamma : “ + Math.round(LR);
  28.    document.querySelector(“#FB”).innerHTML = “beta : “ + Math.round(FB);
  29.    document.querySelector(“#DIR”).innerHTML = “alpha : “ + Math.round(DIR);
  30. }
  32.  …

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 

orientation api example 3

Results on the iPad: the logo rotates when we change the iPad’s orientation. This is a good “visual feedback” for an orientation controlled game…

logo 1logo 2logo 3

This example as a Youtube video: http://www.youtube.com/watch?v=OrNLhOAGSdE

Code from the example:

  1. …
  2. <h2>Device Orientation with HTML5</h2>
  3. You need to be on a mobile device or use a laptop with accelerometer/orientation
  4. device.
  5. <p>
  6.  id=“LR”>
  7.  id=“FB”>
  8.  id=“DIR”>
  9. <img src=“http://www.html5
  10. rocks.com/en/tutorials/device/orientation/html5_logo.png” id=“imgLogo”
  11. class=“logo”>
  12.  type=“text/javascript”>
  13.    if (window.DeviceOrientationEvent) {
  14.       console.log(“DeviceOrientation is supported”);
  15.       window.addEventListener(‘deviceorientation’, function(eventData) {
  16.           var LR = eventData.gamma;
  17.           var FB = eventData.beta;
  18.           var DIR = eventData.alpha;
  19.           deviceOrientationHandler(LR, FB, DIR);
  20.       }, false);
  21.    } else {
  22.       alert(“Not supported on your device or browser. Sorry.”);
  23.    }
  25.    function deviceOrientationHandler(LR, FB, DIR) {
  26.       // USE CSS3 rotations for rotating the HTML5 logo
  27.       //for webkit browser
  28.       document.getElementById(“imgLogo”).style.webkitTransform =
  29.       “rotate(“ + LR + “deg) rotate3d(1,0,0, “ + (FB * –1) + “deg)”;
  31.       //for HTML5 standard-compliance
  32.       document.getElementById(“imgLogo”).style.transform =
  33.       “rotate(“ + LR + “deg) rotate3d(1,0,0, “ + (FB * –1) + “deg)”;
  35.       document.querySelector(“#LR”).innerHTML = “gamma : “ + Math.round(LR);
  36.       document.querySelector(“#FB”).innerHTML = “beta : “ + Math.round(FB);
  37.       document.querySelector(“#DIR”).innerHTML = “alpha : “ + Math.round(DIR);
  38. }
  40.  …

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).

level tool using device orientation

Other interesting uses: mix orientation API and WebSockets

You can imagine the above example that sends the current orientation of the device to a server using WebSockets. The server in turn updates the logo and position on a PC screen. If multiple devices connect, they can chat together and take control of the 3D Logo.

This video shows one of the above examples slightly modified: the JavaScript code running in the Web page on the iPad sends in real time the device orientation using the Web Sockets API to a server that in turns sends the orientation to a client running on a desktop browser. In this way the tablet “controls” the HTML5 logo that is shown on the desktop browser:

Click on the image to see the YouTube video:

orientation API + websockets

Leave a comment