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

  1. December 4, 2015
    Infissi in PVC said...

    Oh my goodness! Impressive article dude! Thank you so much,
    However I am having problems with your RSS. I don’t know the reason why I can’t subscribe to it.
    Is there anybody getting the same RSS problems? Anyone that knows the solution will you kindly respond?

  2. December 15, 2015
    ugg channing ii said...

    Cobalt and also stainless. They may in addition increase the risk for identical dime hypersensitivity. These are frequently discovered since preservatives along with dime. Thus stay away from diamond jewelry utilizing cobalt and also stainless just as one component.

  3. January 23, 2016
    situs judi said...

    I am actually pleased to glance at this website posts which carries lots of valuable
    facts, thanks for providing these statistics.

  4. January 25, 2016

    Nice post. I was checking constantly this blo and I amm impressed!

    Very helpful information particularly the ultimate phase :
    ) I deal with such information a lot. I used to be
    seeking this certain information for a very long time.
    Thank you and best of luck.

  5. January 25, 2016

    Hello are using WordPress for your blog platform?
    I’m new too the bog world but I’mtrying too geet
    started and set up my own.Do you need any coding knowledge to make your own blog?
    Any help would be really appreciated!is capital punishment justiied

Leave a Reply