BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

Ambient Light and Proximity Enter the DOM

by Faraz Yashar on Jan 14, 2013 |

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.

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

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT