Ambient Light Events- Wylkon Queiroz

Embed Size (px)

Text of Ambient Light Events- Wylkon Queiroz

  • Ambient Light EventsWylkon Cardoso

  • A W3C sempre nos surpreende com suas novas especificaes e uma delas define dois novos eventos capazes de detectar mudanas de luz no ambiente.

    Antes eles faziam parte da Sensors API, mas foram desmembrados em uma especificao independente de menor escopo.

    Ambient Light Events

  • Conhea outros sensores que j podem ser controlados via Web atravs da documentao 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 prtica fazer uma pgina web ou um aplicativo reconhecer qualquer mudana na intensidade da luz.

    E isso nos permite reagir a essas mudanas, por exemplo, alterando o contraste de cores da interface do usurio (UI) ou alterando a exposio necessria para tirar uma foto.

  • Quando o sensor de luz de um dispositivo detecta uma mudana no nvel de luz, ele notifica o navegador dessa mudana, logo o navegador dispara um evento DeviceLightEvent que fornece informaes sobre a intensidade da luz exata do ambiente.

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

    Ento voc pode acessar a intensidade da luz expressa em lux atravs 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