How to show the current state of the door sensor in "Picture Elements"?

Configuration Frontend
1

Once the door is opened, the mdi icon of the door sensor in the “Picture Elements” display a different color. How to do it?

capture
capture1559×823 152 KB

2

Do you have a device class set for this door/lock?
If you don’t (or don’t want to) you can still accomplish this by the conditional statement. You can choose to show only when unlocked, only when locked, or both.
The easiest should be device class however.

This should get the info across. I only show the icon when the valve is open (on) and nothing when it is shut (off). I have one that also displays what video is playing on TVs when they are on.

  - type: conditional
    conditions:
      - entity: binary_sensor.backup_water_valve
        state: 'on'
    elements:
      - type: state-icon
        entity: binary_sensor.backup_water_valve
        icon: mdi:water
        style:
          top: 60%
          left: 4%
          font-family: Quicksand
          font-size: 70%
          background-color: rgba(0,0,0,0.3)
          border: dashed gold
          border-radius: 50%
          text-align: center
2 Likes
3

It works. Thanks

4

Which did you end up doing: the device_class or the conditional route?
Also mark as solved.

5

capture