For non-english folks, quick links: demo, W3C spec, video at the bottom of this post!

As I was checking the latest commits on Chromium, I found that the revision 57521 regarding Chromium Mac was adding Macbook Pro accelerometer support (corresponding bug is 44654). After digging a little to find how to use it, I’ve seen that the functionality is still behind the flag "--enable-device-orientation". Once added, you can try it! The flag is now enabled by default (get the latest Mac version (57686 or later) here). The code is pretty straightforward:

function onOrientation(event) {
        var rotate = 'rotate(' + event.gamma + 'deg)';
        var scale = 'scale(' + ((event.beta/180)*2 + 1) + ')';
        document.getElementById('logo').style.webkitTransform = rotate + ' ' + scale;
}

window.addEventListener('deviceorientation', onOrientation);

The deviceorientation event returns 3 interesting variables: alpha, beta, gamma. Each returns an angle value corresponding to their respecting axes. You can take a look at the DeviceOrientation Event Specification on the W3C website to see how it works more precisely. I’ve set up a small demo with the Jolicloud logo that you can test here, this is only for Chromium Mac and it will works if you’re using a Macbook Pro with an accelerometer. On the Javascript side, there’s nothing new, I’ve adapted the very cool orientation demo of Paul Rouget from Mozilla. Here’s a video for people who can’t try it:

Device orientation demo from Jeremy Selier on Vimeo.