Here is a link to the 3d web compass I built and submitted to Hacker News 3 years ago [1] (direct link to a demo @ [2]).
I also released a JavaScript library based on that research that may help others use web device orientation without needing to understand all the math involved [3]. That in turn is based on a primer I made for web developers @ [4].
I hope this helps others who want to use device orientation on the web to build web-based compasses, Virtual Reality and Augmented Reality experiences!
On my iPhone 5s this doesn't seem to work all that well. The outer ring rotates twice as much as I physically rotate my phone. Otherwise the raw numbers are roughly the same as what I get in the Compass app on my phone, as expected from the Orientation API (the gps on my phone doesn't work well in my current location - maps gives my location about half a degree north of where I am with an error of +-120 km)
Plus, the demo is counter intuitive - the needle should point north, not where I'm pointing my phone. That's how a magnetic compass works. I'm not Jack Sparrow.
> That's how a magnetic compass works. I'm not Jack Sparrow.
Thank you. That's the first time in a while I've laughed out loud. It's been a dreary week.
On the other hand, I've got to give props to what is clearly a project someone worked hard on. It's got a very attractive design, despite it's technical difficulties (that may be surmountable!).
In my iPhone 5, it seems to point exactly in the opposite direction. The included Compass app works perfectly. I don't know if this matters or not, but I'm in South America.
Awesome ! Loaded, closed tab, turned off data, loaded again, still works :) (except that people think I'm crazy waving my phone in the air trying to draw the figure 8)
I can speak from experience, getting things to look this nice in mobile browsers AND actually do something is really hard. Good work.
An interesting additional feature might be some means to indicate magnetic declination. Actually, if you also grab GPS location, you should be able to calculate it and correct magnetic north back to true north.
One note, usually it's the needle that moves with the orientation, not the dial.
Thanks for the feedback all. Unfortunately each browser seems to have its quirks in the implementation of the spec - I thought I'd caught most of them but obviously still a bit of work to do!
With regard to the dial rotating rather than the needle, it's an interesting point (no pun intended :) I think each has its own merit for certain applications - probably worth adding an option to choose.
When I rotate screen to landscape on my Android using Chrome 40.0.2214.89, it says North is about pi/2 anti-clockwise from where it says North is when my screen is portrait. Presumably It's not accounting for screen rotation.
So, this is something that is not explained well with Device Orientation API. It's meant for holding your phone flat in your palm, parallel to the ground. In that orientation, the heading is reported relative to the top edge of the device. It can work in a landscape orientation, but at that point that top edge of the device is now pointing 90 degrees in the wrong dejection from what you probably intend, i.e. the back plate of the device. And in a portrait orientation, it completely gimbal locks.
Unfortunately this browser doesn't support orientation so will not show your correct heading.
Chrome 40.0.2214.111 on Yosemite. Not really cross-browser when its not working in newest Chrome ...
Edit: tried it on iPhone, its working but orientation is reversed. For example I turn to North, turn left 90 deg and instead of showing West, its showing East.
What did you expect it to do on your laptop? It's a compass. It's pretty fundamentally tied to the orientation service. And of course laptops don't tend to have gyroscopes in them.
Laptops, including Macbooks made since 2010 or so have gyroscopes in them. Originally for the purpose of detecting a fall and parking the drive head before impact.
If it's based on GPS, you could get a rough idea of where north was for the user, on average, while they were moving. It would be very static and wouldn't lend well to this sort of interface.
If all you have is WiFi- or cell-tower-based location, then you're not going to be able to get enough precision to make the value meaningful.
Here is a link to the 3d web compass I built and submitted to Hacker News 3 years ago [1] (direct link to a demo @ [2]).
I also released a JavaScript library based on that research that may help others use web device orientation without needing to understand all the math involved [3]. That in turn is based on a primer I made for web developers @ [4].
I hope this helps others who want to use device orientation on the web to build web-based compasses, Virtual Reality and Augmented Reality experiences!
[1] https://news.ycombinator.com/item?id=4115768.
[2] https://richtr.github.io/Marine-Compass/
[3] https://github.com/richtr/Full-Tilt
[4] https://dev.opera.com/articles/w3c-device-orientation-usage/