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

  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.

  28. December 10, 2014

    Hi there mates, how is the whole thing, and what you desire to say
    regarding this post, in my view its really amazing in support of me.

  29. December 11, 2014
    Frederick said...

    Hi there, this weekend is fastidious for me, as this occasion i am
    reading this great educational article here at
    my residence.

  30. December 11, 2014
    Candelaria said...

    First of all I want to say fantastic blog! I had a quick question in which
    I’d like to ask if you don’t mind. I was interested to find
    out how you center yourself and clear your head prior to
    writing. I have had trouble clearing my thoughts in getting my ideas out.
    I truly do take pleasure in writing however it just seems like the first 10 to 15 minutes are
    usually lost just trying to figure out how to begin. Any recommendations or
    tips? Many thanks!

  31. January 13, 2015
    Arlene said...

    Obviously, you will need at least a follow-up series
    for each one of your marketing campaigns, but this is something many newbies
    don’t realize. Internet Marketing Advice For Beginners And Newbies.
    If the Lifetime Value (LV) of your customer is $100.

  32. April 13, 2015

    This site was… how do I say it? Relevant!! Finally Ihazve found something which
    helped me. Thank you!

  33. June 16, 2015

    Hi, its pleasant piece of writing concerning media print, we all be familiar with media is a great source of information.

  34. August 24, 2015
    Restora Lumina said...

    Hi there, after reading this awesome post i am too cheerful to share my know-how here
    with mates.

  35. September 9, 2015

    Stay up to date with retro Air Jordans and other Jordan shoes as well as Michael Jordan history. Nice Kicks has Jordan shoe release dates for cheap jordan shoes 2016. Never miss such wonderful online store to offer air jordans for cheap. Many 2015 newest cheap air jordans come out and hurry up to enjoy jordans free shipping here.

  36. September 15, 2015
    organic tshirts said...

    Really when someone doesn’t know then its up to other visitors that they will assist,
    so here it takes place.

  37. September 18, 2015

    Hi, i feel that i saw you visited my blog so i came to return the choose?.I’m attempting to to find
    issues to enhance my site!I guess its ok to use a few of your

    Also visit my web-site – prefab home kits ga

  38. September 25, 2015
    Terrence said...

    If you are going for finest contents like I do, just visit this web
    page daily for the reason that it presents quality contents, thanks

  39. September 26, 2015

    My doctor wanted me to have additional surgery to correct the problem.
    Radiotherapy usually involves external irradiation of the patient with
    a precisely controlled X-ray source. Vets can recommend trained physical therapist
    to carry out the massage if owners are worried about doing
    it for themselves.

  40. September 28, 2015
    Jump Higher said...

    You will find a huge report on many types of products.
    By comprehending the jump formula, you will end up able to train more efficiently.
    Another great example will be a volleyball player to be able to jump high enough
    to slam the ball within the net.

  41. October 4, 2015
    Shanel said...

    It is not my first time to pay a visit this web site, i am visiting
    this website dailly and take good data from here daily.

  42. October 4, 2015

    Appreciating the hard work you put into your site and detailed information you
    present. It’s nice to come across a blog every once in a while
    that isn’t the same old rehashed material. Excellent read!
    I’ve bookmarked your site and I’m adding your RSS fdeds to
    my Google account.

  43. October 6, 2015

    A motivating discussion is definitely worth comment.
    I do believe that you need to write more about this subject
    matter, it might not be a taboo matter but generally folks don’t talk about such issues.
    To the next! Best wishes!!

    Lisätietoa: http://www.starstudentmagazine.com/news/mitka-kengat-7/

  44. November 15, 2015

    Spot on with this write-up, I really believe this amazing
    site needs a gdeat deal more attention. I’ll probably be returning to read
    more, thanks forr the advice!

Leave a Reply