Skip to content

Cover Card

Description

example-image example-image example-image

With the cover-card you have the state of your cover. Optionnaly, on the second line, OPEN / PAUSE / CLOSE to control it and/or a slider to control position.

Warning

This card has backward compatibilty with older template except custom name. It means variable ulm_card_cover_buttons_name must be replaced by ulm_card_cover_name.

Variables

Variable/Entity Default Required Notes Requirement
entity Your HA entity
ulm_card_cover_name friendly_name Customize name
ulm_card_cover_display_left_right false Display left right control button
ulm_card_curtain_display_collapse_expand false Display expand collapse control button
ulm_card_cover_garage false Display garage icon for garage cover
ulm_card_cover_gate false Display gate icon for gate cover
ulm_card_cover_enable_controls false Enable control buttons
ulm_card_cover_enable_slider false Enable slider
ulm_card_cover_enable_horizontal false Enable horizontal card Need ulm_card_cover_enable_controls: true or ulm_card_cover_enable_slider: true
ulm_card_cover_enable_popup false Enable popup_cover

Usage

- type: "custom:button-card"
  template: card_cover
  entity: cover.window
  variables:
    ulm_card_cover_enable_controls: true
    ulm_card_cover_enable_slider: true
Template Code
card_cover_buttons.yaml
---
### Card Cover ###
card_cover:
  template:
    - "icon_more_info_new"
    - "ulm_actions_card"
    - "ulm_translation_engine"
  variables:
    ulm_card_cover_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_cover_display_left_right: false
    ulm_card_curtain_display_collapse_expand: false
    ulm_card_cover_garage: false
    ulm_card_cover_gate: false
    ulm_card_cover_enable_controls: false
    ulm_card_cover_enable_slider: false
    ulm_card_cover_enable_horizontal: false
    ulm_card_cover_enable_popup: false
  show_icon: false
  show_name: false
  show_label: false
  styles:
    grid:
      - grid-template-areas: >
          [[[
                var areas = [];
                if (variables.ulm_card_cover_enable_horizontal) {
                  if ( variables.ulm_card_cover_enable_slider) {
                      return "\"item1 item3\"";
                  } else {
                    return "\"item1 item2\"";
                  }
                } else {
                  areas.push("item1 item1");
                  if ( variables.ulm_card_cover_enable_controls) {
                      areas.push("item2 item2");
                  }
                  if ( variables.ulm_card_cover_enable_slider) {
                      areas.push("item3 item3");
                  }
              }
                return "\"" + areas.join("\" \"") + "\"";
          ]]]
      - grid-template-columns: "1fr 1fr"
      - grid-template-rows: >
          [[[
                var rows = [];
                rows.push("min-content");
                if (variables.ulm_card_cover_enable_horizontal) {
                  return "min-content";
                } else {
                  if ( variables.ulm_card_cover_enable_controls) {
                      rows.push("min-content");
                  }
                  if ( variables.ulm_card_cover_enable_slider) {
                      rows.push("min-content");
                  }
                }
                return rows.join(" ");
          ]]]
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
    custom_fields:
      item2:
        - display: >
            [[[
                  if (variables.ulm_card_cover_enable_controls) {
                      return "block";
                  } else {
                      return "none";
                  }
            ]]]
      item3:
        - display: >
            [[[
                  if (variables.ulm_card_cover_enable_slider) {
                      return "block";
                  } else {
                      return "none";
                  }
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              entity: "[[[ return entity.entity_id ]]]"
              icon: |
                [[[
                    var icon = "mdi:help-circle";
                    if (typeof states[entity.entity_id].attributes.current_position === "undefined"){
                      if (states[entity.entity_id].state == "closed"){
                        if (variables.ulm_card_curtain_display_collapse_expand){
                          var icon = "mdi:curtains-closed";
                        } else if (variables.ulm_card_cover_garage){
                          var icon = "mdi:garage-variant";
                        } else if (variables.ulm_card_cover_gate){
                          var icon = "mdi:gate";
                        } else
                          var icon = "mdi:window-shutter";
                      } else
                        if (variables.ulm_card_curtain_display_collapse_expand){
                          var icon = "mdi:curtains";
                        } else if (variables.ulm_card_cover_garage){
                          var icon = "mdi:garage-open-variant";
                        } else if (variables.ulm_card_cover_gate){
                          var icon = "mdi:gate-open";
                        }else
                          var icon = "mdi:window-shutter-open";
                    } else {
                      if (states[entity.entity_id].attributes.current_position == 0){
                        if (variables.ulm_card_curtain_display_collapse_expand){
                          var icon = "mdi:curtains-closed";
                        } else if (variables.ulm_card_cover_garage){
                          var icon = "mdi:garage-variant";
                        } else if(variables.ulm_card_cover_gate){
                          var icon = "mdi:gate";
                        } else
                          var icon = "mdi:window-shutter";
                      } else
                        if (variables.ulm_card_curtain_display_collapse_expand){
                          var icon = "mdi:curtains";
                        } else if(variables.ulm_card_cover_garage){
                          var icon = "mdi:garage-open-variant";
                        } else if(variables.ulm_card_cover_gate){
                          var icon = "mdi:gate-open";
                        }
                        else
                          var icon = "mdi:window-shutter-open";
                    }
                    return icon ;
                ]]]
              styles:
                icon:
                  - color: >
                      [[[
                          if (typeof states[entity.entity_id].attributes.current_position === "undefined"){
                            if (states[entity.entity_id].state == "closed"){
                              return 'rgba(var(--color-theme),0.2)';
                            } else
                              return 'rgba(var(--color-blue),1)'
                          } else {
                            if (states[entity.entity_id].attributes.current_position == 0){
                              return 'rgba(var(--color-theme),0.2)';
                            } else {
                              return 'rgba(var(--color-blue),1)'
                            }
                          }
                      ]]]
                img_cell:
                  - background-color: >
                      [[[
                          if (typeof states[entity.entity_id].attributes.current_position === "undefined"){
                            if (states[entity.entity_id].state == "closed"){
                              return 'rgba(var(--color-theme),0.05)';
                            } else
                              return 'rgba(var(--color-blue),0.2)';
                          } else {
                            if (states[entity.entity_id].attributes.current_position == 0){
                              return 'rgba(var(--color-theme),0.05)';
                            } else {
                              return 'rgba(var(--color-blue),0.2)';
                            }
                          }
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              entity: "[[[ return entity.entity_id ]]]"
              name: "[[[ return variables.ulm_card_cover_name ]]]"
              label: >-
                [[[
                    if (entity.state !="unavailable"){
                      if (typeof states[entity.entity_id].attributes.current_position === "undefined"){
                        if (states[entity.entity_id].state == "closed"){
                          return variables.ulm_translation_state;
                        } else
                          return variables.ulm_translation_state;
                      } else {
                        if (states[entity.entity_id].attributes.current_position == 0){
                          return variables.ulm_translation_state;
                        } else {
                          return variables.ulm_translation_state + " • " + (states[entity.entity_id].attributes.current_position) + "%" ;
                        }
                      }
                  } else {
                    return variables.ulm_translation_state;
                  }
                ]]]
    item2:
      card:
        type: "custom:button-card"
        template: "list_3_items"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              state:
                - value: "closed"
                  styles:
                    icon:
                      - color: "rgba(var(--color-theme),0.4)"
              tap_action:
                action: "call-service"
                service: "cover.close_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
              icon: >-
                [[[
                  if (variables.ulm_card_cover_display_left_right){
                    return "mdi:arrow-left";
                  }
                  if (variables.ulm_card_curtain_display_collapse_expand || variables.ulm_card_cover_gate){
                    return "mdi:arrow-collapse-horizontal";
                  }
                  return "mdi:arrow-down";
                ]]]
          item2:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              tap_action:
                action: "call-service"
                service: "cover.stop_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
              icon: "mdi:pause"
          item3:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              state:
                - value: "open"
                  styles:
                    icon:
                      - color: "rgba(var(--color-theme),0.4)"
              tap_action:
                action: "call-service"
                service: "cover.open_cover"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
              icon: >-
                [[[
                  if (variables.ulm_card_cover_display_left_right){
                    return "mdi:arrow-right";
                  }
                  if (variables.ulm_card_curtain_display_collapse_expand || variables.ulm_card_cover_gate){
                    return "mdi:arrow-expand-horizontal";
                  }
                  return "mdi:arrow-up";
                ]]]
    item3:
      card:
        type: "custom:my-slider"
        entity: "[[[ return entity.entity_id ]]]"
        radius: "14px"
        height: "42px"
        mainSliderColor: >
          [[[
              if (entity.state == "unavailable"){
                return "rgba(var(--color-grey),1)";
              }
              else{
                return "rgba(var(--color-blue),1)";
              }
          ]]]
        secondarySliderColor: >
          [[[
              if (entity.state == "unavailable"){
                return "rgba(var(--color-grey),0.2)";
              }
              else{
                return "rgba(var(--color-blue),0.2)";
              }
          ]]]
        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
        thumbHorizontalPadding: "0px"
        thumbVerticalPadding: "0px"
        thumbWidth: "0px"
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }