Different gyroscope values in chrome mobile and safari mobile

Question

I am currently building a small panoramic photo viewer which has an option to navigate the scene with a gyroscope. I am taking the data from the deviceOrientation event and turning the euler angles into a rotation matrix, and then putting that through some transformations and eventually moving a css cube with a 3dMatrix transform.

My problem is that I am getting very different data coming in from the deviceOrientation event on different browsers on different devices, and I don't understand why.

On almost every iPhone I have tried, with safari mobile and with Chrome, everything works great. The values come in and make sense, and the whole experience is quite seamless.

On a Samsung Galaxy S3, in Chrome, my data is totally erratic. The alpha value doesn't actually seem to represent a rotation around the z axis, and there are huge leaps in values, like the beta leaping from 50-130 degrees with only a small motion.

On a Galaxy Tab S 8.4" in Chrome, i still get some erratic values, with some jerking back and forth, but I at least get something that approximates the desired behaviour.

On a Nexus 7 2nd gen, on Chrome, the experience is coherent and makes sense. Its rendering is choppy compared to the iPhone but it is rotating everything properly, and the values make sense.

Does anyone know how I might be able to fix these issues, or how I should address them? They may be a problem with Samsungs port of Android, or in Android itself in the newest versions of the OS.

Thoughts? Ideas? Suggestions? I am really lost at this point.

Thanks!

Answer 1

Here you can find the details of the JS events:
http://dorukeker.com/know-thy-gyroscope-and-js-part-i/

Here is which values are different on which devices:
http://dorukeker.com/know-thy-gyroscope-and-js-part-ii/

And here is the JS file I prepared to deal with these differences:
https://github.com/dorukeker/gyronorm.js

UPDATE: I have just updated the gyronorm.js on GitHub. Now there are functions that tells you if a certain variable is available on the device/browser combination. Check the GitHub page to download and how to use.

I hope these help. Enjoy!