BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

Ambient Light and Proximity Enter the DOM

| by Faraz Yashar Follow 0 Followers on Jan 14, 2013. Estimated reading time: 2 minutes |

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 Stage
Style

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.

Tell us what you think

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

Email me replies to any of my messages in this thread

2 places to amend? by Yang Sai

"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

Changes made! Thanks!

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

Email me replies to any of my messages in this thread

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

Email me replies to any of my messages in this thread

2 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT