Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Quickstart: Determining pitch, roll, and yaw with the inclinometer (HTML)

Applies to Windows and Windows Phone

You can use the inclinometer to determine pitch, roll, and yaw with an app written in JavaScript. One common example is a flight simulator, which maps the three axes of the inclinometer (X, Y, and Z) to the elevator, aileron, and rudder inputs of the aircraft.

Objective: After completing this quickstart you will understand how to use the inclinometer to detect changes in movement.

Prerequisites

You should be familiar with HTML, JavaScript, and events.

The device or emulator that you're using must support an inclinometer.

Time to complete: 15 minutes.

Instructions

1. Open Microsoft Visual Studio

Open an instance of Microsoft Visual Studio.

2. Create a new project

Create a new project, choosing a Blank App from the JavaScript/Store Apps project types.

3. Replace the JavaScript code

Open your project's Default.js file and replace the existing code with the following.



// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var inclinometer;

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

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

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

    var app = WinJS.Application;

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();

            // Choose a report interval supported by the sensor
            var minimumReportInterval = inclinometer.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            inclinometer.reportInterval = reportInterval;

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

            WinJS.UI.processAll();
        }
    };

    app.start();
})();



4. Add the HTML for the apps

Open the default.html file for the Windows and Windows Phone projects, and copy the following HTML into inside the BODY tags of the file.



    <div class="item" id="scenario1Output">
       X: <a id="txtXAngle">no data</a>
       <br />
       Y: <a id="txtYAngle">no data</a>
       <br />
       Z: <a id="txtZAngle">no data</a>
       <br />
    </div>


5. Build, deploy and run the app

Press F5 or select Debug > Start Debugging to build, deploy, and run the app.

Once the app is running, you can change the accelerometer values by moving the device or using the emulator tools.

6. Stop the app

  1. Press ALT+Tab to return to Visual Studio.
  2. Press Shift+F5 or select Debug > Stop Debugging to stop the app.

Summary and next steps

The previous example demonstrates how little code you'll need to write in order to integrate inclinometer input in your app.

The app establishes a connection with the default inclinometer in the onactivated function. This occurs on the following line.


inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();

The new inclinometer data is captured in the onDataChanged function. Each time the sensor driver receives new data from the sensor, it passes the values to your appl by using this function (or event handler). The app registers this event handler on the following line.


inclinometer.addEventListener("readingchanged", onDataChanged);

These new values are written to the screen via updates to the DOM elements shown below.


   <div class="item" id="scenario1Output">
       X: <a id="txtXAngle">no data</a>
       <br />
       Y: <a id="txtYAngle">no data</a>
       <br />
       Z: <a id="txtZAngle">no data</a>
       <br />
    </div>

The app establishes the report interval within the onactivated function. This code retrieves the minimum interval supported by the device and compares it to a requested interval of 16 milliseconds (which approximates a 60-Hz refresh rate). If the minimum supported interval is greater than the requested interval, the code sets the value to the minimum. Otherwise, it sets the value to the requested interval.


var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;


If you're writing a game app, the next steps would typically involve integrating inclinometer input with graphic output.

For example, if you were writing a flight-simulator app, you would use the Z-axis values to alter the rudder inputs, you would use the X-axis values to alter elevator inputs, and, you would use the Y-axis values to alter aileron inputs.

Related topics

Inclinometer class
Inclinometer Sample

 

 

Show:
© 2014 Microsoft