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 (31)

  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.

  17. August 12, 2014

    If indeed the government is starting from scratch, and held five focus groups before compiling it.Committee members ― includingthree councillors ― will look at a report from John Hertel,But the government’s economic record has been overshadowed for most of the past year by the scandal over four senators who allegedly made improper expense claims. quote,on the death of Makkovik teen Burton Winters”He may be more famous than me, I think my son was treated not like a human being? which would really be something), This is one of them,”Despite what many misconstrued as a death sentence from the IOC.

  18. August 17, 2014

    WOW just what I was searching for. Came here by searching for history of middle earth

  19. September 12, 2014

    You can certainly ssee your skills in the work you write.
    The worl hopes for even more passionate writers like you who aare
    nnot afraid too sayy hoow they believe. At all times follow your heart.

    Feel free to surf too my web site: gifts ideass men – jscc.oceansoccer.org,

  20. September 13, 2014
    99K.org said...

    Awesome article.

    Also visit myy blog; Restaurants brookside kcmo (99K.org)

  21. September 20, 2014

    Hi this is somewhat of off topic but I was wondering if blogs
    use WYSIWYG editors or if you have to manually code
    with HTML. I’m starting a blog soon but have no coding expertise so I wanted
    to get advice from someone with experience.
    Any help would be enormously appreciated!

  22. September 23, 2014

    Great information. Lucky me I recntly found your site by chance (stumbleupon).
    I’ve book marked it for later!

    Take a look at my weblog; joomla tutorial (http://kavatxu.wordpress.com/)

  23. September 23, 2014

    What i don’t realize is if truth be told how you’re not
    actually a lot more well-liked than you may be now.
    You are very intelligent. You know thus considerably with regards to this topic,
    produced me personally believe it from so many varied
    angles. Its like women and men are not fascinated except
    it’s one thing to accomplish with Lady gaga!
    Your own stuffs great. Always care for it up!

    Feel free to visit my web-site: apollo beach schools

  24. September 24, 2014
    gaiaonline.com said...

    If yyou desire to grow your experience only keep viiting this web site and be updated with the newest news
    posted here.

    Alsso visit my blog post :: used Iphone – gaiaonline.com,

  25. September 25, 2014

    This piece of writing will assist the internet visitors
    for creating new webpage or even a weblog from start to end.

  26. November 26, 2014
    Garfield said...

    Nowadays you can find several agencies to assist
    you, but the important thing is to check their authentication. I’ve read other articles
    that claim waiting until you arrive at your destination will
    net you the lowest rate. This would be the same for your work network and
    the foreign network from the examples above.

  27. November 26, 2014
    Kristan said...

    Therefore it is advisable to work on your back pain much in advance in order to get healthy as soon as possible.
    Inhale as much air as you conveniently can while you lift your hands upwards.
    The researchers have found both increased BMI and inactivity are independent risk factors
    for low back pain.

Leave a Reply