December 1, 2010

Sencha Touch + DeviceMotion APIs (= a small plastic toy)

Here at Sencha Towers, we’ve been having a bunch of fun with the new accelerometer & gyroscope APIs in the iOS4.2 web browser.

Rob Dougan has put together a tilt-controlled list and Ariya Hidayat a box of marbles. Both require an updated iPhone or iPod Touch (although Ariya’s also works on a MacBook Pro if you use the Chrome browser).

The APIs are pretty easy to use, and seem to follow the W3C (draft) standards.

I thought I would have a go to, and so I wrote a small Sencha Touch app that mimics one of those small sliding puzzles we all had as kids – but where the tiles are moved not with touch gestures, but by sliding the pieces under gravity.

From a Sencha Touch point of view, I’ve tried to use a best-practice application structure, and both the grid and the tiles are Ext.Panels (which makes them easy to treat in an object-oriented way and, in the case of the tiles, instantiate arbitrarily).

I have set up Ext.EventManager listeners for devicemotion and deviceorientation events, and fortunately, the callback can access the underlying browser event to get the motion-based properties I need.

The tiles themselves are placed on the grid using CSS transforms, rather than top/left positioning, along the lines of:

Ext.Element.cssTransform(this.getEl(), {translate: [x, y]});

This makes coding the sliding movement unbelievably easy: I simply have to change the transformation to where I want the tile to move to, and then

-webkit-transition:-webkit-transform .8s ease-in;

does the gentle slide. Wow. Transitions and transforms have been a spectacular epiphany for me in the last few months.

One catch with web-based tilt control: tip the device more than 45 degrees, and you might find yourself switching between portrait and landscape mode. I don’t know of a way to disable this in Mobile Safari.

The issue with this is that the co-ordinate system of the device’s physical orientation does not rotate, but the web page does. So in my case, I check the window’s current rotation and subtract the appropriate multiple of 90 degrees so that the elements still slide in the direction expected for the device’s physical position.

To test it out, get an iPhone or iPod Touch with iOS4.2 installed. Put the device level on a horizontal surface, go to – then tilt the device about 15 degrees in various directions to make the tiles slide.

Also feel free to look at (and be tempted to improve!) the code. Small, simple, and good fun: let me know what you think.

Comments (12)

  1. December 1, 2010
    Ariya said...

    Nice demo!

    Small note: with Sencha Touch 1.0.1 you can also use the (slightly) faster cssTranslate instead of cssTransform. Also there is Ext.supports.DeviceMotion :)

  2. December 1, 2010
    James said...

    Damn, I pop out for lunch and a whole new API appears.

  3. December 1, 2010
    Dan said...

    1. In any screen, double-tap the home button
    2. Scroll as far left as you can on the multitasking dock
    3. The first symbol to the left will be a circular arrow
    4. Toggle this to either lock or unlock the screen orientation of your phone.

  4. December 1, 2010
    James said...

    Dan, sure!

    But what I meant was I don’t know how to stop Safari from rotating through the use of Javascript – or, say, magic meta tags – on a specific web page.

  5. December 1, 2010
    Crysfel said...

    Great job! really nice demo :)

  6. December 9, 2010
    Dan said...

    Ah, OK, that I don’t know either!

    P.S You should really have the ability to subscribe to blog comments on your site!

  7. December 10, 2010
    James said...

    It’s there, isn’t it?

  8. December 27, 2013

    I was just seeking this info for a while. After six hours of continuous Googleing, at last I got it in your site. I wonder what’s the Google’s problem that does not rank this type of informative websites closer to the top. Generally the top web sites are full of garbage.

  9. May 29, 2014 said...

    You ɦave made some really good points there.
    I lookeԁ onn the web for more info about tthe isѕսe and found most people will go lοng ѡitҺ
    youyr views on this web site.

    Here is my web blog – fashion shopping reԀuction (

  10. August 19, 2014

    An attention-grabbing discussion is worth comment. I believe that you should write a lot more on this matter, it won’t be a taboo subject however normally persons are not sufficient to speak on such topics. Towards the next. Cheers
    nike lunarglide 5 review women’s

  11. August 26, 2014
    Anita said...

    Superb blog you have here but I was wondering if you knew of any message boards that cover the same topics talked about in this article?
    I’d really love to be a part of community where I can get responses from other experienced people that share the same
    interest. If you have any recommendations, please
    let me know. Many thanks!

    Also visit my blog post … How Can You Look Younger Than Your
    Age (Anita)

  12. September 21, 2014 said...

    Undeniably believe that which you said. Your favorite justification seemed to be
    on the net the simplest thing to be aware of.

    I say to you, I definitely get annoyed while people consider worries that they plainly do
    not know about. You managed to hit the nail upon the top and defined out the whole thing without
    having side effect , people can take a signal. Will likely be back to
    get more. Thanks

Leave a Reply