title: html5 - Get device orientation rotation in relative coordinate
body: <p>I'm trying to get the change in orientation between two <code>deviceorientation</code> events along the left-right axis, and top-bottom axis, those axis being usually defined as the phone <code>x</code> and <code>y</code> axis (<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained</a>)</p>
  
  <p>ie between instants <code>t1</code> and <code>t2</code> where those phone axis move from <code>(x1, y1)</code> to <code>(x2, y2)</code>, It'd like to get <code>(angle(x2-x1), angle(y1-y2))</code>.</p>
  
  <p>When the device is in portrait mode (in opposition to landscape mode), those axis seems to correspond to the <code>beta</code> and <code>gamma</code>. However when the phone is vertical (bottom facing the ground), the <code>gamma</code> value becomes extremely instable, and jumps from 90 to -90 degrees (at the same occasion, the alpha jumps by 180 degrees) You can easily see that <a href="http://mekya.com/labs/device_orientation.html" rel="nofollow">here on your phone</a></p>
  
  <p>I'd like to avoid that, and also get values in the 360 range. Here is what I have so far:</p>
  
  <pre><code>// assuming portrait mode
  var beta0, gamma0;
  window.addEventListener('deviceorientation', function(orientation) {
    if (typeof beta0 === 'undefined') {
      beta0 = beta;
      gamma0 = gamma;
    } 
  
    console.log('user has moved to the left by', gamma - gamma0, ' and to the top by', beta - beta0);
  });
  </code></pre>
  
  <p>That works ok when the device is mostly horizontal, and not at all when it is vertical</p>