Esta nova especificação da W3C define dois novos eventos capazes de detectar mudanças na iluminação do ambiente: os Ambient Light Events. Antes eles faziam parte da Sensors API, mas foram desmembrados em uma especificação independente de menor escopo. E será com estas novas APIs que vamos nos divertir hoje.
Experimento
A idéia desta nova API é bem simples: medir a iluminação do ambiente. Para melhor ilustrar o uso e entendimento da API, fiz um experimento. Infelizmente, no momento que escrevo este post, apenas o Firefox 22 do Mac implementa os eventos Ambient Light no desktop.
No experimento abaixo, a lampâda foi totalmente feita com CSS3 (e muita gambiarra). Além disso, ela também responde a mudanças de iluminação do ambiente. Experimente apagar a luz do seu quarto ou cobrir o sensor de luminosidade do seu Mac (dica: ele fica na câmera).
Para quem não pôde rodar o experimento, eis o que acontede: quando o ambiente fica escuro a luz acende e o background fica preto; quando há luminosidade suficiente, a luz se apaga e o background volta a ser claro. Como de praxe, o experimento está disponível no GitHub e pull requests são sempre bem-vindos.
Light Level Event
Este novo evento descreve a iluminação do ambiente em três possíveis estados: dim, normal e bright. Toda vez que houver mudança na iluminação que acarrete em uma mudança de estado entre os que foram definidos anteriormente, o evento é disparado.
Cabe aos navegadores implementarem o intervalo em lux (medida de iluminação) que define cada um dos três estados. Porém a especificação da W3C recomenda que o dim corresponda a ambientes com iluminação menores que 50 lux — escuro o suficiente para que uma luz produzida por um fundo branco seja uma distração —, normal corresponda a um valor entre 50 e 10.000 lux — uma sala de escritório, o nascer ou pôr do sol em uma dia claro — e o bright a uma iluminação acima de 10.000 lux — algo como luz solar direta.
Neste evento temos o event handler onlightevent e o event handler event type lightlevel. E são eles que usamos para executar nossa lógica toda vez que o evento for disparado. Lembrando que, usando o event handler, apenas uma função pode ser disparada a cada evento. Caso seja usado o event handler event type, pode se usar quantas funções forem necessárias como listeners do evento.
// event handler
window.onlightlevel = function(event) {
console.log(event.value)
}
// event handler event type
window.addEventListener('lightlevel', function(event) {
console.log(event.value)
})
Device Light Event
Este evento é bem similar ao Light Event, a diferença está na granularidade. Com o Light Event temos apenas três possíveis estados (dim, normal e bright). Já no Device Light temos acesso direto ao valor de iluminação do ambiente expresso em lux.
Ele também expõe uma interface comum de evento, com o event handler ondevicelight e o event handler event type devicelight.
// event handler
window.ondevicelight = function(event) {
console.log(event.value)
}
// event handler event type
window.addEventListener('devicelight', function(event) {
console.log(event.value)
})
Suporte | |||||
|---|---|---|---|---|---|
window.ondevicelight | -- | -- | 22.0* | -- | -- |
window.onlightlevel | -- | -- | -- | -- | -- |
Infelizmente, até o momento, o Firefox é o único navegador que implementa essa nova especificação no desktop. E de forma muito restrita ainda, pois só roda em Macs e apenas o evento Device Light de fato funciona.
if ('ondevicelight' in window) {
// seu navegador dá suporte ao evento *Device Light*
})
if ('onlightlevel' in window) {
// seu navegador dá suporte ao evento *Light Level*
})
Caso queiram testar programaticamente se o navegador onde seu código está sendo executado dá suporte aos novos eventos, basta verificar pela propriedade ondevicelight ou onlightlevel do objeto window.