Question

I have previously created a labyrinth game which works with Firefox’s MozOrientation. I am now looking into getting it working with WebKit also…

But Webkit uses the w3c’s DeviceOrientation. The values appear to be totally different, but someone must have some algorithm to get it from one to the other? Or am I missing something simple?

The labyrinth game with github link
http://playground.marmaladeontoast.co.uk/labyrinth/

MozOrientation
https://developer.mozilla.org/en/Detecting_device_orientation

DeviceOrientation
http://dev.w3.org/geo/api/spec-source-orientation.html

Some sample values I have obtained:

Chrome

alpha = null                                    
beta = -178 
gamma = 4.57    

Firefox

x = 0.035999998450279236
y = -0.02800000086426735
z = 1

Any help would be greatly appreciated 🙂

Answer 1

I’ve been playing around with this a bit. The source below ‘maps’ both alternatives to an understandable degrees range for x/gamma and y/beta.

The MozOrientation.z value is completely different from the deviceorientation.alpha value. The first returns the vertical orientation, the latter returns a sort of compass value. These values are therefor not interchangable / convertible.

function displayOrientation(orientData){

    var x = Math.round(orientData.x);
    var y = Math.round(orientData.y);
    var z = orientData.z;

    document.getElementById('x').value = x;
    document.getElementById('y').value = y;
    document.getElementById('z').value = z;
}

window.addEventListener("MozOrientation", function(orientData){

    var obj = {};
    obj.x = orientData.x * 90;
    obj.y = orientData.y * 90;
    obj.z = orientData.z;

    displayOrientation(obj);

}, true);

window.addEventListener("deviceorientation", function(orientData) {

    var obj = {};
    obj.x = orientData.gamma;
    obj.y = orientData.beta;
    obj.z = orientData.alpha;

    displayOrientation(obj);

}, true);

It seems the current desktop Safari (5.0.3) doesn’t support this event at all. The beta value in desktop Chrome 9 is exactly 180 less than it is in mobile Safari.
The x & y values in Firefox and mobile Safari should be approximately the same.