Play it here. You must be running Firefox 3.6 RC or better.

This uses the new orientation events added to Firefox 3.6.

Syd also put together a demo of what orientation looks like for those that do not have Firefox 3.6:

This web feature is going to be standardized in the W3C in one of two working groups.  The general idea is to separate out acceleration (values in g) and orientation (values in degrees for azimuth, roll, pitch).  More on that next year when we figure out where the work will be done!

If you a linux laptop and have a few minutes, please download one of the Firefox Trunk nightly builds and try out orientation!

What to try?

http://people.mozilla.org/~dougt/ori.html

Let it run for a little bit, then shake your laptop (not responsible for any damage ).  After you have a couple dozen responses, send me the results including what distro and laptop you are using.

Demos!

While you are testing things out, check out the demo Michael Ventnor (m.ventnor at gmail.com) put together:

http://dougt.org/random/orientationdemo/index.xhtml

Justin Dolske has a few demos too:

• Seismometer
• No idea, but it’s awesome

Jesse Ruderman also cleaned up the “ball” demo that I created making the animation smoother.

Help Wanted

There are still other platforms that I would like to support.  I specifically would like to see Windows support using their Sensor API.  If you are interested in helping, file a bug, cc me, and take a look at the other implementations.

Obviously clear that there should be a webapp for doing just that.  What was missing was a javascript API.

In recent Mozilla trunk builds, I have added support for an orientation event.  This new event will allow you to build applications and listen for changes in orientation.  (note, the first platform to support such an event is any MacBook Pro.  Others will follow).

Simple Call:

To use this new event, you will add an event listener as you normally would:

window.addEventListener(“MozOrientation”, orientationChange, true);

Your callback will be called, when there is a change in acceleration, passing the current orientation:

function orientationChange(o) {

}

Simple Result:

The passed object has 3 attributes – “x”, “y” and “z”.  Each value is between -1 and 1 where zero is the “balance point”.  For example, suppose you device is a MacBook Pro and it is sitting on a desk that is perfectly level, you would expect to see:

x = 0
y = 0
z = 1

x is the axis in the direction from the left side of the keyboard to the right side of the keyboard (basically the axis that is along the home row keys) is level.  If I lift up the left side of the keyboard, x will increase.  if I lift up the right side, x will decrease.

y is the axis in the direction from the front of the laptop (where the mouse is) to the back of the laptop.  If I lift up the front of the laptop (the side closest to me), y will decrease.  If I left the back towards the front, y will increase.

Got that?  Yeah, physics is pretty hard.

x and y can easily be visualized.  If you have a recent trunk build for the Mac, try loading this demo page:

http://people.mozilla.org/~dougt/ball.html

z basically will tell you that the laptop is sitting right side up.  if z was -1, you would know that the laptop (probably closed) and is sitting on its screen.  Of course the value will change as you rotate the laptop / device in this direction.

Right now, there is only support for the Macbook Pro.  It is pretty easy to add support for different OSs.  We have code for Samsung Windows Mobile devices, and for the HTC Windows Mobile devices.  We still need support for linux and for Windows.  If you are interested in adding support file a bug and start looking at http://mxr.mozilla.org/mozilla-central/source/widget/public/nsIAccelerometer.idl

The API isn’t fixed and may change.  I do invite you to comment.  Keep in mind that we want a really simple and straight forward API to expose orientation events to web developers.  If your response has either “RDF” or “DCCI” in it, please reread the last sentence. 

Thanks again and hope you enjoy.