Talk a

1. Device (dis)Orientation?
Luz Caballero
@gerbille

2. • What is it?
• Some math you need to know
• Code
• Support and implementations
• Tips and tricks

3. • deviceorientation
• devicemotion
• compassneedscalibration

4. static / one off dynamic / interactive
* 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/

5. deviceorientation

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

7. QuickTime™ and a
decompressor
are needed to see this picture.
(back up plan!)

8. The math

10. Tait-Bryan angles

12. QuickTime™ and a
GIF decompressor
are needed to see this picture.

13. If you want to apply a rotation:
V = R(gamma, y’’).R(beta, x’).R(alpha, z).Vo
V= .Vo
3rd 2nd 1st

14. alpha/gamma singularity

15. Disoriented much?

16. The code

17. server.js
α, β, ɣ α, β, ɣ
remote.js model.js

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

19. 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);
};
};
});

20. Support

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

23. Tested running
↑N ↑up ↑up
luzc.github.com/webtests/orientation in a
Samsung Galaxy 2 and an iPhone (iOS6), on α β ɣ
February 18, 2013
270 0 0
360/0___|___180 -90___|___90 -90/270___|___90
Chrome for Android
| | |
90 0 180
360/0 0 0
270___|___90 -90___|___90 -90___|___90
Firefox for Android
| | |
180 -180/180 0
0/360 0 0
Opera Mobile for 90___|___270 -90___|___90 -90___|___90
Android | | |
180 -180/180 0
0/360 0 0
90___|___270 -90___|___90 -90___|___90
Safari for iOS6
| | |
180 0 -180/180
0/360 0 0
Specification 90___|___270 -90___|___90 -90___|___90
| | |
180 -180/180 0

24. Portrait vs. landscape
matters!

25. Holding your device THE RIGTH WAY™
How FF thinks you should hold How Opera (and Chrome) think
your landscape device you should hold your landscape
device

27. BYO Calibration!!

28. You may want some buffering
https://github.com/richtr/Marine-Compass

29. devicemotion

30. • rotationRate
• acceleration
• accelerationIncludingGravity
• interval

31. run luzc.github.com/webtests/motion
in a Samsung Galaxy Tab 2 and iOS6
• acceleration (Safari)
• accelerationIncludingGravity (Safari, Opera, FF)
• rotationRate (Safari)
• interval (Opera, Safari, FF)

32. 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 } });
} });
} });
} });
} });

33. 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

34. That’s all :)
Thanks!!
Luz Caballero
@gerbille
github.com/luzc