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
static / one off                                     dynamic / interactive  * image sources: http://mygadgetnews.com/tech/...
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 a        GIF decompressorare needed to see this picture.
If you want to apply a rotation: V = R(gamma, y’’).R(beta, x’).R(alpha, z).Vo V=                                          ...
alpha/gamma singularity
Disoriented much?
The code
server.js       α, β, ɣ               α, β, ɣremote.js                         model.js
remote.js:    var ws = new WebSocket(ws://10.112.0.139:8080/);    //listen to device orientation    window.addEventListene...
model.js: window.addEventListener(DOMContentLoaded, function init() {   //connect to server using websockets   var ws = ne...
Support
luzc.github.com/webtests/   • orientation                            • compass                            • motion
Tested running                                                  ↑N                  ↑up                ↑upluzc.github.com/...
Portrait vs. landscape       matters!
Holding your device THE RIGTH WAY™How FF thinks you should hold   How Opera (and Chrome) think   your landscape device    ...
BYO Calibration!!
You may want some bufferinghttps://github.com/richtr/Marine-Compass
devicemotion
• rotationRate• acceleration• accelerationIncludingGravity• interval
run luzc.github.com/webtests/motionin a Samsung Galaxy Tab 2 and iOS6• acceleration (Safari)• accelerationIncludingGravity...
window.addEventListener(devicemotion, function(e){      if(e.acceleration){         //e.acceleration.x       //e.accelerat...
Things to remember:   •   Angular position, angular speed and acceleration   •   Intrinsic axes of rotation   •   Rotation...
That’s all :) Thanks!!                Luz Caballero                @gerbille                github.com/luzc
Device dis(orientation)?
Device dis(orientation)?
Device dis(orientation)?
Device dis(orientation)?
Upcoming SlideShare
Loading in …5
×

Device dis(orientation)?

6,086
-1

Published on

Talk a

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,086
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
23
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Device dis(orientation)?

  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
  9. Tait-Bryan angles
  10. QuickTime™ and a GIF decompressorare needed to see this picture.
  11. If you want to apply a rotation: V = R(gamma, y’’).R(beta, x’).R(alpha, z).Vo V= .Vo 3rd 2nd 1st
  12. alpha/gamma singularity
  13. Disoriented much?
  14. The code
  15. server.js α, β, ɣ α, β, ɣremote.js model.js
  16. 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 })); } });
  17. 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); }; }; });
  18. Support
  19. luzc.github.com/webtests/ • orientation • compass • motion
  20. Tested running ↑N ↑up ↑upluzc.github.com/webtests/orientation in aSamsung 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
  21. Portrait vs. landscape matters!
  22. 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
  23. BYO Calibration!!
  24. You may want some bufferinghttps://github.com/richtr/Marine-Compass
  25. devicemotion
  26. • rotationRate• acceleration• accelerationIncludingGravity• interval
  27. run luzc.github.com/webtests/motionin a Samsung Galaxy Tab 2 and iOS6• acceleration (Safari)• accelerationIncludingGravity (Safari, Opera, FF)• rotationRate (Safari)• interval (Opera, Safari, FF)
  28. 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 } });} }); } }); } });} });
  29. 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
  30. That’s all :) Thanks!! Luz Caballero @gerbille github.com/luzc

×