Started to fiddle around with lovelace and wanted to share an image on how versatile the picture-elements card is for putting in a lot of information on a small footprint.
Here is “state cards” for me and my wife.
It’s really nice to be able to have multiple “layers” of images to mimic diffrent states.
Lovelace code for one of the cards:
id: home
title: Home
cards:
- type: picture-elements
image: /local/ll_matte_home.png
elements:
- style:
top: 50%
left: 50%
width: 100%
type: image
entity: input_select.matte_home_status
state_image:
"Home": /local/ll_matte_home.png
"Just Arrived": /local/ll_matte_home.png
"Away": /local/ll_matte_not_home.png
"Just Left": /local/ll_matte_not_home.png
"Extended Away": /local/ll_matte_not_home.png
- style:
top: 50%
left: 50%
width: 100%
type: image
entity: input_boolean.matte_charging
state_image:
"on": /local/ll_status_charging1.png
"off": /local/ll_status_blank.png
- style:
color: white
top: 9%
left: 12%
type: state-icon
entity: sensor.matte_battery
- style:
color: white
top: 92%
left: 50%
type: state-label
entity: sensor.matte_presence
- style:
color: white
top: 10%
left: 89%
type: state-label
entity: sensor.matte_battery
- style:
color: white
top: 73%
left: 88%
type: state-label
entity: proximity.home_matte
- style:
color: white
top: 73%
left: 12%
type: state-label
entity: sensor.matte_hem