DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
¡Actualizado el 15-02-2016!

Podemos detectar el nivel de luz ambiental obtenida por el sensor de luz del dispositivo con JavaScript; de esta forma es posible configurar las aplicaciones segun el nivel de luz presente en el ambiente; por ejemplo, es posible agregar un modo nocturno o un modo diurno según el nivel de luz precente en el ambiente; estos niveles estan medidos en Lux.

Las posibilidades de configuración y personalización que puede tener una aplicación web según el nivel de luz ambiental presente son las mismas ofrecidas por la infinidad de opciones que tenemos con JavaScript; el único límite es nuestra imaginación.

La Fundación Mozilla dice: "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."

Podemos resumirlo en español como: "La unidad lux devuelta oscila entre valores bajos y altos; los valores oscuros son menores de 30 lux mientras que los muy brillantes son 10.000 y superiores."

Evento de la API de DeviceLightEvent

Tenemos que aplicar un evento llamado DeviceLightEvent; este evento es desencadenado cuando el navegador detecta variaciones en el nivel de la luz.

Desde el evento podemos consultar un valor medido en Lux el cual es el que nos interesa verificar para detectar variaciones o el nivel de lux actual:

Lux "Unidad de medida para la iluminación según una función de luminosidad"
window.addEventListener("devicelight", function (event) {
    var lux = event.value;?    //*** hacemos algo
});
Al día que se escribió y actualizó este artículo esta tecnología todavía es una Candidate Recommendation en la W3C, por lo tanto no es soportada por muchos navegadores; según Mozilla, su navegador es el unico que soporta esta tecnología a partir de la versión 22 de su navegador web de escritorio y para la versión 15 de Firefox Movil (Android y Firefox OS).

De cualquier forma, vale la pena probar y conocer esta tecnología con tantas posibilidades que nos puede ofrecer y su sencillez de emplear; veamos un pequeño ejemplo que recuerda debes de probar en una versión de Firefox móvil actualizado:

window.addEventListener("devicelight", function(event) {
    var lux = event.value;

    // lux 

Un ejemplo muy puntual que presenta uno de los múltiples usos que puede tener esta API; el experimento anterior consiste en cambiar los colores claros de la interfaz al detectar poca luminosidad (ambiente oscuro) en el ambiente a través de la carga de un CSS distinto que se activa/desactiva al detectar ciertos valores en la luminosidad de la luz.

Tenemos un tag link con id=pagestyle en donde referenciamos una pequeña hoja de estilo, ahora bien:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Librería para gestos

Librería para gestos

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Eye Candy

Eye Candy

Algunos artículos que te pueden interesar

Primeros pasos con las Cookies en JavaScript

Primeros pasos con las Cookies en JavaScript

JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.

Andrés Cruz 17-12-2015

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017

¿Cómo crear una aplicación en la Graph API de Facebook?

¿Cómo crear una aplicación en la Graph API de Facebook?

La Graph API de FAcebook es la forma en la que se organiza esta red social Facebook y en esta entrada veremos cómo crear una aplicación en FaceBook que no es más que un grupo de configuraciones realizadas en la API.

Andrés Cruz 13-01-2016