The rolling can sample is a great demonstration of how a hybrid application can capture a device’s accelerometer data and animate an HTML element using CSS transformations. Its purpose is to demonstrate how to read the accelerometer data in a hybrid app as well as use that data in a creative and compelling way.

Once the hybrid application bridge library is loaded (in this case intelxdk.js) the onDeviceReady event is triggered which in turn calls the following function.

This function will lock the orientation of the application down, make sure that the device doesn’t time out and turn off while the app is active, hides the splash screen, and then starts watching the accelerometer for information.

The code that watches the accelerometer is set to fire a JavaScript event every 5 milliseconds. The result of that event will then be interpreted by the success function named suc.

Finally, in that success function is a function that will interpret the accelerometer data and render the action on image of the can.

Don’t have an accelerometer-enabled device? There are some arrow buttons commented out at the bottom of the index.html file that may be enabled to allow you to use this application anyway. Additionally, the can’s label and shading may be changed to a quirky “Mountain Doug” look by swapping in commented lines for the image elements above them.

This sample application has been tested on a variety of iOS and Android devices.

On an iOS device, the operating system will flip any application if the device is held upside down. While this could be helpful for any user who might not know how to hold their device properly, it can be frustrating for an accelerometer demo app such as this one where one might want to roll the can back up toward the top of the screen.

The physics don’t take into account scrolling into a corner. If one rolls the can width-wise into a corner, the application will respond by sizing the screen on the fly causing unpredictable results. This could be fixed with a little more math if necessary.