BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Ambient Light and Proximity Enter the DOM

Ambient Light and Proximity Enter the DOM

This item in japanese

Web development has classically been confined to the purview of a limited browser, which proffered document level manipulation and handling user interactions. The W3C has begun to lift this barrier by introducing a series of APIs which allow developers to interact with a device and a variety of peripherals. Two of these specifications, "Proximity Events" and "Ambient Light Events" have entered their Last Call stages as drafts and in the coming months will enter the Candidate Recommendation stage wherein implementations will begin to appear.

The "Proximity Events" and "Ambient Light Events" specifications define a means to receive events from a proximity sensor and light sensor, respectively, through JavaScript and HTML5's event handlers.

As currently defined, the "Proximity Events" specification defines two interfaces the DeviceProximityEvent, which provides developers with information about the devices distance from an object, and the UserProximityEvent, which provides the developer with browser and platform-specific notification of a nearby object's detection. The DeviceProximityEvent exposes three read-only attributes:

  • min - the minimum sensing distance in centimeters

  • max - the maximum sensing distance in centimeters

  • value - the proximity of a nearby object in centimeters

The object is passed to a special callback, defined in the HTML5 specification as an event handler, which takes an event as its argument.

// Event Handler
deviceProximityHandler = function(event) {
  document.writeln('min = ', event.min,
                   'max = ', event.max,
                   'value = ', event.value); // e.g. => min = 0 max = 5 value = 5
  document.write('<br>');

}

// Assigning the Event Handler to a Listener
window.addEventListener('deviceproximity', deviceProximityHandler);

The UserProximityEvent is a bit less "exciting" and provides access to the boolean attribute near for object proximity indication:

userProximityHandler = function(event) {
  document.write('near = ', event.near); // e.g. => near = true/false
  document.write('<br>');
}

window.addEventListener('userproximity', userProximityHandler);

As currently defined, the "Ambient Light Events" specification defines two interfaces as well. The DeviceLightEvent provides a value attribute with the ambient light level in lux. The LightLevelEvent provides information about the ambient light levels in terms three ranges "dim" (below 50 lux), "normal", and "bright" (above 10000 lux) as defined by the User Agent.

deviceLightHandler = function(event) {
  document.write('value = ', event.value); // e.g. => value = 10/100/1000
  document.write('<br>');
}

window.addEventListener('devicelight', deviceLightHandler);

Currently, the DeviceProximityEvent, UserProximityEvent, and DeviceLightEvent are available in Firefox Mobile Beta versions 15 and up. Support for ambient light sensors in Firefox Beta for Windows may be arriving soon as well. Remember, that as sample implementations, the features provided are subject to significant change. For example, Mozilla's current implementation of DeviceLightEvent provides access to a min and max which are no longer defined in the specification.

The "Proximity Events" and "Ambient Light Events" are the most mature branches from the now-divided Sensor API Specification that ambitiously sought to define access to temperature, pressure, humidity, and noise as well. The breadth of those aspirations gives developers a glimpse into the tools they will be afforded to interact with a user's environment with tomorrow's DOM. Developers are encouraged to give feedback regarding these APIs especially during the Last Call. Join the conversation by subscribing to the Device APIs Working Group's public mailing list.

Demonstrations of these developing APIs are available on Github.

Rate this Article

Adoption
Style

BT