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.
Mobile Device API - Now with added fun <ul><li>@ajfisher slideshare.net/andrewjfisher </li></ul>#wdyk Melbourne 31 August,...
Two new events <ul><li>DEVICEMOTION </li></ul><ul><li>Measures acceleration of the device  </li></ul><ul><li>DEVICEORIENTA...
Currently supported on: <ul><li>Mobile Safari  </li></ul><ul><ul><li>(iPhone 3Gs+ for motion, iPhone 4+ for orientation) <...
Gotchas <ul><li>Current spec still draft (latest July 12, 2011) </li></ul><ul><ul><li>http://bit.ly/devicespec </li></ul><...
Let's see some data
Usage - deviceorientation <ul><li>window.addEventListener(&quot;deviceorientation&quot;, update_gyro, false); </li></ul><u...
Usage - devicemotion <ul><li>window.addEventListener(&quot;devicemotion&quot;, update_accel, false); </li></ul><ul><li>fun...
Applications
Seismograph <ul><li>http://isthisanearthquake.com  </li></ul>
Tank Tag
Mobile Device API - Now with added fun <ul><li>#wdyk Melbourne 31 August, 2011  </li></ul>@ajfisher slideshare.net/andrewj...
Upcoming SlideShare
Loading in …5
×

Device API - now with added fun

3,447 views

Published on

Device Motion and Device Orientation are two new events we can play with inside mobile browsers. This quick 5 min presentation shows how to use them and some application demos.

Originally presented as part of Web Directions - What Do you Know night in Melbourne, 31 August, 2011.

Live demos have been screengrabbed but code is available at github.com/ajfisher

Published in: Technology
  • Sex in your area is here: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❶❶❶ http://bit.ly/39sFWPG ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Device API - now with added fun

  1. 1. Mobile Device API - Now with added fun <ul><li>@ajfisher slideshare.net/andrewjfisher </li></ul>#wdyk Melbourne 31 August, 2011
  2. 2. Two new events <ul><li>DEVICEMOTION </li></ul><ul><li>Measures acceleration of the device </li></ul><ul><li>DEVICEORIENTATION </li></ul><ul><li>Shows the orientation of a device </li></ul>
  3. 3. Currently supported on: <ul><li>Mobile Safari </li></ul><ul><ul><li>(iPhone 3Gs+ for motion, iPhone 4+ for orientation) </li></ul></ul><ul><li>Mobile Firefox </li></ul><ul><ul><li>(Android 2.3+ only) </li></ul></ul><ul><li>Chrome & Safari </li></ul><ul><ul><li>(Dev) on desktops that have the right hardware </li></ul></ul><ul><li>Opera 11 Mobile </li></ul><ul><ul><li>(must enable it manually). </li></ul></ul>
  4. 4. Gotchas <ul><li>Current spec still draft (latest July 12, 2011) </li></ul><ul><ul><li>http://bit.ly/devicespec </li></ul></ul><ul><li>Data inconsistent between browsers </li></ul><ul><ul><li>Coming library to resolve these (github.com/ajfisher) </li></ul></ul>
  5. 5. Let's see some data
  6. 6. Usage - deviceorientation <ul><li>window.addEventListener(&quot;deviceorientation&quot;, update_gyro, false); </li></ul><ul><li>function update_gyro(e) { </li></ul><ul><li>// gets the gyro position </li></ul><ul><li>var tilt = deviceOrientation(e); </li></ul><ul><li>$(&quot;#xval&quot;).html(tilt.gamma); </li></ul><ul><li>$(&quot;#yval&quot;).html(tilt.beta); </li></ul><ul><li>$(&quot;#zval&quot;).html(tilt.alpha); </li></ul><ul><li>} </li></ul>
  7. 7. Usage - devicemotion <ul><li>window.addEventListener(&quot;devicemotion&quot;, update_accel, false); </li></ul><ul><li>function update_accel(e) { </li></ul><ul><li>// gets the accelerometer values </li></ul><ul><li>var a = deviceMotion(e); </li></ul><ul><li>$(&quot;#xaccel&quot;).html(a.accelerationIncludingGravity.x); </li></ul><ul><li>$(&quot;#yaccel&quot;).html(a.accelerationIncludingGravity.y); </li></ul><ul><li>$(&quot;#zaccel&quot;).html(a.accelerationIncludingGravity.z); </li></ul><ul><li>} </li></ul>
  8. 8. Applications
  9. 9. Seismograph <ul><li>http://isthisanearthquake.com </li></ul>
  10. 10. Tank Tag
  11. 11. Mobile Device API - Now with added fun <ul><li>#wdyk Melbourne 31 August, 2011 </li></ul>@ajfisher slideshare.net/andrewjfisher

×