Device (dis)Orientation?

Luz Caballero @gerbille

•What is it?

•Some math you need to know

•Code

•Support and implementations

•Tips and tricks

•deviceorientation

•devicemotion

•compassneedscalibration

* image sources: http://mygadgetnews.com/tech/apple-looking-to-radically-improve-maps-and-location-services-in-ios-5

http://www.sub5zero.com/top-10-racing-games-iphone/

static / one off dynamic / interactive

deviceorientation

Code at: https://github.com/luzc/wiimote

QuickTime™ and a decompressor

are needed to see this picture.

(back up plan!)

The math

Tait-Bryan angles

QuickTime™ and aGIF decompressor

are needed to see this picture.

V = R(gamma, y’’).R(beta, x’).R(alpha, z).Vo

If you want to apply a rotation:

.VoV =

1st2nd3rd

alpha/gamma singularity

Disoriented much?

The code

remote.js model.js

server.jsα, β, ɣ α, β, ɣ

var ws = new WebSocket('ws://10.112.0.139:8080/');//listen to device orientationwindow.addEventListener('deviceorientation', function(e) {  if (ws.opened) {    ws.send(JSON.stringify({      alpha: e.alpha,      beta: e.beta,      gamma: e.gamma    }));  }});

remote.js:

model.js:

window.addEventListener('DOMContentLoaded', function init() {  //connect to server using websockets  var ws = new WebSocket('ws://10.112.0.139:8080/');  ws.onopen = function() {    ws.onmessage = function(e) {      var data = JSON.parse(e.data),        avalue = data.alpha / 180 * Math.PI,        bvalue = data.beta / 180 * Math.PI,        gvalue = data.gamma / 180 * Math.PI;                teapot.rotation.set(gvalue, avalue, -bvalue);     };   };});

Support

luzc.github.com/webtests/• orientation• compass• motion

Tested running luzc.github.com/webtests/orientation in a Samsung Galaxy 2 and an iPhone (iOS6), on February 18, 2013

α β ɣ

Chrome for Android

Firefox for Android

Opera Mobile for Android

Safari for iOS6

Specification

↑N ↑up ↑up

270360/0___|___180

| 90

360/0270___|___90

| 180

0/360 90___|___270

|180

0-90___|___90

| 0

0-90/270___|___90

| 180

0-90___|___90

|-180/180

0-90___|___90

| 0

0-90___|___90

| 0

0-90___|___90

|-180/180

0-90___|___90

| 0

0-90___|___90

| -180/180

0/360 90___|___270

|180

0-90___|___90

|-180/180

0-90___|___90

| 0

0/360 90___|___270

|180

Portrait vs. landscape matters!

Holding your device THE RIGTH WAY™

How FF thinks you should hold your landscape device

How Opera (and Chrome) think you should hold your

landscape device

BYO Calibration!!

You may want some buffering

https://github.com/richtr/Marine-Compass

devicemotion

•rotationRate

•acceleration

•accelerationIncludingGravity

•interval

•acceleration (Safari)

•accelerationIncludingGravity (Safari, Opera, FF)

•rotationRate (Safari)

•interval (Opera, Safari, FF)

run luzc.github.com/webtests/motion in a Samsung Galaxy Tab 2 and iOS6

window.addEventListener('devicemotion', function(e){ if(e.acceleration){ //e.acceleration.x

//e.acceleration.y//e.acceleration.z } if(e.accelerationIncludingGravity){//e.accelerationIncludingGravity.x

//e.accelerationIncludingGravity.y //e.accelerationIncludingGravity.z } if(e.rotationRate){ //e.rotationRate.alpha//e.rotationRate.beta//e.rotationRate.gamma } if(e.interval){ //e.interval } });

Things to remember:

• Angular position, angular speed and acceleration

• Intrinsic axes of rotation

• Rotations have to be applied *in order*

• Singularity in alpha/gamma

• 3D libraries / languages can make your life easier

• Browser support but different implementations

• BYO calibration

• Portrait/landscape matters

• You may want some buffering

• Device motion has only partial support

That’s all :)

Luz Caballero @gerbillegithub.com/luzc

Thanks!!