Lanzar pop-up personalizados en Home Assistant

Muestra información detallada personalizada en tu panel de control aprendiendo a lanzar pop-up personalizados en Home Assistant.

Índice

¿Qué es un pop-up y para qué sirve?

Un pop-up es una ventana emergente que aparece en tu pantalla, bien de forma espontánea (como sucede muchas veces cuando entras en una web y te atacan los anuncios) o cuando se dispara un evento (por ejemplo, al pulsar un botón determinado).

En el contexto de Home Assistant, por pop-up nos referimos a la ventana que aparece con información detallada de una entidad cuando habilitamos la opción ‘more-info’ (o «más información») al pulsar sobre la tarjeta. Esta información variará, lógicamente, dependiendo del tipo de entidad.

Crear y lanzar pop-up personalizados

Esta es una herramienta muy útil cuando queremos tener acceso a información detallada, sin mostrarla continuamente en el panel de control. Por defecto no podemos personalizar el contenido de estas ventanas, pero si utilizando la tarjeta Bubble Card o la integración Browser Mod.

Creación de pop-up con Bubble Card

Para crear pop-up con esta tarjeta, sigue estos pasos:

Accede al apartado «Interfaz» de HACS y pulsa en «Explorar y descargar repositorios».
Busca «Bubble Card», descarga el repositorio y reinicia HA.
Ve al apartado de tu panel de control donde quieras lanzar el pop-up y crea una tarjeta del tipo «Pila vertical». Todo el contenido de esta tarjeta será parte del pop-up.
Añade una primera tarjeta del tipo «Bubble Card» y en el ‘card type’ selecciona «Pop-up».
En el campo ‘Hash’ tienes que indicar un identificador único para tu pop-up (por ejemplo ‘wifi’), ya que va a ser la ID que lo lance.
Añade también un nombre e icono para la tarjeta.
Ahora añade el resto de tarjetas que quieres que formen el contenido de tu pop-up.
Una vez que has terminado de definir el contenido de tu pop-up, sólo tienes que lanzarlo. Para ello simplemente tienes que que asignar el siguiente ‘tap action’ al elemento que quieres que lo lance (reemplazando la id de tu pop-up).

tap_action:
  action: navigate
  navigation_path: '#wifi'

Integración de Browser Mod

Para llevar a cabo la integración, sigue estos pasos:

Accede al apartado «Integraciones» de HACS y pulsa en «Explorar y descargar repositorios».
Busca «Browser Mod», descarga el repositorio y reinicia HA.
Ve a Ajustes > Dispositivos y servicios > Integraciones > Añadir integración. Busca «Browser Mod», añade la integración y reinicia de nuevo HA.
Borra los datos y ficheros de la caché de tu navegador. Dependiendo del navegador que utilices, encontrarás este apartado en las opciones de configuración del mismo.
Accede al apartado «Browser Mod» que aparece en el menu lateral de Home Assistant. Asegúrate que has habilitado la primera casilla que indica «Register». Este paso tienes que repetirlo en los dispositivos en los que quieras que se habiliten los pop-up (por ejemplo, un wall panel).

Creación de pop-up con Browser Mod

Vamos a hacer una prueba para que entiendas como funciona esta integración a la hora de lanzar un pop-up. Accede al apartado de Herramientas para desarrolladores > Servicios.

Busca el servicio «Browser mod: popup». Marca el campo «Title» y escribe cualquier cosa (por ejemplo, «prueba»). Añade también alguna texto de prueba en el campo «Content». Dentro del apartado «Objetivos» selecciona una entidad cualquier para realizar la prueba. Ahora haz clic en «Llamar servicio» y aparecerá el pop-up.

Entendido esto, lo que vamos a hacer es llamar a este servicio desde la tarjeta del panel de control que nos interese, y personalizar el contenido del pop-up. Por ejemplo, en mi caso quiero incluir en el wall panel de la entrada un icono de la red WiFi, que al pulsarlo muestre un QR personalizado para permitir el acceso a mis invitados.

Para hacerlo más fácil, primero voy a crear en el panel de control la tarjeta que quiero que se muestre al desplegar el pop-up. En mi caso es muy sencilla, ya que voy utilizar una tarjeta del tipo «Imagen» con el QR que he generado para conectar automáticamente a mi red WiFi. El objetivo es que aparezca en la pantalla para que sea escaneado por el invitado.

Ahora voy a crear una tarjeta Mushroom Template Card para lanzar el pop-up. En la acción de «toque» tienes que seleccionar «Llamar servicio» y repetir la configuración que has hecho en la prueba anterior. Esta vez en el campo «Content», en lugar de introducir un texto, pega el código de la tarjeta que has creado en el apartado anterior.

Si te fijas, también puedes configurar otros aspectos como el cierre automático del pop-up, el tamaño o los márgenes.

Guarda la tarjeta y listo! Ya sabes lanzar pop-up personalizados en Home Assistant!