What is this site?

HTML5Labs is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps us have informed discussions with developer communities, and enables us to provide better feedback on draft specifications based on this implementation experience. To find out more about HTML5Labs, read the blog by Dean Hachamovitch, Corporate Vice President for Internet Explorer, and the blog by Jean Paoli, President, Microsoft Open Technologies, Inc.

Device Orientation Events

This prototype is an implementation of the W3C DeviceOrientation Event Specification draft on HTML5Labs.com. This specification defines new DOM events that provide information about the physical orientation and motion of a device. Such APIs will let web developers easily deliver advanced web user experiences leveraging modern devices' sensors.

How is this helping developers?

With the Device Orientation API, developers can explore new input mechanisms for games, new gestures for apps (such as "shake to clear the screen" or "tilt to zoom")or even augmented reality experiences. The prototype's installation includes a sample game to get you started in understanding the API.

How does this work?

The Device Orientation API exposes two different types of sensor data: orientation and motion.

When the physical orientation of the device is changed (e.g. the user tilts or rotates it), the deviceorientation event is fired at the window and supplies the alpha, beta, and gamma angles of rotation (expressed in deg/s):

OrientationGraph

<div id="directions"></div>
<script>
   window.addEventListener("deviceorientation", findNorth);
   function findNorth(evt) {
      var directions = document.getElementById("directions");
      if (evt.alpha < 5 || evt.alpha >355) {
         directions.innerHTML = "North!";
      } else if (evt.alpha < 180) {
         directions.innerHTML = "Turn Left";
      } else {
         directions.innerHTML = "Turn Right";
      }
   }
</script>

When a device is being moved or rotated (more accurately, accelerated), the devicemotion event is fired at the window and provides acceleration (both with and without the effects of gravitational acceleration on the device, expressed in m/s2) in the x, y, and z axis as well as the rate of change in the alpha, beta, and gamma rotation angles (expressed in deg/s2):

AccelerationGraph

<div id="status"></div>
<script>
   window.addEventListener("devicemotion", detectShake);
   function detectShake(evt) {
      var status = document.getElementById("status");
      var accl = evt.acceleration;
      if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {
         status.innerHTML = "EARTHQUAKE!!!";
      } else {
         status.innerHTML = "All systems go!";
      }
   }
</script>

Trying out the prototype

The prototype can be found on the download tab. This prototype requires Internet Explorer 10 running on devices with accelerometer sensors supported by Windows 8. The prototype works as an extension to Internet Explorer on the desktop, where developers can get a first-hand look at the APIs. To get started building your own pages with the prototype, all you need to do is install the prototype and then include a reference to the DeviceOrientation.js script file included with the demo game:

<script type="text/javascript" src="DeviceOrientation.js"></script>

We want your feedback

We want to hear from developers on this prototype implementation of the W3C Device Orientation Event Specification, so please let us know what you think by sending us a message.