Device API - now with added fun
•Download as PPT, PDF•
0 likes•1,183 views
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
![Mobile Device API - Now with added fun ,[object Object],#wdyk Melbourne 31 August, 2011](https://image.slidesharecdn.com/wdyk-deviceapinowwithaddedfun-static-110831080933-phpapp02/85/Device-API-now-with-added-fun-1-320.jpg)
![Two new events ,[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Similar to Device API - now with added fun
Similar to Device API - now with added fun (20)
More from Andrew Fisher
More from Andrew Fisher (15)
Recently uploaded
Recently uploaded (20)
Device API - now with added fun
- 5. Let's see some data
- 8. Applications
- 10. Tank Tag
Editor's Notes
- Tonight I'm going to talk to you about some new features available in mobile browsers through the device API. I do have some demos but to save the bar's web connection I've brought my own LAN. The details are on the bottom of every slide if you want to have a play.
- The API provides two new events to measure how fast the device is moving and how the device is tilting along each of the various axes.
- Support is a little patchy at the moment but getting better all the time.
- If you decide to use these bear in mind the spec is still changing and is different stages of implementation by the browser makers. Also there are some inconsistencies in the implementations so you need to code for that. Check out my github over the next few days to get a library that will start to align the browsers.
- So let's take a look. I'm using web sockets and django socket IO to get the data in realtime from my phone. As you can see as I tilt my phone or move it around, you can see the sensor changing based on the movement and the orientation.
- To use this then; I add a handler to the window object and register the function to be called on event The device orientation function is my code for normalising the data. I pass the event object and get back another one which is the object according to the spec. Nothing really magic here, this would simply update some elements on the page showing the the values of the gyro as they come out of the device. This is exactly how the tilt part of my demo worked before.
- Device motion works much the same way. Add an event handler first. Again the devicemotion function normalises the code to bring it on spec. One thing to note here is this accelerationIncludingGravity object. The spec says to provide acceleration with and without gravity. At the moment no one provides the without gravity option so this is the only one that can be used. Again nothing magic – just updating some fields so you can see the raw data coming off the sensor
- So we've got access to this data, now what do do with it?
- One use is to build an earthquake detector This site measures the amount of shake on your phone and then plots it onto a canvas element that scrolls along like the paper in a seismograph. Check out isthisanearthquake.com on your phone to see how big an earthquake you can make.
- Finally here's a demo for you which you can join in on. Go to the server and you can start playing – you probably have about 45 seconds to see how many tags you can get. This is built using web sockets and Django Socket IO as the server. These events fire A LOT so you need to limit them a bit or you'll flood a 3G connection very quickly and it will get laggy. The device motion and device orientation events fire about as fast as your phone will go so can easily lock up so be aware of that.
- And that's what I know so thanks.