Windows* 8 Store App - Inclinometer Sample

by Lana N Lindberg, Software Applications Engineer for the Intel® Atom ™ Processor

Download Article

Download Windows* 8 Store App - Inclinometer Sample [PDF 399KB]


This sample is a Windows Store app that shows how to register notifications from the inclinometer sensor in the new Windows 8 environment and use the reported values to modify a 3D object on the display. It shows how to use the inclinometer sensor to display pitch, roll, yaw values based on the reported angles of slope, elevation and depression that correspond, respectively, to the rotation angles around the x,y,z axes of the device with respect to gravity. Writing an app for this sensor is not necessarily new to creators of phone-based applications, but is entirely new to creators of traditional desktop applications. However, with Microsoft adding support for sensors in their Windows 8 OS and Intel delivering more and more platforms with integrated sensors, the creators of the traditional desktop applications can now add support for sensors to their existing applications and create Windows Store app versions of current and new applications that use sensors.

Inclinometer Application Code and Explanations

This Inclinometer app consists of JavaScript* code and HTML. JavaScript code starts the app, connects to the default inclinometer and reads pitch, roll, and yaw degrees. HTML displays the x,y,z axes and pitch, roll, and yaw dials on the screen.

JavaScript functions

onActivated() event

When the Inclinometer app is launched, the activated event is raised. It connects to the default inclinometer, sets the change sensitivity for the inclinometer based on the report interval, and registers an event listener on the image.

     app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==     
                                     activation.ApplicationExecutionState.terminated) {
                var minimumReportInterval;
                var reportInterval;

		  // Connect to default inclinometer
                inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();

                // Report interval supported by the sensor
                minimumReportInterval = inclinometer.minimumReportInterval;
                reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
                inclinometer.reportInterval = reportInterval;

                // Set the event handler
                inclinometer.addEventListener("readingchanged", onDataChangedIncline);




This function is called to draw dial faces and arrows.

// Draw faces and arrows
    function draw(pitch_degrees, roll_degrees, yaw_degrees) {
        //clear canvas
        ctx.clearRect(0, 0, 1200, 600);
        //Draw the inclinometer faces
        ctx.drawImage(roll, 0, 0);;
        ctx.translate(100, 100);
        ctx.rotate(roll_degrees * (Math.PI / 180)); //roll
        //Draw the arrows	
        ctx.drawImage(roll_needle, -100, -100);

        ctx.drawImage(pitch, 300, 0);;
        ctx.translate(300, 100 - (pitch_degrees/2)); //pitch 
        //draw arrow
        ctx.drawImage(pitch_needle, 0, -100);

        ctx.drawImage(yaw, 600, 0); //400;
        ctx.translate(100 - (yaw_degrees/2), 100); //yaw
        ctx.drawImage(yaw_bubble, 591, -100);


This function is called each time a inclinometer event is fired by the driver. It reads pitch, roll, and yaw and does a 3D transformation of the inclinometer on the screen.

    function onDataChangedIncline(e) {
        var reading = e.reading;
        var pitch = reading.pitchDegrees;
        var roll = reading.rollDegrees;
        var yaw = reading.yawDegrees;

        pitch_degrees = reading.pitchDegrees.toFixed(2);
        roll_degrees = reading.rollDegrees.toFixed(2);
        yaw_degrees = reading.yawDegrees.toFixed(2);

        draw(pitch_degrees, roll_degrees, yaw_degrees);

        id('txtXAngle').innerHTML = pitch.toFixed(2);
        id('txtYAngle').innerHTML = roll.toFixed(2);
        id('txtZAngle').innerHTML = yaw.toFixed(2);


This function loads the images.

    function initialize() {
        var canvas = document.getElementById('inclinometer');
        if (canvas.getContext('2d')) {
            ctx = canvas.getContext('2d');
            //Load the pitch image		
            pitch_needle = new Image();
            pitch_needle.src = 'images/pitch_needle.png';
            pitch = new Image();
            pitch.src = 'images/pitch_yaw.png';
            //Load the roll image	
            roll_needle = new Image();
            roll_needle.src = 'images/roll_needle.png';
            roll = new Image();
            roll.src = 'images/roll.png';
            //Load the yaw image
            yaw_bubble = new Image();
            yaw_bubble.src = 'images/yaw_bubble.png';
            yaw = new Image();
            yaw.src = 'images/yaw.png';
        } else {
            alert("Canvas not supported!");


This function is invoked within onDataChanged to retrieve the given identifier from the HTML document.

function id(elementId) {
    return document.getElementById(elementId);


Starts the application.

HTML functions

We use HTML to output the x, y, z, velocity values for the Inclinometer.

<!DOCTYPE html>
    <meta charset="utf-8" />

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- Inclinometer references -->
    <link href="css/default.css" rel="stylesheet" />
    <script type="text/javascript" src="/js/default.js"></script>
<body role="application">
    <header aria-label="Header content" role="banner">
        <h1 style="margin-bottom: 100px;">
            <span class="pagetitle" style="position: absolute; left: 360px; top: 
        <h2 style="margin-bottom: 50px;">
            <span class="pagetitle" style="position: absolute; left: 180px; top: 
            <span class="pagetitle" style="position: absolute; left: 470px; top: 
            <span class="pagetitle" style="position: absolute; left: 780px; top: 
        <button class="win-backbutton" style="position: absolute; right: 50px; top: 20px" 
aria-label="Back" disabled></button>
    <div id="inclinometer_div">
                    <div class="item" id="inclinometer_status">
                        <br />                    
                        Pitch: <a id="txtXAngle">no data</a>
                        <br />
                        Roll: <a id="txtYAngle">no data</a>
                        <br />
                        Yaw: <a id="txtZAngle">no data</a>
                        <br />
                        <br />
                    <canvas id="inclinometer" width="1200" height="600"></canvas> 



Basic Lifecycle

The application starts by connecting to the default inclinometer. It reads rotation angles around the x,y,z axes and passes the values to the 3D transform. The user can move the device in different directions and observe the pitch, roll, yaw values changing based on rotation angles around the x,y,z axes.

Helpful Links

Any software source code reprinted in this document is furnished under a software license and may only be used or copied in accordance with the terms of that license.

Intel, the Intel logo, and Atom are trademarks of Intel Corporation in the US and/or other countries.

Copyright © 2013 Intel Corporation. All rights reserved.

*Other names and brands may be claimed as the property of others.

PDF icon windowsinclinometerwhitepaper.pdf399.32 KB