Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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)?

7,647 views

Published on

Talk a

Published in: Technology

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

×