van an nguyen

The Device Motion API

Introduction

This section presents the Device Motion API which is used in a similar manner to the device orientation API discussed earlier.

The deviceMotion API deals with accelerations instead of orientation only.

Use cases proposed by the specification are:

    • Controlling a game: a gaming Web application monitors the device’s orientation and interprets tilting in a certain direction as a means to control an on-screen sprite.
    • Gesture recognition: a Web application monitors the device’s acceleration and applies signal processing in order to recognize certain specific gestures. For example, using a shaking gesture to clear a web form.
    • Mapping: a mapping Web application uses the device’s orientation to correctly align the map with reality.

Basic Usage

  1. function handleMotionEvent(event) {
  3.    var x = event.accelerationIncludingGravity.x;
  4.    var y = event.accelerationIncludingGravity.y;
  5.    var z = event.accelerationIncludingGravity.z;
  7.    // Process …
  8. }
  10. window.addEventListener(“devicemotion”, handleMotionEvent, true);

Basics about acceleration

The deviceMotion API is rather straightforward and is very similar to the orientation API except that it returns more than just the rotationinformation, it also returns acceleration information reflecting the device’s actual movement.

The acceleration is in three parts:

  1. along the X axis
  2. along the Y axis
  3. along the Z axis

Each value is measured in meters per second squared (m/s2) – multiply by 3.281 if you’d prefer an approximation in feet per second per second.

The acceleration is returned by the API as an acceleration event. The two pertinent properties are: accelerationIncludingGravity and acceleration. The latter excludes the effects of gravity.

Why are there two different values? Because some devices have the capability of excluding the effects of gravity, eg if equipped with a gyroscope. Indeed there is acceleration due implicitly to gravity, see also this: Acceleration of Gravity on Earth… 

If the device doesn’t have a gyroscope, the acceleration property will be returned as null. In this case, you have no choice but to use the accelerationIncludingGravity property. Note that all IOS devices, so far, are equipped with a gyroscope.

So, the device motion event is a superset of the device orientation event; it returns rotation as well as acceleration information from the device. 

Example of acceleration values

If a laptop is in its normal position with the screen facing up, the data returned would be (info taken from:http://www.html5rocks.com/en/tutorials/device/orientation):

acceleration values 1

A mobile phone rotated along the x-axis so the screen is perpendicular to its normal position would return:

acceleration values 2

Remember the coordinate system for a mobile phone:

telephone coordinates system

Common steps

The principles arethe same as for the orientation API:

    1. Test if the API is supported by the browser,
    2. Add a listener for ‘devicemotion‘ events,
    3. Get the acceleration values from the DOM event that has been passed to the listener,
    4. Process the data.

Common processing with acceleration values

Test the value of the acceleration.z property: If > 0 then the device is facing up, otherwise it is facing down. This would be useful if you wanted to play heads or tails with your phone 😉

  1. // For example, if acceleration.z is > 0 then the phone is facing up
  2. var facingUp = –1;
  3. if (acceleration.z > 0) {
  4.    facingUp = +1;
  5. }

Compute the angle corresponding to the Left / Right and Front / Back tilts. This example was taken from http://www.html5rocks.com/en/tutorials/device/orientation and uses the accelerationIncludingGravity property of the event.

  1. function deviceMotionHandler(eventData) {
  2.    // Grab the acceleration including gravity from the results
  3.    var acceleration = eventData.accelerationIncludingGravity;
  5.    // Convert the value from acceleration to degrees
  6.    // acceleration.x|y is the acceleration according
  7.    //  to gravity, we’ll assume we’re on  Earth and divide
  8.    // by 9.81 (earth gravity) to get a percentage value, 
  9.    // and then multiply that by 90 to convert to degrees.
  10.    var tiltLR = Math.round(((acceleration.x) / 9.81) * –90);
  11.    var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);
  13.    // … do something
  14. }

Compute the vertical (direction of the sky) – this extract comes from a complete example further down this page…

  1. …
  2. var angle = Math.atan2(accel.y,accel.x);
  4. var canvas = document.getElementById(‘myCanvas’);
  5. var ctx = canvas.getContext(‘2d’);
  7. ctx.moveTo(50,50);
  8. // Draw sky direction in the canvas
  9. ctx.lineTo(50–50*Math.cos(angle),50+50*Math.sin(angle));
  10. ctx.stroke();

Use acceleration values to move a ball on the screen of a tablet when the tablet is tilted front / back or left / right (complete example later on)…

  1. …
  3. ball.x += acceleration.x;
  4. ball.y += acceleration.y;
  6. …

Complete examples

Move the HTML5 logo

Online example at JsBin. 

Devicemotion API example

