22/9/2016

PredicthanddistancewiththedevicelightJavaScriptAPI

Back

Blog Resources

Predict hand distance with the device light

JavaScript API
Published last year by Mate Marschalko
I got excited about the device light event while I was exploring JavaScript hardware
and sensor accessing APIs. I thought I could try using it to approximate object
distance from the phone display. Before writing this article I asked the community
to try and guess the JavaScript technology used in the demo by publishing the
example video with no further explanation. I had great feedback and got the right
answer from Ian Brennan after two days.

devicelight
The device light event is a native JavaScript API accessing the light sensor built into
mobile phones and a few laptops. There are two events to use and lightlevel only
returns three states: dim, normal and bright. This is great but we are interested in
raw values. The other event called devicelight gives us exactly that. Here are the
examples outputting the returned values of both events:

if('ondevicelight'inwindow){
window.addEventListener('devicelight',function(event){
//lightlevelisreturnedinluxunits
console.log(event.value);
});
}
http://www.webondevices.com/predicthanddistancewithdevicelightjavascriptapi/

1/4

22/9/2016

PredicthanddistancewiththedevicelightJavaScriptAPI

if('onlightlevel'inwindow){

Back
Blog
window.addEventListener('lightlevel',function(event){

Resources

//lightvaluecanbedim,normalorbright
console.log(event.value);
Download FREE Ebook: Introduction to JavaScript Electronics
});
}

Trying out the difference device light events

I was happy with the data and I thought I could use it to build a simple theremin. To
generate the tone and change the frequency I used the WebAudio API. First I started
playing a constant tone:

varaudioCtx=new(AudioContext||webkitAudioContext)(),
osc=audioCtx.createOscillator();
osc.type='triangle';
osc.connect(audioCtx.destination);
osc.start(0);

Then I changed the frequency with the .frequency method:

osc.frequency.value=numberFromLightSensor;

Heres how the demo looked after:

Predict hand distance with the device light JavaScript API

http://www.webondevices.com/predicthanddistancewithdevicelightjavascriptapi/

2/4

22/9/2016

PredicthanddistancewiththedevicelightJavaScriptAPI

You might ask why we didnt use the Proximity API for this task. Firstly, the

Back sensor this API accesses only detects up to around 10 centimetres.

Blog Resources
proximity
Also, it
only returns near or far and not the actual distance in centimeters.
Download FREE Ebook: Introduction to JavaScript Electronics
Please note that both the devicelight and the proximity APIs are currently only
supported on Firefox.
Back to all

One thought on Predict hand distance with the device light

JavaScript API
Pingback: Can you guess the JavaScript tech used?

Leave a Reply
You must be logged in to post a comment.

Free Ebook
Step up your web developer career and learn hardware prototyping.
This ebook will get you started with JavaScript Arduino electronics development in a
couple of hours.
Email address

Send me the PDF

http://www.webondevices.com/predicthanddistancewithdevicelightjavascriptapi/

3/4

22/9/2016

PredicthanddistancewiththedevicelightJavaScriptAPI

Back

Blog Resources

Download FREE Ebook: Introduction to JavaScript Electronics

Web on Devices
Electronics Hacking with JavaScript and other Web Technologies
Twitter

Facebook

Mate Marschalko
Front-end Web Developer, Creative Technologist and Maker. Builds Internet connected devices for the Internet of
Things.

All rights reserved | Contact at hello@webondevices.com

http://www.webondevices.com/predicthanddistancewithdevicelightjavascriptapi/

4/4