Fri Nov 23 2012

This article is Day #23 in a series called 31 Days of Windows 8.  Each of the articles in this series will be published for both HTML5/JS and XAML/C#. You can find additional resources, downloads, and source code on our website.Compass

Today, we're going to talk about the compass. While we've talked about one sensor in the past (Orientation Sensor), this is the first article of many to come focused just on the supported sensors. As a web developer this is really something completely new for me as it's really outside the bounds of what we might typically do. Having said our web world is changing ever so fast.

Now if you've ever done any phone development then this isn't anything new as our phones ( especially the ones on the shelf today ) have had these capabilities. If you have done any Windows Phone development previously, you might have read Jeff's article on the Windows Phone compass, which provides magnetic and true north headings, as well as X, Y, and Z rotation data.

In Windows 8 this is different and provides significantly less data from the compass sensor.  In fact, we only get the values related to our heading, with no consideration for rotation data.  In addition, you're going to find that since we're building apps for Windows 8, there's going to be a wide variety of sensors we'll encounter. Now having said that, we can get rotation from the orientation sensor which we've already talked about on day #2. I would also check out this quick start on retrieving the quaternion and rotation matrix if you're interested more in rotation.

Ok, on with the show.

Writing Some Code to Access the Compass

The compass, like many of the sensors we will cover over over the next few days, the compass is actually very accessible and easy to use.  With a few lines of code, and one event handler, we can gather rich data from our user's device very quickly.  Here's is all the code I needed to to start getting real-time data from my simple compass app:

    var _trueNorth, _magNorth, _timestamp;

    function onReadingChanged(e) {
        var newReading = e.reading;
        _timestamp.innerText = newReading.timestamp;
        _magNorth.innerText = newReading.headingMagneticNorth.toFixed(2);

        if (newReading.headingTrueNorth != null) {
            _trueNorth.innerText = reading.headingTrueNorth.toFixed(2);

    function startCompass() {
        var compass = Windows.Devices.Sensors.Compass.getDefault();

        if (compass) {
            var minimumReportInterval = compass.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            compass.reportInterval = reportInterval;

            compass.addEventListener("readingchanged", onReadingChanged);

    function getDomElements() {
        _trueNorth = document.querySelector("#trueNorth");
        _magNorth = document.querySelector("#magNorth");
        _timestamp = document.querySelector("#timestamp");

    app.onloaded = function () {

To explain the code above, in my startCompass() method, I try to initialize my Compass object, and if it's not null ( meaning there is a compass sensor on the machine ), I create an event handler for each time that the reading of the compass changes.  (Unless the user's device is sitting completely still, it's likely you'll consistently get new readings.)  In the onReadingChanged event handler, I then assign our three values, HeadingMagneticNorth, HeadingTrueNorth, and Timestamp to an element I declared in our markup.

That's it.  As you probably saw, however, most of the sensors you're going to encounter will not provide ( as mine didn't either ) a HeadingTrueNorth _value, so relying on the _HeadingMagneticNorth is going to be a more reliable value for you.

Finally, both of the Heading values are measured in degrees relative to their associated heading.  This means that you'll see a range of values from 0 to 360, with zero being the value headed directly north.


This was a quick but exhaustive look at the Compass in Windows 8.  We saw that you can easily access the Compass data by using an event handler, but that we receive a limited amount of data from this sensor, and your mileage will vary from device to device.

If you would like to download the sample app featured in this article, click the icon below:


Tomorrow, we're going to look at the light sensor, and how we can manipulate our application to take advantage of knowing if the user is sitting in a light or dark room.