Accelerometer Based UI Interaction & Sencha Touch

by Shea Frederick on July 19th, 2011

With the iOS 4.2 update at the end of 2010 came some cool new features for mobile web developers. My favorite of the new features was access to the devices accelerometer/gyroscope data through an event called 'devicemotion' which we can listen to on the window object. This new event fires every time the device moves, which is pretty much non-stop - 50 times a second - even when the device is sitting still on a desk.

This new access to motion data opens up developers to do so much more, besides the obvious usage in games, we can create user interactions based on motion. Thats where I decided to use it, my thought was to use it for tab navigation, but more in that in a minute.

An Overwhelmed Browser

Needless to say, this 'devicemotion' event being fired so often can eat up resources so I needed to wrap all the logic that is executed each time the event is fired in a simple modulus check, which will reduce the overhead of logic being run to every n times. With a case like this, where the event is fired 50 times a second, a modulus of 10 will be enough to reduce the overhead - of course we can increase this number if things still seem sluggish, or decrease it if we have resources left and want a little more resolution to our readings. Honestly, handsets don't have much in the way of CPU to begin with, so always play it safe.

There is another way to accomplish this same thing, by writing the events arguments to a static variable somewhere, and setting up a timer to poll that variable every n milliseconds. This method works pretty much the same in this case, though I prefer the modulus method, which accounts for the event actually being fired. If for some reason the phone is set on a solid surface and no longer firing the event (ha! not gonna happen in this case) then the modulus method stops using resources, whereas the polling method is always using the same amount of resources.

Eaither way works fine in this case, however I'm sticking with my old standard modulus check. Let's move on.

The Concept

As soon as found out that accelerometer data was available, I knew exactly what I wanted to do. Why not flick the device left or right to move between sections of our app - the user already thinks of the interaction of swiping between sections with their finger on the screen, so why not flick as well?

The Plugin (for Sencha Touch)

The culmination of all of this has been rolled into a simple Plugin for Sencha Touch TabPanels, which is available on my Github account. Right now there are no configuration options, just add the plugin to a TabPanel like so:

As always, feel free to fork it and make changes or use it as you wish. Enjoy!

LIVE DEMO (only works on devices w/hardware):

NOTE: I wrote this plugin on a whim almost 8 months ago, and have not written a blog post on it till now :) Oh the joy of having too much work to do! I would love to see someone code a "swirl refresh" plugin where you move the phone in a circular motion to refresh a listview.

  1. What a coincidence — I just downloaded this from git about a week ago and was going to play around with it.

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS