Podemos detectar el nivel de luz ambiental obtenida por el sensor de luz del dispositivo entiéndase un teléfono inteligente o Tablet con JavaScript; de esta forma es posible configurar las aplicaciones según 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 presente en el ambiente; estos niveles están medidos en Lux como puedes consultar en la documentación oficial.
Esta es una tecnología poco conocidas en JavaScript que pareciera no tiene uso aparente; aunque por otra parte son de estas tecnologías que poco a poco van absorbiendo características que están presentes en una app nativo como en Android o IOS con tecnologías; recuerda que todo tiene utilidad, y le podemos sacar partido a esta sutil tecnología fácilmente.
Por ejemplo, si queremos presentar un recurso visual o audiovisual y este tiene muchos colores claros, si hay un ambiente con poca luz, que la podemos obtener con esta tecnología entonces podemos decidir si enviamos un recurso u otro recurso dependiendo de la cantidad de luz.
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 para detectar variaciones de luz
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 único que soporta esta tecnología a partir de la versión 22 de dicho navegador web de escritorio y para la versión 15 de Firefox Movil (Android y Firefox OS) ademas de Microsoft Edge.
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 <= 30 es un ambiente oscuro o con poca luz
if (lux <= 30)
document.getElementById('pagestyle').setAttribute('href', 'modonocturno.css');
else
document.getElementById('pagestyle').setAttribute('href', 'mododiurno.css');
document.getElementById("lux").innerHTML = lux + " lux";
});Ejemplo de la API de DeviceLightEvent para variar el CSS según el nivel de luminosidad
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:
Click aquí para ver el ejemplo; recomiendo probar el ejemplo en un dispositivo con Firefox OS o en Firefox para Android.
- Cuando la unidad de lux devuelta
var lux = event.value;sea menor o igual a 30, es un entorno oscuro y por lo tanto reemplazamos la hoja de estilo por defecto llamadamododiurno.csspormodonocturno.css. - Caso contrario (la unidad de lux devuelta es mayor a 30) reemplazamos
modonocturno.csspormododiurno.css.
Click aquí para ver el ejemplo; recomiendo probar el ejemplo en un dispositivo con Firefox OS o en Firefox para Android.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter