Mobile Web Wearable Web

DeviceOrientation Event Specification: Detecting Device Motion

This tutorial demonstrates how you can detect device motions in Tizen.

Warm-up

Become familiar with the DeviceOrientation Event Specification API basics by learning about:

Task in Mobile Applications

In the Compass task, we will walk through using the magnetic sensor data to orient a compass needle.

Detecting Device Rotation

Learning how to detect device rotation is a basic device motion handling skill:

  1. Display the device rotation details on the screen:
    <h1>Device orientation tutorial</h1>
    <div>
       <p id="alpha"></p>
       <p id="beta"></p>
       <p id="gamma"></p>
    </div>
    
    <script>
       var alphaElem = document.getElementById("alpha");
       var betaElem =document.getElementById("beta");
       var gammaElem = document.getElementById("gamma");
    
  2. To track changes in the device rotation, subscribe to the deviceorientation event:
       window.addEventListener("deviceorientation", function(e) 
       {
          alphaElem.innerHTML ='alpha value ' + Math.round(e.alpha);
          betaElem.innerHTML = 'beta value ' + Math.round(e.beta);
          gammaElem.innerHTML = 'gamma value ' + Math.round(e.gamma);
       }, true);
    </script>
    

Source Code

For the complete source code related to this use case, see the following file:

Detecting Device Acceleration

Learning how to detect device acceleration is a basic device motion handling skill:

  1. Display the device acceleration details on the screen:
    <h1>device orientation tutorial</h1>
    <div>
       <p id="firElem"></p>
       <p id="secElem"></p>
       <p id="thirElem"></p>
    </div>
    
    <script>
       var firElem = document.getElementById("firElem");
       var secElem =document.getElementById("secElem");
       var thirElem = document.getElementById("thirElem");
    
  2. To track changes in the device acceleration, subscribe to the devicemotion event:
       window.addEventListener("devicemotion", function(e) 
       {
          /* Data for acceleration */
          firElem.innerHTML = 'acceleration value<br><br> ' 
             + '[ x value: '+ Math.round(e.acceleration.x) + " ]<br>" 
             + '[ y value: '+ Math.round(e.acceleration.y) + " ]<br>" 
             + '[ z value: '+ Math.round(e.acceleration.z) + ']';
    
          /* Data for acceleration, including gravity */
          secElem.innerHTML = 'accelerationIncludingGravity value<br><br> '
             + '[ x value: ' + Math.round(e.accelerationIncludingGravity.x) + " ]<br>" 
             + '[ y value: ' + Math.round(e.accelerationIncludingGravity.y) + " ]<br>" 
             + '[ z value: ' + Math.round(e.accelerationIncludingGravity.z) + ']';
    
          /* Data for rotation rate */
          thirElem.innerHTML = 'rotationRate value<br><br> '
             + '[ alpha value: ' + Math.round(e.rotationRate.alpha) + " degree ]<br>" 
             + '[ beta value: ' + Math.round(e.rotationRate.beta) + " degree ]<br>"
             + '[ gamma value: ' + Math.round(e.rotationRate.gamma) + ' degree ]';
       }, true);
    </script>
    

Source Code

For the complete source code related to this use case, see the following file:

Go to top