Quickstart: Responding to changes in lighting (HTML)

  • Article

You can use the ambient light sensor to detect changes in lighting with an app written in JavaScript.

The Windows.Devices.Sensors namespace includes support for a LightSensor object that apps can use to retrieve the current illuminance as a LUX value. For more information about LUX values, refer to the Sensor API documentation on MSDN.

Objective: After completing this quickstart you will understand how to use a light sensor to retrieve the current illuminance as a LUX value.

Prerequisites

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

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

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 lightSensor;

    // This function is invoked within onDataChanged to
    // retrieve the given identifier from the HTML document.
    function id(elementId) {
        return document.getElementById(elementId);
    }

    // This function is called each time an accelerometer event
    // is fired by the driver.
    function onDataChanged(e) {
        id('eventOutputIlluminance').innerHTML = e.reading.illuminanceInLux.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) {
            if (lightSensor == null) {
                lightSensor = Windows.Devices.Sensors.LightSensor.getDefault();

                // Set the report interval
                var minimumReportInterval = lightSensor.minimumReportInterval;
                var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
                lightSensor.reportInterval = reportInterval;

                // Establish the event handler
                lightSensor.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">
    Illuminance: <a id="eventOutputIlluminance">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 light-sensor input in your app.

In this example, new sensor data is captured in the onDataChanged function. Each time the sensor driver detects a change in the light-sensor readings, it passes the new values to your app by using this function (or event handler).

    function onDataChanged(e) {
        id('eventOutputIlluminance').innerHTML = e.reading.illuminanceInLux.toFixed(2);
    }

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

<div class="item" id="scenario1Output">
    Illuminance: <a id="eventOutputIlluminance">no data</a>
</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 simple app, the next steps would typically involve integrating sensor input with graphic output.

For example, you could create a simple text-reader app that responds to changes in lighting by increasing or decreasing the contrast between the background and foreground colors.

LightSensor class

LightSensor Sample