Using light sensors

Ambient Light Events give a web application access to a device's ambient light sensor to detect changes in light intensity.

How Does it Work?

When the light sensor of the device detects a change in light intensity, the browser is notified of the change and fires a DeviceLightEvent event. The event gives information about the light intensity of the device's environment.

The DeviceLightEvent provides a value attribute with light intensity in lux which is generally treated as shown below.

It uses the addEventListener method of the window object.

window.addEventListener("devicelight", function (event) {

// Read out the lux value

var luminosity = event.value;

alert(luminosity);

});

Example:

window.addEventListener('devicelight', function(event) {

var bodyBg= document.body.style;

//event.value is the lux value returned by the sensor on the device
if (event.value < 100) {

alert('Hey, you! You are working in a dark environment');

bodyBg.backgroundColor="lightgrey";

} else {

bodyBg.backgroundColor="#fff";

}

});

This example shows how the API can actually be used in the wild. If your app contains a lot of white in the UI, it is usually beneficial to the user to change the UI to a darker color in a darker environment. The code alerts the user that they are working in a dark environment and then changes the page's background to a darker color.

Specifications

Browser compatibility

References:

• Ambient Light Events and JavaScript detection : Robert Nyman
• Using light events