CODEWITHSUNDEEP
javascripthtmlinternet-explorerwindows-phone-8
kevin
kevin

Reputation: 63

Who understands device orientation on Windows Phone?

The w3c standard for the deviceorientation event:

http://w3c.github.io/deviceorientation/spec-source-orientation.html#deviceorientation

The W3C standard describes how the alpha attribute of this event is supposed to change when the device is rotated around its z-axis.

The z-axis points towards you when holding the phone in front of you while you're looking straight at its screen. It is a normal vector of the plane coinciding with the screen.

It seems to me that things work slightly (= annoyingly) different on my windows phone. The alpha attribute changes with rotation around the x-axis as well (in portait mode, that is).

How to repeat:

  1. Hold up the phone in front of you (in portait mode).
  2. Make sure gamma is negative, meaning the phone it slightly tilted backwards.
  3. Now make sure that alpha is approx. zero degrees meaning the phone is centered on its y-axis.
  4. Tilt the phone slightly to the left, make alpha approx 30 degrees, while making sure gamma stays negative.
  5. Now turn the phone slightly towards you making gamma positive

Notice how, the moment gamma becomes positive, the alpha value jumps 180 degrees. This is not described in the W3C standard, or did I miss something?

-

Another strange thing happens when you go to landscape mode. When tilting the phone around its z-axis in landscape mode, not the alpha attribute, but the beta attribute seems to change?! To make the alpha attribute change in landscape mode, you have to turn the phone around it's (original) x-axis, which, for instance, means turning the top of the phone (which is now on the left side, as you are in landscape mode) away from you.

-

I don't have an android or iOS device at my disposal at this time, but at least the emulator in the Chrome desktop browser behaves completely different (and in agreement with the W3C standard, it seems).

-

I put a simple test script here:

http://locaboa.com/wpdotest.html

(open it on your smartphone)

-

Am I doing something wrong / missing something?

Any ideas as how to correct this?

=======================

edit: just tested it on an iPhone, seems to behave the same way as the windows phone...

Upvotes: 1

Views: 383

Answers (1)

kevin
kevin

Reputation: 63

Answer: they've done it again.

Now that most of CSS and JS has been standardized of polyfilled, the big browser and OS vendors have decided to implement different ways of processing and passing device orientation data to web devs. Also, the standard is not airtight.

I found this:

https://github.com/ajfisher/deviceapi-normaliser

Which is a very useful summation of differences between different vendor's applications, but (unfortunately) not a working polyfill. For my project I am slowly filling in blanks, and expect to reach a full polyfill in a couple of months. In the meantime here is a script that turns WP IE coordinates to a working yaw / pitch / roll coordinate set.

// [[ PITCH ]]

    if ( event.gamma < 0 ) {

        normalized.pitch = -90 - event.gamma ;

    } else {

        normalized.pitch = 90 - event.gamma ;

    }

// [[ YAW ]]

    if ( normalized.pitch > 0 && event.alpha > 180 ) {

        normalized.yaw = event.alpha - 180 ;

    } else if ( normalized.pitch > 0 && event.alpha < 180 ) {

        normalized.yaw = event.alpha + 180;

    }

// [[ ROLL ]]

    if ( normalized.pitch > 0 ) {

        var sign = Math.abs( event.beta ) / event.beta;

        normalized.roll = sign * 180 - event.beta ;

    }

Upvotes: 0

Related Questions