Javascript hardware support testing for iPhone 3GS device orientation events

Question

I am trying to use HTML5 deviceOrientation events in Javascript to rotate an image when a user rotates their iPhone around it.

I use this code to detect gyro motion:

window.addEventListener('deviceorientation', function (e) { alpha = e.alpha; beta = e.beta; gamma = e.gamma; }, true); 

This works really well on iPhone 4+ and iPad 2, but there is no gyro on 3GS (and older iPhones). This is why I am testing deviceOrientationSupport as follows:

 if(window.DeviceOrientationEvent){ // gyroscope support alert('DeviceOrientationEvent support OK'); } else { alert('DeviceOrientationEvent support KO'); } 

I saw this code on many sites or forums, but my problem is that with my iPhone 3GS under iOS 5.0.1 this test shows me: deviceOrientationSupport OK!

I think this test is only checked if Safari is capable of handling these events :(

So my question is: can I add a test to find out if the hardware can trigger orientation events?

Thanks!

Answer 1

After the same problem as above, I also had problems with older iPad / iPhones that didn't even call the function on addEventListener.

So, I found that the following works much better for me and eliminates any chances of passing an unsupported device (this was equipped with a boot screen, so it took an interval to complete its full test, so not for everyone).

 var _i = null; var _e = null; var _c = 0; var updateDegree = function(e){ _e = e; } window.addEventListener('deviceorientation', updateDegree, false); // Check event support _i = window.setInterval(function(){ if(_e !== null && _e.alpha !== null){ // Clear interval clearInterval(_i); // > Run app }else{ _c++; if(_c === 10){ // Clear interval clearInterval(_i); // > Redirect } } }, 200); 

Answer 2

I hope this is not too late, but it is not surprising that Safari for iOS 4.2+ will register DeviceOrientationEvent on iPhone 3GS (or other devices without a gyroscope)?

Bottom Line, DeviceOrientation does not work with iPhone 3GS. But, as already mentioned, DeviceMotionEvent works, but you need to access the event data in a different way than with a device with a gyroscope (I know stupid!).

First step: I added a variable to the mix to capture whether the OrientationEvent really triggers any non-zero data (as if it were a gyroscope).

 var canHandleOrientation; if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", handleOrientation, false); } function handleOrientation(event){ console.log("Orientation:" + event.alpha + ", " + event.beta + ", " + event.gamma); canHandleOrientation = event; // will be either null or with event data } 

Now you know if the event really has gyro data or not! Therefore, if you want something else by default (i.e. window.DeviceMotionEvent), you can use a conditional expression.

 if (!canHandleOrientation) { console.log("There is no gyroscope") } 

I tested this on Mobile Safari for iPhone 3GS (without a gyro) and iPad 2 (gyro) and Chrome on my Macbook Pro (gyro). Seems to work.

Now, if you want to get DeviceMotionEvent data as an alternative, if Orientation data is not available, then ...

 if (window.DeviceMotionEvent && !canHandleOrientation) { window.addEventListener('devicemotion', handleMotion, false); } function handleMotion(event){ if(event.acceleration){ //requires a gyroscope to work. console.log("Motion Acceleration: " + event.acceleration.x + ", " + event.acceleration.y + ", " + event.acceleration.z); } else{ //this is for iPhone 3GS or a device with no gyroscope, and includes gravity. console.log("Motion AccelerationGravity: " + event.accelerationIncludingGravity.x + ", " + event.accelerationIncludingGravity.y + ", " + event.accelerationIncludingGravity.z); } } 

This should cover your databases for most devices using the webkit browser ... I hope so. Havent tested it on any Android device.

It should be noted that each event returns different numbers, so you may need to do some work to normalize them. But these are the basics of how you address them.

Let me know if this helps!

Answer 3

Despite the lack of a gyroscope in 3GS, it is perfectly capable of detecting changes in the orientation of the device using the built-in accelerometer. iOS supported this support from the first iPhone.

Answer 4

I had a similar problem: my desktop also received the window.DeviceOrientationEvent event. I used the following code to test orientation support on mobile devices:

 var deviceSupportOrientation = false; window.onload = function() { if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", function() { deviceSupportOrientation = true; window.removeEventListener('deviceorientation'); }, false); } }; 

JSFiddle: http://jsfiddle.net/7L5mg8hj/1/]