October 15, 2011

Taking a new device API for a spin

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.

Comments (20)

  1. October 16, 2011
    jason said...

    Nicely done!

  2. October 16, 2011
    Ward said...

    Wow, nice work! Love jQuery free javascript and the css3 compass – amazing what modern browsers can do.

  3. October 17, 2011
    離婚證人 said...

    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!

  4. October 17, 2011

    [...] 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 [...]

  5. October 17, 2011
    James said...

    What about a decent 3D compass? :-)

  6. October 18, 2011

    [...] 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. [...]

  7. October 18, 2011
    HTML Compass. said...

    [...] 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 [...]

  8. October 18, 2011
    James said...

    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 ;-)

  9. October 20, 2011

    Sorry but… it doesn’t work on my 3GS (iOS5) … :(

  10. October 20, 2011

    [...] about iOS 5? James demonstrated the use of the new webkitCompassHeading property for a compass. Based on this, I also updated my [...]

  11. November 1, 2011

    [...] 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 [...]

  12. November 8, 2011

    [...]   How about iOS 5? James demonstrated the use of the new webkitCompassHeading property for a compass. Based on this, I also updated my [...]

  13. October 16, 2012

    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.

  14. June 17, 2014

    Hi, just wanted to say, I enjoyed this blog post. It was funny. Keep on posting!

  15. June 19, 2014
    jhondevera said...

    The compass code was cool, thanks for resources.

  16. June 19, 2014

    Legend Who Seems To Be Terrified Of men.

Leave a Reply