Grow your CSS skills. Land your dream job.

[W3Conf] Luz Caballero: “Device (dis)orientation?”

Published by Chris Coyier

Luz Caballero (@gerbille) used to be Dev Relations at Opera and talked about the mathematical world of device orientation on mobile devices.

These are my notes from her presentation at W3Conf in San Francisco as part of this live blog series.

Device orientation. It's not just "portrait" and "landscape." It's made of three things:

  • deviceorientation - What angle is someone holding the device?
  • devicemotion - Is it moving? Is it accelerating?
  • compassneedscallibration - What direction is it facing? (This particular event is triggered when the device needs to be recalibrated)

There are different types of apps that can make use of this information:

Static application = measure things and make a one-off use of that information (like a maps app)
Dynamic application = constant moving of device, using that information constantly to affect app (like a driving game)

Luz showed off a cool demo of a teapot drawn in WebGL and rotated it all around in 3D just by moving her phone around. The connection was made from phone to web through Web Sockets.

Orientation is a bit complex mathemantically (Tait-Bryan angles). There are three axis and then different combinations of them. Alpha, Beta, and Gamma (they have other names too, like "the pitch.").


The math for rotation is crazy stuff.

Watch out for the the alpha/gamma singularity! (I think this is like crossing the streams).

Some of this can be simplified with Remote.js. The code for the teapot demo we saw earlier looks a lot more do-able. When a web socket message is received,

avalue = data.alpha / 180 * Math.PI;
/* etc */

teapot.rotation.set(gvalue, avalue, -bvalue);

As usual, there is some browser inconsistencies. Luz has a test suite for this stuff on GitHub. There is also differences between devices that are "natively" portrait or landscape. Firefox and Opera have different ideas on how you should hold your landscape devices (cords on different sides).

One way to account for these differences is to ask your users to perform a quick test on their current device. Then remember it and use it in the math as needed.

Here is a 3D Compass Engine that handles buffering (for smoother movement).

Support is also spotty for acceleration (Safari), accerationIncludingGravity (Safari, Opera, Firefox), rotationRate (Safari), and interval. You can use if() tests to test for support fairly easily.

Slides

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".