WTH isn't a cover an element in Picture Elements?

The Picture Elements card doesn’t easily accommodate covers. It’s relatively easy to show lights or another switch on/off in the floorplan, as indicated in the screenshot. I haven’t found a solution for demonstrating a shade or garage door state on the floorplan.

The best/easiest workaround so far is to use the browser-mod to create a popup, where I can then insert a cover. To do this, I use a “dummy” switch as the main entity and add the cover as another entity on the list. Still, to show the cover state, some fancy programming footwork is needed that seems beyond my skillset.

Having a cover element would make all of this much easier!

What would you like to see on your dashboard? I’m not really clear from what you’ve written.

1 Like

I’d like cover as an available element in the picture elements card. If a shade is up, I want to show a shade up on the screen. If a garage door is up, show that on the picture.

I have them set up like this as a work-around on my roller blinds.

The blinds are RF and don’t have state detection. So I have some thoughtfully placed door sensors on the blinds to get open/closed state.

cover config (with icon based on state):

#Bedroom Blinds 
        friendly_name: "Bedroom Blinds"
        unique_id: bedroom_blinds_cover
        value_template: "{{not is_state('binary_sensor.door_window_sensor_158d00080760b2', 'on')}}"
          service: script.blinds_up_bedroom
          service: script.blinds_down_bedroom
          service: script.blinds_stop_bedroom
          service: script.blinds_mid_bedroom
        icon_template: >-
          {% if not is_state('binary_sensor.door_window_sensor_158d00080760b2', 'on') %}
          {% else %}
          {% endif %}

In lovelace picture entity:

            #Bedroom Blinds
              - entity: cover.bedroom_blinds
                # icon: mdi:blinds
                  left: 10%
                  top: 75%
                  transform: 'scale(0.8,0.8)'
                  background-color: "rgba(0, 0, 0, 0.4)"
                  border-radius: 50%
                  action: more-info
                type: state-icon

Result (click icon and control via “more info”):

Wow - I had no idea about icon templates. Thanks for sharing your code…it helped.

1 Like