More Related Content Similar to Device dis(orientation)? Similar to Device dis(orientation)? (20) Device dis(orientation)?2. • What is it?
• Some math you need to know
• Code
• Support and implementations
• Tips and tricks
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/
7. QuickTime™ and a
decompressor
are needed to see this picture.
(back up plan!)
13. If you want to apply a rotation:
V = R(gamma, y’’).R(beta, x’).R(alpha, z).Vo
V= .Vo
3rd 2nd 1st
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);
};
};
});
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
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
28. You may want some buffering
https://github.com/richtr/Marine-Compass
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