#devicemotion

[insidehtml5]

Gyroscope, what to do with it?

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.

I hope this post is going to be helpful, fell free to ask any questions :)