Add a button to the default cover entity card

Configuration Frontend
, ,
1

I’d like to add a button on the entity card for my covers in order to start an automation (set the cover to its “sun” position = ~20% opened).

Mockup

What’s the best way to proceed?

2 Likes
2

I was just looking for the same. This one here comes close: GitHub - jcwillox/lovelace-paper-buttons-row: Adds highly configurable buttons that use actions and per-state styling.

1 Like
3

:heart: Thanks a lot, exactly what I was looking for!

Here’s my result using extend_paper_buttons_row:

image

Code:

type: entities
entities:
  - entity: cover.shutter_kitchen
    secondary_info: position
    name: Kitchen
    extend_paper_buttons_row:
      extra_styles: |
        paper-button:hover {
          background-color: #242424;
        }
      buttons:
        - tooltip: Open cover to sun position
          icon: mdi:weather-sunset-down
          styles:
            button:
              color: var(--primary-text-color)
              margin-right: 4px
          tap_action:
            action: call-service
            service: script.open_kitchen_shutter_to_sun_position
4

Hello @otiel

thank you for your code. Works fine for me, too. But have you managed to get the extra symbol greyed out, when the cover is at the sunset position?

5

Hi @ZungeWegIchFurze

I didn’t look into it, but if you manage to make it work, I’m interested!

6

Yes, I found out how to make it work. For your example you could try:

      buttons:
        - tooltip: Open cover to sun position
          icon: mdi:weather-sunset-down
          styles:
            button:
              color: var(--primary-text-color)
              margin-right: 4px
          tap_action:
            action: call-service
            service: script.open_kitchen_shutter_to_sun_position
          styles:
            button:
              color: >-
                {% if is_state_attr('cover.shutter_kitchen', 'current_position', 20) %}
                  lightgrey
                {% endif %}

… assuming the position-attribute for your cover is “current_position” … Maybe you have to change this.

1 Like