PDA

View Full Version : DeviceOrientation and DeviceMotion fun



jamesgpearce
24 Nov 2010, 8:26 AM
With Apple's iOS4.2 update on Monday, mobile Safari now has support for the W3C's DeviceOrientation spec (http://dev.w3.org/geo/api/spec-source-orientation.html) and device motion.

This now means we can all try out some neat new techniques with mobile web user interfaces.

For example, our own Rob Dougan already has a demo showing how an accelerometer can control the scrolling of an Ext.List in SenchaTouch: http://b.rwd.me/

It's very cool. This is another glimpse at the dawn of a whole new web era!

There are a few other cool demos out there already, but... use feel free to use this thread to show off any interesting ways you've used accelerometer and gyroscope capabilities in your Sencha Touch apps.


PS. The Apple reference pages for the two APIs are available at

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html

Although of course view-source is also your friend.

blessan
24 Nov 2010, 9:28 PM
THanks for the info and demo. Had no idea this was possible. Look awesome..

ariya
29 Nov 2010, 10:52 PM
Not a Sencha Touch app, but take a look: http://ariya.github.com/js/marblebox/

Just to demonstrate what you can get by combining the sensor data and a physics engine :)

blessan
30 Nov 2010, 12:21 AM
looks good. did u use any library for the physics?

ariya
30 Nov 2010, 9:52 AM
looks good. did u use any library for the physics?

Yes, I use Box2D. The full store behind: http://ariya.blogspot.com/2010/11/box-of-marbles-meets-device-orientation.html

blessan
30 Nov 2010, 7:56 PM
oh i see. will check it out thanks for the info

jamesgpearce
30 Nov 2010, 9:29 PM
I used Sencha Touch to create a small slider game: http://tinyurl.com/ioslide - place an iOS4.2 device on a horizontal surface and tilt it gently to slide the pieces.

(The playing grid and the tiles are all Ext-style components, fwiw)

All good fun, anyway.

jamesgpearce
30 Nov 2010, 10:44 PM
And a few notes on how it works: http://tripleodeon.com/2010/12/sencha-touch-devicemotion-apis-small-plastic-toy/

ariya
30 Nov 2010, 11:09 PM
Here is another 10-minute hack: http://ariya.github.com/js/devicemotion/

Useful to for troubleshooting, or if you are still confused which direction X, Y, and Z are :)

tomalex0
1 Dec 2010, 5:49 AM
Hi

Thanks Great news and demos :)