I love Device APIs, even the non-standard ones. I think they are going to hoist the web up onto its next level of innovation, usage, and ubiquity.
I was pleased to discover that iOS5 includes a new one, tucked away as a new property, webkitCompassHeading, mentioned by Apple on the W3C lists a little while back.
Previously this event’s orientation data was great for relative rotation, but its absolute value was arbitrary with respect to the real world. The new property gives a heading that is meaningful for real-world navigation. (There is also a webkitCompassAccuracy property that tells you how well it is doing.)
So I lashed up Compios5, a small web-based compass application, to show it off. It requires, of course, a real iOS5 device to work. (It’s been tested on iPhone 4 hardware. Should work fine on iPhone 4S. Layouts are probably slightly strange on the iPad.)
The compass itself is created entirely with CSS, with a few programmatically created elements for the labels and arrows. Designers: please issue pull requests to make it look nicer!
The code is here. A couple of implementation notes:
- There’s easing on the rotation to make it a little less jerky, but this has to be turned off whenever the compass spins through north. CSS transitions do not wrap-around transforms.
- window.orientation needs to be added to the heading so that a landscape view still points to physical north.
- Media queries detect orientation so that the compass stays in the center of the screen. It’s not quite stationary on a portrait->landscape flip, but great the other way.
As I said, this won’t work on any device apart from a real iPhone. There’s no way to simulate heading changes in the iOS simulator that I can find. But if you’ve upgraded, or have a shiny new iPhone 4S, please take it for a whirl.
Nicely done!
Wow, nice work! Love jQuery free javascript and the css3 compass – amazing what modern browsers can do.
This is my first time i visit here! I found so many useful stuff in your website especially its discussion, From the a lot of comments on your articles; I guess Im not the only one receiving the many satisfaction right here! keep up a good job!
[...] Pearce has unwrapped one of the APIs in the fresh new iOS 5 and put it through its paces… the compass API that offers absolute direction: I love Device APIs, even the non-standard ones. I think they are going to hoist the web up onto [...]
What about a decent 3D compass?
[...] iOS 5 comes also with two neat properties: [i]webkitCompassHeading[/i] and [i]webkitCompassAccuracy[/i]. You can read more about them and test them at: Taking a new device API for a spin. [...]
[...] James Pearce builds a compass with the new HTML compass API in iOS 5′s version of WebKit. Performance is not the difference between web and native. The difference is device API access. Tagged as HTML [...]
I have a 3D idea up my sleeve, and am just dusting down some old notes from my physics degree to see if I can pull it off. Stay tuned
Sorry but… it doesn’t work on my 3GS (iOS5) …
[...] about iOS 5? James demonstrated the use of the new webkitCompassHeading property for a compass. Based on this, I also updated my [...]
[...] wish now that we’d just done a Social Compass app and stuck some avatars on top of a simple webkitCompassHeading event handler or something. We weren’t expecting to win anything (there’s no doubt the [...]
[...] How about iOS 5? James demonstrated the use of the new webkitCompassHeading property for a compass. Based on this, I also updated my [...]
Hey there, same as Silvio Porcellana, it doesn’t seem to be working on my iPhone 3GS =(
Is it somin’ with the code, or the hardware you think..?
Okay, I forgot the iPhone 3GS doesn’t have a gyroscope, so that’s probably why this isn’t working for me.
Back to the drawing board for my app =)
Great work on the project though !!
Thank you for another wonderful post. The place else
could anybody get that type of info in such a perfect
approach of writing? I have a presentation next week, and I’m at the search for such info.
LOVE that it works with CSS! Nice job. Keep fighting the good fight.
Oh my goodness! Incredible article dude! Thank you so
much, However I am experiencing problems with your RSS.
I don’t know the reason why I can’t join it. Is there anybody having similar RSS problems?
Anyone who knows the solution can you kindly respond?
Thanx!!
Taking a new device API for a spin « James Pearce wholesale lingerie http://cheapsexylingerieonsale.weebly.com/