Code from this example:

  1. <!doctype html>
  2. <html>
  4.    <head></head>
  6.    <body>
  7.       <h2>Device Orientation with HTML5</h2>
  8.       You need to be on a mobile device or use a laptop with accelerometer/orientation
  9.       device.
  10.       <p>
  11.       
     id=“rawAccel”>
  12.       
     id=“tiltFB”>
  13.       
     id=“tiltLR”>
  14.       
     id=“upDown”>
  15.       <img src=“http://www.html5rocks.com/en/tutorials/device/orientation/html5_logo.png&#8221; id=“imgLogo”class=“logo”>
  16.        type=“text/javascript”>
  17.          if (window.DeviceMotionEvent != undefined) {
  18.          console.log(“DeviceMotion is supported”);
  20.          window.addEventListener(‘devicemotion’, function(eventData) {
  21.             // Grab the acceleration including gravity from the results
  22.             var acceleration = eventData.accelerationIncludingGravity;
  23.             // Display the raw acceleration data
  24.             var rawAcceleration = “[“ + Math.round(acceleration.x) + “, “ + Math.round(acceleration.y) 
  25.             + “, “ + Math.round(acceleration.z) + “]”;
  27.             // Z is the acceleration in the Z axis, and if the device
  28.             // is facing up or down
  29.             var facingUp = –1;
  30.             if (acceleration.z > 0) {
  31.                facingUp = +1;
  32.             }
  34.             // Convert the value from acceleration to degrees
  35.             // acceleration.x|y is the acceleration according to gravity,
  36.             //  we’ll assume we’re on Earth and divide
  37.             // by 9.81 (earth gravity) to get a percentage value,  
  38.             // and then multiply that by 90 to convert to degrees.
  39.             var tiltLR = Math.round(((acceleration.x) / 9.81) * –90);
  40.             var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);
  42.             document.querySelector(“#rawAccel”).innerHTML =
  43.                                “Raw acceleration” + rawAcceleration;
  44.             document.querySelector(“#tiltFB”).innerHTML =
  45.                                “Tilt front/back : “ + tiltFB;
  46.             document.querySelector(“#tiltLR”).innerHTML =
  47.                                “Tilt left/right : “ + tiltLR;
  48.             document.querySelector(“#upDown”).innerHTML =
  49.                                “Face Up:Down : “ + facingUp;
  52.             updateLogoOrientation(tiltLR, tiltFB);
  53.          }, false);
  54.       } else {
  55.         alert(“Not supported on your device or browser. Sorry.”);
  56.       }
  58.       function updateLogoOrientation(tiltLR, tiltFB) {
  59.          // USE CSS3 rotations for rotating the HTML5 logo
  60.          //for webkit browser
  61.          document.getElementById(“imgLogo”).style.webkitTransform =
  62.          “rotate(“ + tiltLR + “deg) rotate3d(1,0,0, “ + (tiltFB * –1) + “deg)”;
  64.          //for HTML5 standard-compliance
  65.          document.getElementById(“imgLogo”).style.transform =
  66.          “rotate(“ + tiltLR + “deg) rotate3d(1,0,0, “ + (tiltFB * –1) + “deg)”;
  67.       }
  68.    
  69.   </body>
  71. </html>

Interesting example that uses jQuery mobile

This example comes from: http://www.emanueleferonato.com/2011/09/05/playing-with-javascript-iphone-and-devicemotion-event-listener/

It shows how the X and Y acceleration values can be used for indicating the sky’s direction (vertical), and how the Z acceleration is, in fact, an indicator for the face up / face down orientation of the device.

This example has been adapted and put on jsbin.com so that you can tweak it: https://jsbin.com/uyuqek/4/edit

devicemotion API

Code from the example:

  1. <html>
  2.    <head>
  4.      <meta http-equiv=“content-type” content=“text/html; charset=utf-8”>
  5.      <meta name=“viewport” content=“user-scalable=no, width=device-width” />
  7.      <link rel=“stylesheet”
  8.            href=“http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css&#8221; />
  10.       type=“text/javascript”
  11.              src = “http://code.jquery.com/jquery-1.6.2.min.js&#8221;>
  12.      
  13.       type=“text/javascript”
  14.              src = “http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js&#8221;>
  15.      
  17.       type=“text/javascript”>
  18.         $(document).ready(function(){
  19.             window.addEventListener(“devicemotion”,onDeviceMotion,false);
  20.         });
  22.         function onDeviceMotion(event){
  23.             var ctx = document.getElementById(“c”).getContext(“2d”);
  24.             var accel = event.accelerationIncludingGravity;
  25.             $(“#sliderX”).val(Math.round(accel.x)).slider(“refresh”);
  26.             $(“#sliderY”).val(Math.round(accel.y)).slider(“refresh”);
  27.             $(“#sliderZ”).val(Math.round(accel.z)).slider(“refresh”);
  28.             // sky direction
  29.             var angle = Math.atan2(accel.y,accel.x)
  30.             ctx.clearRect(0,0,100,100);
  31.             ctx.beginPath();
  32.             ctx.arc(50,50,5,0,2*Math.PI,false);
  33.             ctx.moveTo(50,50);
  34.             // Draw sky direction
  35.             ctx.lineTo(50–50*Math.cos(angle),50+50*Math.sin(angle));
  36.             ctx.stroke();
  37.         }
  38.      
  40.    </head>
  41.    <body>
  43.      
     data-role=“page” id = “intropage”>
  45.         
     data-role=“header”>
  46.            

    Accelerometer

  47.         
  •         
     data-role=“content”>
  •             for=“sliderX”>X Acceleration (Roll)
  •             type=“range” name=“sliderX” id=“sliderX”
  •                   value=“0” min=“-10” max=“10” data-theme=“a” />
  •             for=“sliderY”>Y Acceleration (Pitch)
  •             type=“range” name=“sliderY” id=“sliderY”
  •                   value=“0” min=“-10” max=“10” data-theme=“b” />
  •             for=“sliderZ”>Z Acceleration (Yaw
  •               Face up/down)
  •            
  •             type=“range” name=“sliderZ” id=“sliderZ”
  •                   value=“0” min=“-10” max=“10” data-theme=“c” />
  •         
  •         <p style = “text–align:center“>SKY direction:
  •                                       follow this line:</p>
  •         
     style = “text–align:center;margin–top:10px;“>
  •             id=“c” width=“100” height=“100”>
  •