Add mobile device motion/orientation support

Question

Add mobile device motion/orientation support

Closed this issue 6 years ago · 9 comments

Please include support to mobile device events devicemotion and deviceorientation as well as current mouse events.

Please note, however, that some low-end mobile devices have an accelerometer but does not have a gyroscope, so that just checking for window.DeviceOrientationEvent availability is not enough --- you must also test deviceorientation event properties alpha, beta, and gamma, falling back to devicemotion event if they are null.

Note, however, that even devicemotion event's rotationRate.alpha, rotationRate.beta, and rotationRate.gamma may also be null, so that, in the last case, one should fall back to x/y/z acceleration data.

There's a simple HTML test page which can be used to test a mobile device's motion/orientation capabilities, whose code is published at mobiForge. The HTML code is transcribed below:

<DOCTYPE html>
<html>
  <head>
    <script>
    function init() {
      //Find our div containers in the DOM
      var dataContainerOrientation = document.getElementById('dataContainerOrientation');
      var dataContainerMotion = document.getElementById('dataContainerMotion');
 
      //Check for support for DeviceOrientation event
      if(window.DeviceOrientationEvent) {
        window.addEventListener('deviceorientation', function(event) {
                var alpha = event.alpha;
                var beta = event.beta;
                var gamma = event.gamma;
               
                if(alpha!=null || beta!=null || gamma!=null) 
                  dataContainerOrientation.innerHTML = 'alpha: ' + alpha + '<br/>beta: ' + beta + '<br />gamma: ' + gamma;
              }, false);
      }
 
      // Check for support for DeviceMotion events
      if(window.DeviceMotionEvent) {
      window.addEventListener('devicemotion', function(event) {
                var x = event.accelerationIncludingGravity.x;
                var y = event.accelerationIncludingGravity.y;
                var z = event.accelerationIncludingGravity.z;
                var r = event.rotationRate;
                var html = 'Acceleration:<br />';
                html += 'x: ' + x +'<br />y: ' + y + '<br/>z: ' + z+ '<br />';
                html += 'Rotation rate:<br />';
                if(r!=null) html += 'alpha: ' + r.alpha +'<br />beta: ' + r.beta + '<br/>gamma: ' + r.gamma + '<br />';
                dataContainerMotion.innerHTML = html;                  
              });
      }
    }   
    </script>
  </head>
  <body onload="init()">
    <div id="dataContainerOrientation">
      No device orientation data
    </div>
    <div id="dataContainerMotion">
      No device motion data
    </div>
  </body>
</html>