Normalize deviceorientation data

StackOverflow https://stackoverflow.com/questions/17430801

Question

I'm playing with deviceorientation in JavaScript and I noticed some differences between my Ipad (iOS 6.1) and my Nexus7 (Android 4.2.2).

This code does not print the same data with the Ipad and the Nexus7.

<html>
  <head/>
  <body>
    <button id="calibrate">Calibrate</button>
    <button id="stop">Stop</button>
    <button id="play">Play</button>
    <div id="log"><p></p></div>
    <script>
      var log = document.getElementById('log');
      var calibrate = false;
      var calibrateG = 0, calibrateB = 0, calibrateA = 0;

      var deviceorientation = function(e) {
        if (calibrate) {
          calibrateG = e.gamma;
          calibrateB = e.beta;
          calibrateA = e.alpha;
          calibrate = false;
        }

        var gamma = parseInt(e.gamma - calibrateG);
        var beta = parseInt(e.beta - calibrateB);
        var alpha = parseInt(e.alpha - calibrateA);

        var p = document.createElement('p');
        p.innerHTML = gamma + ' ' + beta + ' ' + alpha;
        log.insertBefore(p, log.firstChild);
      }

      document.getElementById('stop').onclick = function() {
        window.removeEventListener('deviceorientation', deviceorientation);
      };
      document.getElementById('play').onclick = function() {
        window.addEventListener('deviceorientation', deviceorientation);
      };
      document.getElementById('calibrate').onclick = function() {
        calibrate = true;
      };

      window.addEventListener('deviceorientation', deviceorientation);

    </script>
  </body>
</html>

At start Android print 0 0 270 and iOS 0 0 0.

Then when I move both in the same way, they don't print the same values.

Can someone explain why, and if there are a way to normalize the data.

UPDATE #1

I already try some calibrations and I care about landscape/portrait. To reproduce, you can take the code above, put ipad and nexus7 in portrait in front of you. Calibrate the value of both (first button). Then take the right corner of the tablet and rotate it until the tablet reaches 90 degrees. The tablet should be on the left side.

On Android the gamma goes from 0 to -80 and then jump to 270. On IOS the gamma goes from 0 to -180 without any jump.

Was it helpful?

Solution 2

If you need all three for an application or game you could prompt the user to ~"hold there device up straight" and record the initial values, then get offsets (deltas) of those values. You could even save that initial calibration to localStorage so it doesn't need to be repeated.

If all you need is landscape or portrait just compare window.innerWidth with window.innerHeight or something equally as trivial.

OTHER TIPS

Full Tilt JS normalizes the data values between Android and iOS deviceorientation implementations. It also ensures deviceorientation data remains consistent whenever the user rotates their screen.

This article provides a summary of some of the techniques used in the Full Tilt JS library.

Disclaimer: I am the author of both the article and library above. Please give it a try and report any issues directly on the Github project.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top