Search code examples
htmlmobileaccelerometerdevice-orientationmagnetometer

HTML 5 Mobile Device Orientation API: Alpha (compass) value does not indicate north


The alpha value in the following snippet of code should variate between 0 and 360 according to the device's rotation:

window.addEventListener('deviceorientation', function(eventData) {
    var LR = eventData.gamma;
    var FB = eventData.beta;
    var DIR = eventData.alpha;

    deviceOrientationHandler(LR, FB, DIR);
});

This variation should depend on the wind direction it's facing. To accomplish this the device utilises a magnetometer / compass.

When i tested this on an ipad 3 i encountered the following problem:

It varies from 0 to 360, but in a relative way. The page shows 0 when loaded and then varies between 0 and 360. But when the device is rotated and the page is refreshed it again starts by showing 0 and then varying between those values.

As it should follow wind directions and i am trying to find out where the North is i need it to do this in an absolute way instead of a relative way. AKA: always display the same value when facing somewhere regardless of when and in what direction the device is facing when the page is loaded.

These scources indicate the API should be capable of this:

html5rocks

And this one:

W3C

And here's an example where "direction" should be 0 when facing north (or at least return a consistent value):

the html5rocks page contains an example (ctrl + f and "try it out"). Can't post more then 2 URLS

Is this the correct way of indicating the wind direction the device is facing? I need to use this in combination with the Google Maps Api.

And lastly i know there are compass apps for the Ipad 3 so the device should be capable of doing this.

I am confused :)


Solution

  • According to W3C:

    Implementations that are unable to provide absolute values for the three angles may instead provide values relative to some arbitrary orientation, as this may still be of utility. In this case, the absolute property must be set to false. Otherwise, the absolute property must be set to true.