Got a tip for us? Share it...

Developers Harness New Accelerometer and Gyroscope Support in Mobile Safari

Soon after the launch of iOS 4.2 late last month, it was discovered by mobile programmer Maximiliano Firtman that Apple had updated the iOS version of Safari to support a number of new HTML5 and W3C standards, one of the most interesting of which was support for using devices' accelerometer and gyroscope features right in the browser.

As you may know, all iOS devices have accelerometer sensors (plus magnetometer and gyroscope on some devices). However, as web developers, we didnt have access to such sensors until now. Safari now supports the DeviceOrientation API (W3C draft). Looking at the available objects, it seems that all the API is fully supported (including ondeviceorientation and ondevicemotion events). . .

Firtman coded a quick demo (functional on iOS 4.2 devices only) of the new capabilities, allowing users to roll a ball around the browser window using accelerometer input.


With the new support not being broadly advertised by Apple, it has taken a little while for developers to create truly functional implementations of the features. But as noted by The Next Web, Occipital, the company behind the popular 360 Panorama photo application, has now harnessed the features to provide immersive viewing of panorama photographs.


As an example of the feature in action, this link to a panorama utilizes traditional click-and-drag panorama navigation when accessed through a desktop or notebook browser, but on an iOS 4.2 device users can pan around the photograph simply by moving their device to mimic experiencing the scene as if they were there.

After you capture a panorama with the 360 Panorama app, one can upload the picture, getting the URL to view the experience in Safari Mobile. In essence, the raw jpeg image files are hosted on either TwitPic or yFrog after a user uploads a panorama through 360 Panorama.

After launching the URL in Safari Mobile, one will see "Gyro ON" and simply by moving your phone in any direction, you can have a complete panoramic experience using the photo you've captured. Moreover, experiences can be viewed on TwitPic, or the location of the experience using Apple's "Maps" app.

360 Panorama is currently on sale for $0.99.

Top Rated Comments

(View all)

19 months ago
That would be a pretty neat feature to mess with.
Rating: 0 Positives / 0 Negatives
19 months ago
Nice seeing Apple keeping up with HTML5. I'm sure they are trying to avoid having people develop HTML5 games outside their AppStore, but I'm sure that would only apply to the simplest of games.
Rating: 0 Positives / 0 Negatives
19 months ago

Nice seeing Apple keeping up with HTML5. ...


Yes, it's nice seeing apple keep up with the technology that they keep shoving down everyone's throats.
Rating: 0 Positives / 0 Negatives
19 months ago

Nice seeing Apple keeping up with HTML5. I'm sure they are trying to avoid having people develop HTML5 games outside their AppStore, but I'm sure that would only apply to the simplest of games.


I really don't think they care if you build a game outside of the app store, if they did they wouldn't be supporting these features.
Rating: 0 Positives / 0 Negatives
19 months ago
Wow, the gyroscope effect is really neat on the panorama.

Gyro support has been slow on the uptake in the app store, but I've been enjoying it recently in Real Racing (it really improved their 'we rotate the screen to keep the road horizontal' effect) and Rage, and now this. It provides a very impressive response.
Rating: 0 Positives / 0 Negatives
19 months ago
Nice! Love the pushing of the envelope in HTML5 for mobile browsers. 360 Panorama does a great job implementing this, so it's not just bells and whistles. Unfortunately, the mobile demo that Firtman posted does not work for me. I have an iPhone 4 with iOS 4.2.1. Anyone else get this to work? The ball just stays in the corner.
Rating: 0 Positives / 0 Negatives
19 months ago
Hummm.... this could be very interesting in the long run. It will be cool to see what developers do with these two technologies.
Rating: 0 Positives / 0 Negatives
19 months ago

Nice! Love the pushing of the envelope in HTML5 for mobile browsers. 360 Panorama does a great job implementing this, so it's not just bells and whistles. Unfortunately, the mobile demo that Firtman posted does not work for me. I have an iPhone 4 with iOS 4.2.1. Anyone else get this to work? The ball just stays in the corner.


I can only get the ball to go back and forth on the top of the screen. ??? Seems to be buggy. :)

UPDATE: I hit the reload button and it works good now.... try reloading the page.

I wish there was a way for these types of motion detected things to work so that you don't have to lay the phone flat to go up and down. It would seem like you should be able to point the screen right at your face and that would be the 0.0 point instead of flat on it's back. Make sense?
Rating: 0 Positives / 0 Negatives
19 months ago

I really don't think they care if you build a game outside of the app store, if they did they wouldn't be supporting these features.


Agreed.

The main reason? There's no good way for anyone to sell an online game to users. They'd have to be free ad-supported games.

So if they're free games, Apple probably doesn't care if you want to put it on the web instead of their store. It's the paid games that they get a cut from.

I suppose the one loss is they couldn't get iAds put in that game, but I suspect we'll soon see iAds grow outside of iOS so that'll take care of that problem.
Rating: 0 Positives / 0 Negatives
19 months ago
Pretty awesome pano app, well done!
Rating: 0 Positives / 0 Negatives

[ Read All Comments ]