A cross-browser offline-enabled web compass | Hacker News Reader

A cross-browser offline-enabled web compass

lamplightdev.github.io

54 pointslamplightdev24 comments

This is awesome.

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/

That is incredible, will look to use that library in the future.

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.

I don't think the geography should matter. The reversed toilet direction is a myth, the north pole is the same.

By "cross browser," it looks like the OP means the following minimum versions of mobile browsers which support the Screen Orientation API[1]:

- Chrome 39 - Firefox Mobile (with the moz prefix).

Apparently the API is also supported by the following Desktop browser versions...but I'm not sure this app takes advantage of it:

- Chrome 38 - Firefox (Gecko) - IE 11 - Opera 25

[1] https://developer.mozilla.org/en-US/docs/Web/API/Screen.orie...

It doesn't seem to work on my Nokia Lumia 710, Windows Phone 7.5 (7.10.8779.8), Internet Explorer.

But also, a lot of things don't work on my phone (not even Youtube I can watch on the browser, I have to use an app for that; a non-official one btw).

It seems that the screen oriantation API[1] isn't compatible with mobile IE, and is only supported by IE 11.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Screen.orie...

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.

I love being being caught off guard like this by what's possible with the Web platform. Nice work!

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.

For that very reason, I wrote this: https://github.com/capnmidnight/Psychologist.js/blob/master/...

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.

Why on earth would it work on Yosemite? This is very clearly a mobile-oriented demonstration.

You could infer the heading by "simply" telling the user:

"Move in the way you look for about 50 meters."

If you walk a straight line and the Laptop knows where it is at any given time it can infer the heading.

A compass isn't a heading indicator though...it's an orientation indicator.

If you have the heading and a few locations then you can also infer where north/south/east/west is. Or am I wrong?

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.

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.

Gyroscopes or acceleratometers? How many axis?

Reply on news.ycombinator.com