Posted on by admin

Home Assistant Picture-Elements Card

I’ve seen the picture elements cards in home assistant dashboard screenshots from time to time and was always interested into how they did it. Digging into it, as with most things home assistant, it’s pretty easy to do, and of course can be as complex as you see fit. Here I’ll be setting up a simple picture elements card for my air quality sensors.

The home assistant picture elements cards require a link to a picture, so it can’t just be a picture local to your home assistant setup, it also needs to be externally accessible and linkable. To do this, we first need to setup the www folder in home assistant. This folder can be created in VS Code as shown below. It is in the root directory of the configuration folder.

Created folder and Test File in VS Code

Once the www folder is created, home assistant needs to be restarted. For this I just rebooted the VM I have running it. Images can be uploaded to the folder using VS Code as well, just drag and drop in the folder. Once they’re in the folder, they can be accessed externally as shown (case does matter).

then can access your hass.local:8123/local/image-name.PNG

Now that the images are uploaded, you can create the picture elements card with the image, and start adding sensors or UI elements to the image. This is all done in YAML, and locations are in % on the image so things scale well between devices. Below is my air quality sensor picture elements card. This positions a number of sensors around a floor plan of my house.

type: picture-elements
elements:
  - type: state-badge
    title: ''
    entity: sensor.particulate_matter_2_5um_5
    style:
      top: 30%
      left: 15%
  - type: state-badge
    title: ''
    entity: sensor.particulate_matter_2_5um_4
    style:
      top: 20%
      left: 80%
  - type: state-badge
    title: ''
    entity: sensor.particulate_matter_2_5um_2
    style:
      top: 70%
      left: 25%
  - type: state-badge
    title: ''
    entity: sensor.particulate_matter_2_5um
    style:
      top: 75%
      left: 65%
image: http://192.168.1.254:8123/local/upstairs-electrical.PNG

Conclusion

This worked really well for visualizing the airflow and air quality around my house. This makes it far easier to see what’s going on that a list of sensor outputs in the UI (even with them all named for their rooms).

References