Gyroscope is one of the handy things on tablets and smartphones. But it can be quite hard to work with it because of a difference on iPad and Android devices. This post is about what i learned about gyroscope in short time i was using it.

Lets start with how to recognize a device motion, this part is the same on iPad and Android.

if ((window.DeviceMotionEvent) || ('listenForDeviceMovement' in window)) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { document.getElementById("dmEvent").innerHTML = "Not supported on your device."; }

First it's good to check if device support device motion. Well hear you can get a problem in some browsers, to be honest I'm not sure why these problem occurs. if you are using gyroscope for something it's best to test it on as many device as you can. As you may see event listener is for event call "devicemotion" which then activates function deviceMotionHandler.

 This is part of code from article This End Up from HTML5Rocks

  function deviceMotionHandler(eventData) { var info, xyz = "[X, Y, Z]"; // Grab the acceleration from the results var acceleration = eventData.acceleration; info = xyz.replace("X", acceleration.x); info = info.replace("Y", acceleration.y); info = info.replace("Z", acceleration.z); document.getElementById("moAccel").innerHTML = info; // Grab the acceleration including gravity from the results acceleration = eventData.accelerationIncludingGravity; info = xyz.replace("X", acceleration.x); info = info.replace("Y", acceleration.y); info = info.replace("Z", acceleration.z); document.getElementById("moAccelGrav").innerHTML = info; // Grab the rotation rate from the results var rotation = eventData.rotationRate; info = xyz.replace("X", rotation.alpha); info = info.replace("Y", rotation.beta); info = info.replace("Z", rotation.gamma); document.getElementById("moRotation").innerHTML = info; // // Grab the refresh interval from the results info = eventData.interval; document.getElementById("moInterval").innerHTML = info; }

From this part of code you can see how to get movements of your device on different sides.

Now when you use gyroscope it's good to know on witch side is device rotated, here is where it all gets tricky.

window.addEventListener("orientationchange", function() { // Announce the new orientation number alert(window.orientation); }, false);

Orientation change listener only works on iPad so you need to use this 

$(window).resize(function() {}

If you listen for window resize event you will also catch device orientation change because your browser window will always resize on orientation change. When you capture event you can get window orientation

var orientation = window.orientation;

This brings us to another problem, iPad and Android devices return different window orientation numbers. To avoid problems with this you need to check user agent

var ua = navigator.userAgent.toLowerCase(); var isAndroid = ua.indexOf("android") > -1; if (isAndroid) { setTimeout(function(){ if (window.orientation == 0 || window.orientation == 180) { //Landscape Mode } else if (window.orientation == 90 || window.orientation == -90) { //Portrait Mode } },800); }

From my experience it's god to set a little timeout before you check the orientation because sometime the check is to quick when activated and device orientation is still the old one.  

I didn't have time for a proper demo but you can see one old that i create on http://insidehtml5.html-5.me/demo/demo-gyroscope/demo2.html , and also check the demo of the author on  This End Up: Using Device Orientation.

One new feature of iOS 5's Mobile Safari that was not known back when I wrote this post, is an extension to the DeviceOrientation Event API. There was already an implementation of the official yet limited spec in iOS, but the Apple team didn't have the time to wait for a resolution and implemented two new properties that allow developers to get full access to the real world orientation in Mobile Safari now!

James Pearce from Sencha took the new API for a spin and created a complete web-based compass. If you're running iOS 5 and you're on an iPhone 4 or 4S, iPad or latest generation iPod Touch, just tap the image below. Now go ahead and make your web app orientation-aware!