HTML5 Spirit Level

HTML5 has some pretty cool APIs for doing lots of things that previously would only have been achievable with native apps.

I've been doing some work with the deviceorientation event that mobile devices fire when they're moved and rotated. This is a pretty simple event that provides alpha, beta and gamma values describing the device's orientation, and can be used to implement quite a variety of different effects.

Combining this with the canvas element, I've put together a demo HTML5 spirit level app modeled after the one built into iOS's compass app. The UI is pretty straightforward:

There's some stupid code for various edge cases, but in general it's becoming increasingly easy to write compelling HTML5 apps that use device hardware features.

You can check out the code on github or have a look at the app.