Haz que el panel de Home Assistant entre por la vista con imágenes aleatoria.

¿Para qué queremos imágenes aleatorias en nuestro panel?

Seamos sinceros, a todos nos gusta ver algo diferente cuando accedemos a nuestro panel principal de Home Assistant. Al igual que nos gusta cambiar los muebles de sitio de vez en cuando. Pero no queremos dedicar tiempo y estar continuamente cambiando cosas.. Somos flojos por naturaleza… bueno, un poco.

Tenemos una solución sencilla que no os va a llevar más de 5 minutos, y los resultados son …. bueno, sorprendentes sería el adjetivo, pues de eso se trata.

El servicio Lorem Picsum

Lorem Picsum. Parece latín, ¿verdad?, y de hecho rememora al tan conocido texto Lorem Ipsum que podemos ver por todos lados como texto sin sentido para mostrar tipografías o de relleno, y no centrarnos en el significado.

Precisamente ese es uno de los usos más extendidos de Lorem Picsum, servir como relleno a muchas páginas para incluir fotografías cambiantes.

Nosotros lo vamos a usar para dar un toque más dinámico a nuestro panel Lovelace de Home Assistant incluyendo imágenes aleatorias.

Llamada al servicio para una imagen simple

Para que la plataforma nos devuelva una imagen, lo único que tenemos que hacer es especificar el tamaño en la misma llamada a la URL. Veamos algunos ejemplos, que se entenderá mucho mejor:

Si ponemos esto en el navegador:

https://picsum.photos/400/200

Nos aparecerá lo siguiente (no necesariamente esta misma imagen, claro):

Imagen aleatoria rectangular de 400 x 200 píxeles

Si queremos una imagen cuadrada, pues solo tendremos que especificar una única dimensión:

https://picsum.photos/400
Imagen cuadrada de 400 x 400 píxeles

Imagen difuminada

Para establecer una imagen aleatoria pero difuminada, usaremos la variable blur, directamente o especificando la intensidad del difuminado (entre 1 y 10):

https://picsum.photos/400/?blur
https://picsum.photos/400/?blur=3

El resultado es el siguiente:

Imágenes difuminadas aleatorias

Imagen en escala de grises

Si queremos tener imágenes al azar, pero en blanco y negro, por supuesto también es posible con la variable grayscale:

https://picsum.photos/400/?grayscale
400 x 400 en escala de grises

Combinando todas las opciones

Como habréis podido imaginar, podemos combinar todas las opciones sin problema, intercalando & entre las distintas variables, por ejemplo:

https://picsum.photos/400/?grayscale&blur=5
Imagen 400 x 400 en escala de grises y difuminada

Pues ya que sabemos como obtener los tamaños y opciones que queramos de nuestras imágenes aleatorias, vamos a ver cómo las incluimos en los paneles de nuestro Home Assistant

Editamos el panel de Lovelace

Muchas son las tarjetas que periten incluir una imagen bien sea en la cabecera o al pié. Incluso directamente tenemos la tarjeta «Picture» a la que podremos asociar una acción de navegación o servicio.

A modo de ejemplo nosotros vamos a modificar una tarjeta «Entity» existente, pero que le queremos dar un aire más moderno con imágenes aleatorias.

Para editar un panel de Lovelace, desde el propio panel vamos directamente al menú (3 puntos verticales) que hay en la esquina superior derecha y elegiremos «Edit Dashboard«

A continuación elegimos la targeta a editar:

Añadiremos una cabecera en la opción + indicada a la derecha de «Header» y elegimos «Picture» en el diálogo que nos salga:

En le línea de image: simplemente ponemos la url con las características que queramos y damos a SAVE:

El resultado final

Y eso es todo, así de sencillo. Saldremos del modo edición con el aspa (X) de la esquina superior izquierda.

Ahora cada vez que se acceda al panel, o bien se refresque, nuestra tarjeta mostrará un header distinto:

Os dejo otros artículos para seguir investigando:

Deja un comentario