Accessing device orientation in HTML5

An extremely good resource for being able to interface with device hardware. So many applications for this.

Using a device orientation can help in developing games or utilities. Applications that access hardware can add functionality to applications. In the near future, applications will be expected to control hardware like cameras, accelerometers, keyboards, etc.

Check for device support

if (window.DeviceOrientationEvent) {
 console.log("DeviceOrientation is supported");
} else if (window.OrientationEvent) {
 console.log("MozOrientation is supported");
}

Display the orientation data and then apply that information as a CSS3 transform to an image.

  
Device Orientation
  

    

      
Event Supported
      

    
    

      
Tilt Left/Right [tiltLR]
      

    
    

      
Tilt Front/Back [tiltFB]
      

    
    

      
Direction [direction]
      

    
    

      
Motion Up/Down
      

    
   



  

Add the event listeners

if (window.DeviceOrientationEvent) {
  // Listen for the deviceorientation event and handle DeviceOrientationEvent object
  window.addEventListener('deviceorientation', devOrientHandler, false);
} else if (window.OrientationEvent) {
  // Listen for the MozOrientation event and handle OrientationData object
  window.addEventListener('MozOrientation', mozDevOrientHandler, false);
}

Confirm the data structure (normalization)
The HTML5 DeviceOrientation event returns three pieces of data:

alpha : the direction the device is facing according to the compass
beta : the angle in degrees the device is tilted front-to-back
gamma : the angle in degrees the device is tilted left-to-right.

The angle values increase as you tilt the device to the right or towards you.

if (window.DeviceOrientationEvent) {
  document.getElementById("doEvent").innerHTML = "DeviceOrientation";
  // Listen for the deviceorientation event and handle the raw data
  window.addEventListener('deviceorientation', function(eventData) {
    // gamma is the left-to-right tilt in degrees, where right is positive
    var tiltLR = eventData.gamma;

    // beta is the front-to-back tilt in degrees, where front is positive
    var tiltFB = eventData.beta;

    // alpha is the compass direction the device is facing in degrees
    var dir = eventData.alpha

    // deviceorientation does not provide this data
    var motUD = null;

    // call our orientation event handler
    deviceOrientationHandler(tiltLR, tiltFB, dir, motUD);
  }, false);
} else if (window.OrientationEvent) {
  document.getElementById("doEvent").innerHTML = "MozOrientation";
  window.addEventListener('MozOrientation', function(eventData) {
    // x is the left-to-right tilt from -1 to +1, so we need to convert to degrees
    var tiltLR = eventData.x * 90;

    // y is the front-to-back tilt from -1 to +1, so we need to convert to degrees
    // We also need to invert the value so tilting the device towards us (forward) 
    // results in a positive value. 
    var tiltFB = eventData.y * -90;

    // MozOrientation does not provide this data
    var dir = null;

    // z is the vertical acceleration of the device
    var motUD = eventData.z;
    
    // call our orientation event handler
    deviceOrientationHandler(tiltLR, tiltFB, dir, motUD);
  }, false);
} else {
  document.getElementById("doEvent").innerHTML = "Not supported on your device or browser."
}

Create event handler and display it in the table from above.

document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);
document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);
document.getElementById("doDirection").innerHTML = Math.round(dir);
document.getElementById("doMotionUD").innerHTML = motionUD;

// Apply the transform to the image
document.getElementById("imgLogo").style.webkitTransform = "rotate(" + 
  tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB * -1) + "deg)";
document.getElementById("imgLogo").style.MozTransform = "rotate(" + tiltLR + "deg)";
document.getElementById("imgLogo").style.transform = "rotate(" + tiltLR + 
  "deg) rotate3d(1,0,0, " + (tiltFB * -1) + "deg)";