DeviceOrientation and DeviceMotion fun

[jamesgpearce]

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]

THanks for the info and demo. Had no idea this was possible. Look awesome..

[ariya]

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]

looks good. did u use any library for the physics?

[ariya]

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]

oh i see. will check it out thanks for the info

[jamesgpearce]

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]

And a few notes on how it works: http://tripleodeon.com/2010/12/sencha-touch-devicemotion-apis-small-plastic-toy/

[ariya]

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]

Hi

Thanks Great news and demos :)