HTML5 Zone is brought to you in partnership with:

Clark is a web evangelist for Microsoft based in Illinois. A Chicago native who can’t spell, Clark as a kid actually made his money building cars, getting grease under his nails. That art of building would later lead him to software development where he drinks the Web Development Kool-Aid. Writing code is what keeps Clark awake at night, while continually working on his craft and rapping with others over a few cold CORS. You can hear Clark muse about software on his podcast Developer Smackdown, or find his family cruising around in a 1968 Camaro SS. Clark is a DZone MVB and is not an employee of DZone and has posted 32 posts at DZone. You can read more from them at their website. View Full User Profile

31 Days of Windows 8 for HTML5 | Day #25: Accelerometer

12.05.2012
| 3119 views |
  • submit to reddit

This article is Day #25 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.

advertisementsample

Today, we are taking a look at another sensor that we might find in a Windows 8 device: the accelerometer.  With the accelerometer, we can measure the movement of the user’s machine. If you’re looking for more information about what exactly an accelerometer is check out this. With an accelerometer we can do things like detect the orientation of the device and even sense if a device is falling.

The X axis runs horizontally across the device.  The Y axis runs vertically across the device.  The Z axis runs immediately through the device, from front to back.  Here’s an image to help illustrate, using a Windows Phone as the example (courtesy of http://www.andybeaulieu.com/):

25-Accelerometer

In simpler terms, we’re measuring the g-forces applied to those three axes.  Because of this, when we lay a Windows 8 tablet flat on a table, we get a Z axis value of –1, because there is one “g” (one unit of gravity) exerting itself on the negative size of the Z axis.  In the same way, if we propped our device up (similar to the phone in the photo) so that the bottom of the device is sitting on the table, we would get a Y axis value of –1.

Working with the accelerometer is very similar to working with the other sensors. Just a few simple steps and we’re getting data.

  • Initialize the Sensor.
  • If it’s available,
    • create a readingchanged event handler.
    • create a shaken event handler
  • In the event handlers, grab the data from the sensor and write it to the screen.

Here’s my the entirety of my code and it looks scary similar to that of the other sensors.

var _x, _y, _z, _wasShaken;

    function onReadingChanged(e) {
        _x.innerText = e.reading.accelerationX;
        _y.innerText = e.reading.accelerationY;
        _z.innerText = e.reading.accelerationZ;
    }

    function onShaken(e) {
        _wasShaken.innerText = e.timestamp;
    }

    function getDomElements() {
        _x = document.querySelector("#x");
        _y = document.querySelector("#y");
        _z = document.querySelector("#z");
        _wasShaken = document.querySelector("#shaken");
    }

    function startAccelerometer() {
        var acc = Windows.Devices.Sensors.Accelerometer.getDefault()

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

            acc.addEventListener("readingchanged", onReadingChanged);
            acc.addEventListener("shaken", onShaken)
        }
    }

    app.onloaded = function () {
        getDomElements();
        startAccelerometer();
    }

Again, no real surprises here. We get to our data in the same basic was as we did with the other sensors.  Now the accelerometer sensor did introduce a new event called shaken. This event fires when a user shakes their machine In writing this article I was using the original build tablet for testing. I shook the machine but sadly couldn’t seem to get the event to fire. Just when I started to think I didn’t have a sensor which supported that event, I’d tossed down the machine down onto the couch and all of the sudden it fired. Turns out, I just wasn’t holding it right.

Summary

Today we briefly looked at getting data from our accelerometer. Working with each of the different sensors is all very similar.  Ultimately, how you use this data is where your real creativity comes in and I’m looking forward to hearing how you’ll use it in your app.

If you’d like to download my working sample that uses the code from this article, click the icon below:

 downloadHTML

Tomorrow, we’re going to look at the Gyrometer.  See you then!

downloadTheTools

Published at DZone with permission of Clark Sell, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)