¿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.
Tabla de contenidos
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/200Nos aparecerá lo siguiente (no necesariamente esta misma imagen, claro):
Si queremos una imagen cuadrada, pues solo tendremos que especificar una única dimensión:
https://picsum.photos/400
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/?blurhttps://picsum.photos/400/?blur=3El resultado es el siguiente:
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
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
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:
- ¿Estás preparado para el peor escenario digital? Protégete.
- Enchufes inteligentes. La compra más smart para tu casa.
- El desconocido y útil sensor «Statistics» en Home Assistant. Con ejemplos concretos para aprender a usarlo.
- Automatiza tu hogar con macros en Home Assistant: simplifica y reutiliza tus mejores templates.
- Cómo vigilar el tiempo de uso de dispositivos con Home Assistant.
