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

Wave World con Canvas

Wave World con Canvas

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Algunos artículos que te pueden interesar

Api.ai, el asistente de voz para aplicaciones y dispositivos móviles echa a tu medida

Api.ai, el asistente de voz para aplicaciones y dispositivos móviles echa a tu medida

Api.ai es un asistente de voz que permite crear nuestros propios asistentes de voz mediante las SDKs para Android, IOS y Web.

Andrés Cruz 01-10-2014

Cómo cargar y reproducir videos de YouTube de manera programatica con JavaScript

Cómo cargar y reproducir videos de YouTube de manera programatica con JavaScript

Se explica como emplear la API de YouTube para JavaScript para controlar el estado de los videos de YouTube en nuestra web.

Andrés Cruz 01-05-2017

Primeros pasos con Retrofit: consume tu API REST desde Android

Primeros pasos con Retrofit: consume tu API REST desde Android

Retrofit es un cliente REST para desarrollar aplicaciones en Android, permite agregar convertidores personalizados para mapear los datos obtenidos desde una API REST en formato XML o JSON en un objeto de una clase personalizada mediante un desearilizador.

Andrés Cruz 04-09-2017