Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Developers Harness New Accelerometer and Gyroscope Support in Mobile Safari

MacRumors

MacRumors

macrumors bot
Original poster
Apr 12, 2001
68,123
38,886


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 didn’t 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). . .
Click to expand...
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.


101426-360_panorama_gyroscope.jpg


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.
Click to expand...
360 Panorama is currently on sale for $0.99.

Article Link: Developers Harness New Accelerometer and Gyroscope Support in Mobile Safari
 
Article Link
https://www.macrumors.com/2010/12/22/developers-harness-new-accelerometer-and-gyroscope-support-in-mobile-safari/
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.
 
shartypants said:
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.
Click to expand...

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.
 
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.
 
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.
 
Hummm.... this could be very interesting in the long run. It will be cool to see what developers do with these two technologies.
 
TitoC said:
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.
Click to expand...

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?
 
spazzcat said:
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.
Click to expand...

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.
 
TitoC said:
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.
Click to expand...

Works here. Same phone, same iOS version. Balls just moves left and right, but it moves. :D
 
Popeye206 said:
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.
Click to expand...

Ah. Same -- only moved back and forth at the top of the screen until reload. Now it's all over the place. :D
 
While it wouldn't be very practical, it would be interesting to see this applied to desktop Safari as well. The MacBook Pros all have accelerometers built in (like all those little lightsaber hacks and stuff).

Again... no real use for it beyond proof-of-concept, I'm sure.
 
TitoC said:
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.
Click to expand...

Popeye206 said:
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?
Click to expand...

Got it. Thanks. The "reload" did the trick.

I believe the reasoning behind laying it flat on a table is because the Javascript running the Gyro on the phone browser page has to compete with the built-in function of the phone's Gyro function for browser orientation.
 
Last edited:
Wirelessly posted (Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5)

Just downloaded app. Don't want to use twitter so how can I allow iPhone 4 buddies to see my panos without them having to buy the app?
 
HTML5 games will take hold

shartypants said:
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.
Click to expand...

Non-Flash browser based games are quickly becoming more robust. Have a look at this 2010 E3 demo of the Dextrose Aves HTML game engine:

http://www.youtube.com/watch?v=SmtQOB_KFzU

Zynga bought Dextrose out in September:

http://www.insidesocialgames.com/2010/09/24/zynga-acquires-dextrose-aves-engine-html5/
 
Strange

I'm not sure if its deliberate or not, but I don't like the way it seems to disable the gyro view when you look down. It's pretty neat though and ever so simple to implement once you translate the euler angles to a matrix. I knocked up a very similar demo a few weeks ago, doesn't have the annoying down disable feature.

http://stuff.mark-lundin.com/directory/jspano.site/index.html

If it doesn't appear full screen on load, then just keep tapping the screen frequently until it does. It's a bit weird like that, I'll try and fix it.
 
shartypants said:
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.
Click to expand...

"Keeping up with HTML5" LOL what planet are you on?

Steve Jobs said Apple supports curated app store and completely open HTML5 development platform.
 
OK, that's a step in the right direction but what about form uploads? More than four major releases later and form uploads (input type = "file") are still missing—which have been in the HTML spec since version 2.

People like to defend this by saying Apple doesn't want to expose their file system, which is a reasonable assumption but what's to prevent Apple from abstracting that away and allowing the user things they can access? Example: you click on "choose file" button on a web page to bring up a pop-up menu to let you upload a photo or 2 from your camera roll, a vcard from your contact list, etc.
 
I think its probably 6 images forming a equirectangular projection, that's how the css 3d transforms work. So essentially its a rotating cube.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back