Ambient Light EventsWylkon Cardoso

A W3C sempre nos surpreende com suas novas especificações e uma delas define dois novos eventos capazes de detectar mudanças de luz no ambiente.

Antes eles faziam parte da Sensors API, mas foram desmembrados em uma especificação independente de menor escopo.

Ambient Light Events

Conheça outros sensores que já podem ser controlados via Web através da documentação do W3C:

http://www.w3.org/2009/dap/

Ficou curioso né? Veja esse exemplo divertido abaixo:

http://goo.gl/0FVzqT

Com esses eventos conseguimos de maneira prática fazer uma página web ou um aplicativo reconhecer qualquer mudança na intensidade da luz.

E isso nos permite reagir a essas mudanças, por exemplo, alterando o contraste de cores da interface do usuário (UI) ou alterando a exposição necessária para tirar uma foto.

Quando o sensor de luz de um dispositivo detecta uma mudança no nível de luz, ele notifica o navegador dessa mudança, logo o navegador dispara um evento DeviceLightEvent que fornece informações sobre a intensidade da luz exata do ambiente.

Este evento pode ser capturado no objeto window usando o método addEventListener (passando o nome do evento devicelight) ou com window.ondevicelight.

Então você pode acessar a intensidade da luz expressa em “lux” através da propriedade DeviceLightEvent.value.

window.addEventListener('devicelight', function(event) {

var html = document.getElementsByTagName('html')[0];

if (event.value < 50) {

html.classList.add('darklight');html.classList.remove('brightlight');

} else {

html.classList.add('brightlight');html.classList.remove('darklight');

}

});

@media (light-level: normal) {

p { background: url("texture.jpg"); color: #333 }

}

@media (light-level: dim) {

p { background: #222; color: #ccc }

}

@media (light-level: washed) {

p { background: white; color: black}

}

O que está por vir?

http://wylkon.github.io/

Obrigado :D