Ambient Light Events and JavaScript detection

I think that one of the most interesting things with all WebAPIs we’re working on, is to interact directly with the hardware through JavaScript, but also, as an extension to that, with the environment around us. Enter Ambient Light Events.

The idea with an API for ambient light is to be able to detect the light level around the device – especially since there’s a vast difference between being outside in sunlight and sitting in a dim living room – and adapt the user experience based on that.

One use case could be to change the CSS file/values for the page, offering a nicer reading experience under low light conditions, reducing the strong white of a background, and then something with more/better contrast for bright ambient light. Another could be to play certain music depending on the light available.

Accessing device light

Working with ambient light is quite simple. What you need to do is apply a listener for a devicelight event, and then read out the brightness value.

It comes returned in the lux unity. The lux value ranges between low and high values, but a good point of reference is that dim values are under 30 lux, whereas really bright ones are 10,000 and over.

window.addEventListener("devicelight", function (event) {
    // Read out the lux value
    var lux = event.value;
    console.log(lux);});

Web browser support

Ambient Light Events are currently supported in Firefox on Android, meaning both mobile phones and tablets, and it’s also supported in Firefox OS. On Android devices (the ones I’ve tested), the sensor is located just right to the camera facing the user.

It is also a W3C Working Draft, following the type of other similar events, such as devicemotion, so we hope to see more implementations of this soon!

Demo

Dmitry Dragilev and Tim Wright recently wrote a blog post about the Ambient Light API, with this nice demo video:

You can also access the demo example directly, and if you test in low light conditions, you’ll get a little music. Remember to try it out on a supported device/web browser.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


13 comments

  1. Alex

    Haha. Very cool example of the API in that video! Nice work

    April 8th, 2013 at 07:51

    1. Robert Nyman [Editor]

      Thanks, glad you like it!

      April 8th, 2013 at 10:25

  2. maxw3st

    Thanks for the post. One minor sp. point. In the code comments “//Red out the lux value”. I think you want “read” there perhaps. Is it accurate enough for setting exposure/f-stop on a camera?

    April 8th, 2013 at 10:19

    1. Robert Nyman [Editor]

      Ha! Thanks, that was an interesting missing letter. :-)
      Not sure about setting exposure and such based on it, and exactly how granular it is (since it will be device dependent as well). Try it out – I’d be happy to hear what you think!

      April 8th, 2013 at 10:24

  3. boblemarin

    It would be great to be able to use this feature straight from CSS, in a media query. To automatically display a high contrast version of a website when in direct sunlight.

    April 8th, 2013 at 10:24

    1. Robert Nyman [Editor]

      Yep, it’s an interesting use case!

      April 8th, 2013 at 10:37

      1. Carlos Martins

        It would need to be dynamic, in case people moved inside/outside while reading it. ;)

        April 8th, 2013 at 11:49

  4. thinsoldier

    Works on my nexus. But why doesn’t the song play on desktop aurora or nightly?

    April 8th, 2013 at 10:36

    1. Robert Nyman [Editor]

      Since it’s only supported in Firefox on Android and Firefox OS, as mentioned in the post.

      April 8th, 2013 at 10:39

  5. Paul Lynch

    This is an interesting idea, but don’t most screens have a brightness control already? Why would you want to have each website the user views implement that?

    April 8th, 2013 at 13:14

    1. Robert Nyman [Editor]

      It’s about much more than brightness, though. If you want to adapt the visual presentation, sound, video etc in any way depending on the environment, you can now do that.

      April 8th, 2013 at 23:54

  6. Landpaddle

    Ideally, a product with this integrated should have an option to turn it *off*.

    Or at least, two sliders to adjust minimum and maximum brightness. I’d prefer to keep at least some level of manual control over what my electronics do, thank you very much! :)

    Otherwise, very cool. You’d think the brightness would go up in outdoor conditions, since glare can make a screen unreadable otherwise, and a dark room tends to render bright displays painful on the eyes. Time will tell how this turns out.

    April 9th, 2013 at 03:09

    1. Robert Nyman [Editor]

      You can’t change the brightness with this API. Just know how bright the current conditions are.

      April 9th, 2013 at 06:52

Comments are closed for this article.