I am trying to get several window-contacts to be displayed within a picture elements card. I exported a floor plan of my house to a PNG file and I would like to put a specially colored Icon next to each window, when it is open.
The window-contact switches are included via phoscon and are displayed as binary sensors. This is the way I included them into lovelace:
type: picture-elements
elements:
- type: state-badge
title: Fenster
entity: binary_sensor.fensterkontakt_hwr
style:
top: 80%
left: 22%
This renders nicely to this:
Also it is clickable to show the last states (which is what I want). I tried to change the Icons as well as the color globally for all of this sensors like this:
configuration.yaml:
# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
#entities: !include entities.yaml
homeassistant:
customize_glob: !include customize_glob.yaml
customize_glob.yaml:
"binary_sensor.fenster*":
state_icons:
"off": "mdi:shield-home"
"on": "mdi:lock-open"
state_styles:
"off":
color: green
"on":
color: red
"binary_sensor.tur*":
state_icons:
"off": "mdi:shield-home"
"on": "mdi:lock-open"
state_styles:
"off":
color: green
"on":
color: red
This seems to be working but is not actually shown in the frontend. Why is that? Am I making a simple mistake?