Guest wifi card with QR code

Share your Projects!
,
1

This is my first attempt at creating a card for my guest wifi network.
QR code and switch comes from Unifi and the image via a Picture Entity Card

wifi_card

If you want to duplicate this card…

This card is based the on unifi access points and integration. the latest Unifi integration supports the wifi QR code (by default disabled)

Unifi integration has a entity for the

  • QR code
  • switch for every SSID
  • Users connected
    XXX in de code below is the name of your Wifi SSID

I use some custom cards you can install thrue HACS
custom:stack-in-card
custom:mushroom-template-card

and 2 images

guest_wifi_off
guest_wifi_off612×612 26.3 KB
guest_wifi_on
guest_wifi_on612×612 19.7 KB 

type: custom:stack-in-card
title: Guest Wifi
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: picture-entity
        style: |
          ha-card {
            border: none;
          }
        entity: image.XXX_qr_code
        show_name: false
        show_state: false
      - type: picture-entity
        style: |
          ha-card {
            border: none;
          }
        entity: switch.XXX
        state_image:
          'on': /local/images/guest_wifi_on.jpg
          'off': /local/images/guest_wifi_off.jpg
        show_name: false
        show_state: false
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Users connected {{ states ('sensor.XXX')}}
        style: |
          ha-card {
            border: none;
          }
      - type: entities
        style: |
          ha-card {
            border: none;
          }
        entities:
          - switch.XXX

For the state image’s you have to supply your own path to the images
/local/ = config/www folder on your HA server

3 Likes
2

does it refresh on the next time you open the card itself after you’ve enabled the guest network through the switch?
or does the picture remain the same every single time?

And not less important, what QR are you showing and what is the desired config?

There are multiple ways to setup a guest network…
With and without a password on the ssid
and additionally with a password on a portal.

I assume this is the password for the SSID, and from my knowledge this does not change.

If my assumptiion is incorrect, would like to hear the setup and goal.

1 Like
3

Thanks for your reply.

The image for the QR code always stays the same as long as I don’t change the password.
the image I am referring to is that of the wifi symbol.
This image changes when turning the guest wifi hotspot on and off using the switch

See code below

 - type: picture-entity
        style: |
          ha-card {
            border: none;
          }
        entity: switch.gma
        state_image:
          'on': /local/images/wifi_on.jpg
          'off': /local/images/wifi_off.jpg
        show_name: false
        show_state: false

It’s just a cosmetic flaw
Most people won’t even notice that the wifi symbol pictures don’t have the same style.

But I would like to know how image caching works in a UI/Dashboard card

4

I don’t have any technical details about it, but I’ve found that if a image is replaced on the background, I have to forcefully refresh the browser (ctrl+F5) and the new picture is shown.

It’s not clear to me if the picture actually changes when you set the wifi to on or off.

5

refresh the browser (ctrl+F5) and restart of Home assistant and some other tricks i know don’t work for me

as you can see in the animated GIF the image changes by toggling the SSID on and off

it toggles between two images and one of the images is old, I have a newer one in the www folder but it is not showing

Thank you for think along.

6

Try using different file names for the new ones and change to suit in the state_image section

1 Like
7

thx changing the name of the image also refreshed it in the cache.
Anyway, it solves my problem. Maybe one day I will learn how the underlying technology works

8

HI all,

i made and it work wonderfully :slight_smile:

Another question it is possible to make Alexa echo show to show QR Code by automation or Something else ?