
A cross-browser offline-enabled web compass - lamplightdev
http://lamplightdev.github.io/compass/
======
richtr
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](https://news.ycombinator.com/item?id=4115768).

[2] [https://richtr.github.io/Marine-
Compass/](https://richtr.github.io/Marine-Compass/)

[3] [https://github.com/richtr/Full-Tilt](https://github.com/richtr/Full-Tilt)

[4] [https://dev.opera.com/articles/w3c-device-orientation-
usage/](https://dev.opera.com/articles/w3c-device-orientation-usage/)

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

------
thomasfoster96
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.

~~~
jnbiche
> 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!).

------
jipumarino
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.

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

------
ryannevius
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...](https://developer.mozilla.org/en-
US/docs/Web/API/Screen.orientation#Browser_compatibility)

------
soneca
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).

~~~
ryannevius
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...](https://developer.mozilla.org/en-
US/docs/Web/API/Screen.orientation#Browser_compatibility)

------
chdir
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)

------
moron4hire
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.

------
lamplightdev
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.

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

------
Robadob
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.

~~~
moron4hire
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/...](https://github.com/capnmidnight/Psychologist.js/blob/master/html5/js/input/MotionInput.js)

------
turshija
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.

~~~
kenbellows
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.

~~~
olefoo
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.

~~~
pkaye
Gyroscopes or acceleratometers? How many axis?

