Con la llegada de HTML5 son muchas las funcionalidades incluídas y hoy vamos a ver una muy curiosa aunque puede que no sea algo que vayamos a utilizar mucho en la vida real excepto para desarrollos muy concretos.
La nueva API de javascript nos permite detectar el grado de luz que hay en el ambiente en el que estamos y a partir de ese nivel de luminosidad realizar alguna acción. Como es obvio, esto solo podrás ser utilizado desde dispositivos móviles ya que utiliza el sensor de luminosidad de la camara incoporada.
El código de prueba es muy sencillo:
window.addEventListener('devicelight', function(event) {
var nivelLuminosidad = event.value;
});
Este evento nos devolverá un valor numérico. Se considera que si este valor es menor a 50 estamos en un ambiente oscuro mientras que si es superior a 10000 estamos en un ambiente muy brillante.
¿Para qué puede servirnos este tipo de funcionalidad en la vida real?
Realmente los escenarios en que esta funcionalidad pueda ser útil son bastante escasos aunque es bastante interesante. La única opción que se me ocurre a primera vista es que se utilice para un cambio de diseño de tu web o APP en función de si es de día o de noche.
Imaginémonos, por ejemplo, una APP que en función de si es de día o de noche su diseño cambie, por ejemplo, con un fondo diferente o que se iluminen ciertas secciones, etc.
Podrías ser algo parecido a esto:
window.addEventListener("devicelight", function(event) {
var nivelLuminosidad = event.value;
// Estamos en un lugar oscuro
if (nivelLuminosidad < 50){
$('link[href="style-day.css"]').attr('href','style-night.css');
}
else{
$('link[href="style-night.css"]').attr('href','style-day.css');
}
});
Simplemente cambiamos la hoja de estilos que utilizamos en función de si estamos de noche o de día, eso sí, he utilizado jQuery para realizar el cambio aunque es por comodidad, vosotros podéis utilizar lo que queráis.
Otra opción es añadir o quitar clases para que cambie el diseño en vez de añadir/quitar directamente toda la hoja de estilos.
window.addEventListener("devicelight", function(event) {
var nivelLuminosidad = event.value;
// Estamos en un lugar oscuro
if (nivelLuminosidad < 50) {
html.classList.add('oscuro');
html.classList.remove('brillante');
}
else {
html.classList.add('brillante');
html.classList.remove('oscuro');
}
});
Si a alguno se le ocurre algún uso diferente de esta funcionalidad que la comparta con el resto, a mi la verdad es que no se me ocurren más.
Por último debéis saber que esto solo está disponible para Firefox +22 y para Firefox Android +15.