InfoQ Homepage News Ambient Light and Proximity Enter the DOM

Ambient Light and Proximity Enter the DOM


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


// 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

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

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.

We need your feedback

How might we improve InfoQ for you

Thank you for being an InfoQ reader.

Each year, we seek feedback from our readers to help us improve InfoQ. Would you mind spending 2 minutes to share your feedback in our short survey? Your feedback will directly help us continually evolve how we support you.

Take the Survey

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • 2 places to amend?

    by Yang Sai,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    "the DeviceProximityEvent, which provides developers with information about the device's distance form an object" <-- "form" should be "from".
    "min - the maximum sensing distance in centimeters
    max - the minimum sensing distance in centimeters"<--is this supposed to be like this?

  • Re: 2 places to amend?

    by Faraz Yashar,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Changes made! Thanks!

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p


Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.