Accede al sensor de luz ambiental de un dispositivo con JavaScript

Soporte Demo Github

Gracias a HTML5 hoy disfrutamos de un gran contenido en cuanto a APIs para JavaScript, muchas de ellas muy útiles y curiosas; Con el fin de siempre aprender algo nuevo me he dado a la tarea de investigar algunas de ellas y una que me llamo bastante la atención es la API de luz ambiental ☀️ (Ambient Light API), la cual nos permite acceder al sensor de luz ambiental de un dispositivo 📱, ¡Así es!, ese puntito que esta en la parte de enfrente de tu teléfono.

Uno jamás se imagina en poder acceder a algo como esto usando JavaScript del lado del cliente (navegador).

Evento `devicelight`

Para poder acceder a la luz ambiental de nuestro dispositivo, se usa el evento devicelight y gracias al objeto evento podemos acceder a la propiedad value la cual nos devuelve el nivel de luz ambiental en lux (unidad para medir el nivel de iluminación 💡).

Ejemplo:

Javascript

// La letra (e) representa a nuestro objeto evento

window.addEventListener("devicelight", function(e){ 
  console.log(e.value); // El nivel de luz se imprime cada vez que este cambia
  });

¿Increíble, no crees?, así de fácil es poder acceder a la luz ambiental, esto puede ser muy útil para cambiar los colores 🎨 de tu sitio web, dependiendo de dónde se encuentre tu usuario, es decir, poner colores oscuros cuando no haya mucha luz 🌕 y poner colores claros cuando haya luz solar ⛱.

¿Te gustaría hacerlo?, vamos a darle...

Adaptando un sitio web a la luz ambiental

Bien, para este ejercicio vamos a mostrar en pantalla el nivel de luz ambiental actual y cambiaremos el color de fondo, dependiendo el nivel de este.

HTML

<!-- Le damos un id al <body> y al <span> para acceder a estos con JS -->

<!-- la clase modo-normal es para los estilos por default que va a tener nuestro sitio web. -->
<body id="body" class="modo-normal">
  <!-- Nos aseguramos de que si el navegador no soporta la API, este vea algún mensaje y este enterado. -->
  <span id="texto" class="texto">Tu navegador no soporta la API de luz ambiental</span>
</body>

JavaScript

// Empezamos creando una función que se encargue de cambiar los colores de fondo y muestre el nivel actual de la luz ambiental.

var cambiarColores = function(e) {
  var $body = document.getElementById("body"), // Guardamos el <body> en la variable $body
        $texto = document.getElementById("texto"), // Guardamos nuestro <span> en la variable $texto
        $lux = e.value; // Guardamos el nivel de luz ambiental en la variable $lux

  $text.textContent = $lux + " lux"; // Imprimimos el valor de la luz ambiental dentro de nuestro <span>

  // Cuando el valor de la luz ambiental sea menor a 5, agregamos la clase modo-oscuro y removemos las otras clases, esto para evitar que estén todas juntas.

  if($lux < 5)  {
    $body.classList.add("modo-oscuro");
    $body.classList.remove("modo-normal", "modo-brillante");
  }

  // Cuando el valor de la luz ambiental sea mayor o igual a 5 y menor o igual a 1500, agregamos la clase modo-normal y removemos las otras clases.

  else if($lux >= 5 && $lux <= 1500) {
    $body.classList.add("modo-normal");
    $body.classList.remove("modo-oscuro", "modo-brillante");
  }

  // Cuando no se cumplan las otras condiciones, es decir, que el valor de la luz ambiental sea mayor a 1500, agregamos la clase modo-brillante y removemos las otras clases.

  else {
    $body.classList.add("modo-brillante");
    $body.classList.remove("modo-oscuro", "modo-normal");
  }
};

// Agregamos el evento devicelight y disparamos nuestra función cambiarColores.

window.addEventListener('devicelight', cambiarColores);

Finalmente, agregamos las clases que definimos en el JS, dentro de nuestro CSS para que el sitio web cambie, dependiendo de la luz.

CSS

/* Aumentamos el tamaño de nuestro texto */
.texto{
  font-size: 2em;
}

/* Esta clase tiene un color de fondo completamente oscuro y el color de texto brillante */
.modo-oscuro {
  background-color: #333c41;
  color: #f3f3f3;
}

/* Esta clase tiene un color de fondo brillante y el color de texto oscuro */
.modo-normal {
  background-color: #f3f3f3;
  color: #333c41;
}

/* Esta clase tiene un color de fondo totalmente blanco y el color de texto negro */
.modo-brillante {
  background-color: #fff;
  color: #000;
}

Así es como un sitio web puede cambiar de estilos, dependiendo de la luz o lugar en donde se encuentre nuestro usuario 🏃.

Nosotros podemos hacer esto un poco más complejo, agregando más condiciones y cambios dependiendo el nivel de luz.

0,00005 lux: Luz de una estrella (Vista desde la tierra).
0,0001 lux: Cielo nocturno nublado, luna nueva.
0,001 lux: Cielo nocturno despejado, luna nueva.
0,01 lux: Cielo nocturno despejado, cuarto creciente o menguante.
0,25 lux: Luna llena en una noche despejada.
1 lux: Luna llena a gran altitud en latitudes tropicales.
3 lux: Límite oscuro del crepúsculo bajo un cielo despejado.
100 lux: Pasillo en una zona de paso.
300 lux: Sala de reuniones.
500 lux: Oficina bien iluminada.
600 lux: Salida o puesta de sol en un día despejado.
1000 lux: Iluminación habitual en un estudio de televisión.
32,000 lux: Luz solar en un día medio (mín.).
100, 000 lux: Luz solar en un día medio (máx.).

Fuente: Wikipedia 🌏

Sin duda una API muy interesante que le puede agregar un gran toque a nuestro sitio web 🖥 , dando una mejor experiencia a los usuarios.

Tip

Puedes ahorrar batería en un dispositivo con pantalla AMOLED (OLED), usando colores negros, ya que estos no producen ninguna luz, en pocas palabras los píxeles dejan de emitir luz.