DeviceOrientation Event Specification

You can detect device motion and provide interaction between the user and device based on the motion.

This feature is supported in mobile and wearable applications only.

The main orientation event features include:

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 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 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: