Quickstart: Determining device orientation (HTML)

You can use the SimpleOrientation sensor to determine device orientation with an app written in JavaScript.

Rather than returning properties like "portrait-up" or "landscape left", this sensor returns a rotation value: "Not rotated", "Rotated90DegreesCounterclockwise", and so on. The following table maps common orientation properties ("Portrait Up", etc.) to the corresponding sensor reading.

Orientation Corresponding Sensor Reading
Portrait Up NotRotated
Landscape Left Rotated90DegreesCounterclockwise
Portrait Down Rotated180DegreesCounterclockwise
Landscape Right Rotated270DegreesCounterclockwise

 

Objective: After completing this quickstart you will understand how to use the SimpleOrientation sensor to detect device orientation.

Prerequisites

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

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

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:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var orientationSensor;
    var app = WinJS.Application;

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

    function onOrientationChanged(e) {
        switch (e.orientation) {
            case Windows.Devices.Sensors.SimpleOrientation.notRotated:
                id('txtOrientation').innerHTML = "Not Rotated";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated90DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 90";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated180DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 180";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated270DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 270";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.faceup:
                id('txtOrientation').innerHTML = "Face Up";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.facedown:
                id('txtOrientation').innerHTML = "Face Down";
                break;
            default:
                id('txtOrientation').innerHTML = "Undefined orientation " + e.orientation;
                break;
        }
    }



    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Retrieve the default orientation sensor
            orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

            // Set the event handler
            orientationSensor.addEventListener("orientationchanged", onOrientationChanged);
            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">
    Orientation: <a id="txtOrientation">no data</a>
</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 simple orientation-sensor input in your app.

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

orientationSensor = Windows.Devices.Sensors.SimpleOrientationSensor.getDefault();

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

orientationSensor.addEventListener("orientationchanged", onOrientationChanged);

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

<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

You might use the faceup and facedown values to determine when to save state information and shut down your app.

You can use the other values to change screen orientation.

Note that the faceup and facedown values are mutually exclusive from the rotation values.

SimpleOrientation Sensor class

SimpleOrientation Sensor Sample