Miembros
Miembros
Tarjeta Wifi

Tarjeta WiFi

TitoTB

En esta entrada vamos a crear una tarjeta WiFi para compatir nuestra red con nuestros invitados y visualizar los detalles de nuestra conexión.

Código de la tarjeta

Para construir esta tarjeta antes tienes que instalar desde HACS las tarjetas de Bubble Card, Stack in Card y Card Mod. A continuación te dejo el código completo de la tarjeta de ejemplo, que puedes utilizar de plantilla para crear la tuya.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#wifi'
    name: WiFI
    icon: mdi:wifi
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          margin-top: 20px!important;
          margin-left: 10px!important;
          margin-right: 10px!important;
          background: linear-gradient( rgba(67, 150, 206, 0.8), rgba(59, 190, 188, 0.6) ), black }}');
        }
    cards:
      - type: picture
        image: /local/wifi_white.png
  - type: custom:bubble-card
    card_type: separator
    name: Información de la conexión
    icon: mdi:wan
  - type: entities
    card_mod:
      style: |
        ha-card { 
          background: transparent;
          box-shadow: none;
          margin-left: -16px;
          margin-top: -20px;
          border: 0px;
        }
    entities:
      - entity: sensor.sercomm_velocidad_de_descarga
        name: Velocidad de descarga
        icon: mdi:download-network
        tap_action:
          action: none
      - entity: sensor.sercomm_velocidad_de_subida
        name: Velocidad de subida
        icon: mdi:upload-network
        tap_action:
          action: none
      - entity: sensor.sercomm_ip_externa
        name: IP Externa
        icon: mdi:ip-network
        tap_action:
          action: none

Apertura de la tarjeta

Primero vamos a definir cómo acceder a la tarjeta WiFi. Por supuesto, podrías crear simplemente una nueva vista dentro de tu panel de control y añadir ahí toda la información. No obstante, a largo plazo esta dinámica saturaría tu menú de muchas vistas con poca información.

En su lugar vamos a crear un elegante ‘pop-up’ utilizando la tarjeta Bubble Card, que además vamos a utilizar para definir las cabeceras de los apartados. Por lo demás no tiene nada de especial, y puedes crearlo siguiendo las instrucciones genéricas para crear pop-up personalizados.

Código QR

Personalmente encuentro tremendamente práctico poder pulsar un botón y desplegar un QR que mis invitados pueden escanear. De esta forma se conectan a mi WiFi en segundos sin necesidad de dictarles una contraseña kilométrica.

En esta entrada te explico cómo crear un QR para conectarte a tu WiFi, y cómo puedes crear un «QR bonito» para darle un toque original y sorprender a tus invitados. Hecho esto sólo necesitas subir la imagen dentro de la carpeta ‘config/www’ de tu instancia de Home Assistant para poder usarla en tus tarjetas.

qr

Información de la conexión

Además del QR, en la tarjeta WiFi vamos a añadir unos datos sobre el estado de nuestra conexión. Para ello vamos a utilizar la integración oficial UPnP/IGD que va a extraer estos datos de nuestro router (lógicamente, también puedes obtener esta información de otra integración si tu router lo permite).

Para llevar a cabo esta integración el único requisito (si no lo has hecho ya) es que accedas a la configuración de tu router y actives la opción UPnP de la siguiente forma:

  1. Accede a la configuración del ‘router‘ desde el ordenador. Normalmente en la parte posterior de tu ‘router’ vas a encontrar una pegatina que incluye una URL con su IP. Si introduces esta dirección en tu navegador, te llevará a la pantalla de acceso en la que te pedirá un usuario y contraseña que deberá figurar en la misma pegatina.
  2. Si lo anterior no fuera posible por algún motivo, la forma de acceder puede variar en función de la compañía y del modelo, pero lo más fácil es buscar en Google “Acceder router” y el nombre de tu compañía (por ejemplo, “Acceder router Orange“, “Acceder router Lowi“, “Acceder router Movistar“… ). Rápidamente deberías encontrar instrucciones de tu compañía. Como último recurso, siempre puedes llamar a tu compañía telefónica.
  3. Una vez dentro del menú de configuración tendrás que buscar la opción UPnP y activarla.
  1. En Home Assistant, ve a Ajustes > Dispositivos y servicios > Añadir integración > UPnP/IGD y selecciona tu router.

Hecho esto se habrá añadido la integración UPnP/IGD a tu panel, y si accedes a ella observarás que contiene a tu router como dispositivo y una serie de entidades asociadas con información sobre tu conexión (como la velocidad de subida y bajada, la IP externa o los paquetes enviados y recibidos). Ya sólo te queda seleccionar aquellas que más te interesen para incluirlas en la tarjeta.

conexion