Cover Card
Description¶
With the cover-card you have the state of your cover. Optionally, on the second line, OPEN / PAUSE / CLOSE to control it and/or a slider to control position.
Warning
This card has backward compatibility 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_icon | Customize icon | |||
| ulm_card_invert_percent | false |
Invert the Percentage (100% = Closed) | ||
| ulm_card_cover_display_left_right | false |
Display left right control button | ||
| ulm_card_cover_garage_large | false |
Display variant garage icon for garage cover | Only if device_class = 'garage |
|
| 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_tilt | false |
Display angled buttons for Venetian blind tilt | ||
| 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_translation_engine"
show_last_changed: false
variables:
ulm_card_cover_name: "[[[ return entity.attributes.friendly_name ]]]"
ulm_card_invert_percent: false
ulm_card_cover_display_left_right: false
ulm_card_cover_garage_large: false
ulm_card_cover_gate: false
ulm_card_cover_enable_controls: false
ulm_card_cover_enable_slider: false
ulm_card_cover_enable_tilt: false
ulm_card_cover_enable_horizontal: false
ulm_card_cover_enable_popup: false
ulm_show_last_changed: false
ulm_card_cover_icon: 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");
}
if (variables.ulm_card_cover_enable_tilt) {
areas.push("item4 item4");
}
}
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");
}
if (variables.ulm_card_cover_enable_tilt) {
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";
}
]]]
item4:
- display: >
[[[
if (variables.ulm_card_cover_enable_tilt) {
return "block";
} else {
return "none";
}
]]]
custom_fields:
item1:
card:
type: "custom:button-card"
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
variables: >
[[[
let vars = variables;
if (variables.ulm_card_cover_enable_popup) {
vars.ulm_custom_popup = {
'template': 'popup_cover'
};
}
return vars;
]]]
icon: >
[[[
var icon = entity.attributes.icon || "mdi:help-circle";
var icon_state = {
"open": "open",
"opening": "open",
"closed": "closed",
"closing": "closed"
};
if(entity.attributes?.device_class){
var device_class = entity.attributes?.device_class;
}
var icon_open = {
"awning": "mdi:window-open",
"blind": "mdi:blinds-open",
"curtain": "mdi:curtains",
"damper": "mdi:circle-outline",
"door": "mdi:door-open",
"garage": variables.ulm_card_cover_garage_large ? "mdi:garage-open-variant" : "mdi:garage-open",
"gate": "mdi:gate-open",
"shade": "mdi:roller-shade",
"shutter": "mdi:window-shutter-open",
"window": "mdi:window-open",
};
var icon_closed = {
"awning": "mdi:window-closed",
"blind": "mdi:blinds",
"curtain": "mdi:curtains-closed",
"damper": "mdi:circle-slice-8",
"door": "mdi:door-closed",
"garage": variables.ulm_card_cover_garage_large ? "mdi:garage-variant" : "mdi:garage",
"gate": "mdi:gate",
"shade": "mdi:roller-shade-closed",
"shutter": "mdi:window-shutter",
"window": "mdi:window-closed",
};
return variables.ulm_card_cover_icon || (icon_state[entity.state]=='open' ? icon_open[device_class] : icon_closed[device_class]) || icon
]]]
styles:
icon:
- color: >
[[[
if (typeof entity === "undefined") {
if (states[entity.entity_id].state == "closed") {
return 'rgba(var(--color-theme),0.2)';
} else {
return 'rgba(var(--color-blue),1)'
}
}
if (variables.ulm_card_invert_percent){
if (entity.attributes.current_position == 100) {
return 'rgba(var(--color-theme),0.2)';
} else {
return 'rgba(var(--color-blue),1)'
}
}
if (entity == 0) {
return 'rgba(var(--color-theme),0.2)';
} else {
return 'rgba(var(--color-blue),1)'
}
return 'rgba(var(--color-theme),0.2)'
]]]
img_cell:
- background-color: >
[[[
if (typeof entity === "undefined") {
if (states[entity.entity_id].state == "closed") {
return 'rgba(var(--color-theme),0.05)';
} else {
return 'rgba(var(--color-blue),0.2)'
}
}
if (variables.ulm_card_invert_percent){
if (entity.attributes.current_position == 100) {
return 'rgba(var(--color-theme),0.05)';
} else {
return 'rgba(var(--color-blue),0.2)'
}
}
if (entity == 0) {
return 'rgba(var(--color-theme),0.05)';
} else {
return 'rgba(var(--color-blue),0.2)'
}
return 'rgba(var(--color-theme),0.05)'
]]]
item2:
card:
type: "custom:button-card"
entity: "[[[ return entity.entity_id ]]]"
variables: >
[[[
let vars = variables;
if(variables.ulm_card_cover_enable_popup) {
vars.ulm_custom_popup = {
'template': 'popup_cover'
};
}
return vars;
]]]
name: "[[[ return variables.ulm_card_cover_name ]]]"
label: >
[[[
var position = states[entity.entity_id]?.attributes?.current_position;
var invert = {
"closed": hass.resources[hass['language']]['component.cover.state._.open'],
"closing": hass.resources[hass['language']]['component.cover.state._.opening'],
"open": hass.resources[hass['language']]['component.cover.state._.closed'],
"opening": hass.resources[hass['language']]['component.cover.state._.closing']
};
if(["unknown", "unavailable"].includes(entity.state)){
return variables.ulm_translation_state;
}
if(variables.ulm_card_invert_percent && typeof entity !== "undefined"){
if(position == 0){
return invert[entity.state] + " • " + (100 - position) + "%";
} else {
return invert[entity.state]
}
}
if (typeof entity !== "undefined"){
if (entity == 0) {
return variables.ulm_translation_state;
} else {
return variables.ulm_translation_state + " • " + position + "%";
}
}
return variables.ulm_translation_state;
]]]
show_last_changed: "[[[ return variables.ulm_show_last_changed; ]]]"
item2:
card:
type: "custom:button-card"
template: "list_3_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
state:
- operator: "template"
value: >
[[[
return entity.attributes.current_position == "0";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "closing";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "opening";
]]]
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";
}
var device_class = entity.attributes?.device_class;
if (device_class == 'curtain' || device_class == '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:stop"
item3:
card:
type: "custom:button-card"
template: "widget_icon"
state:
- operator: "template"
value: >
[[[
return entity.attributes.current_position == "100";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "closing";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "opening";
]]]
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";
}
var device_class = entity.attributes?.device_class;
if (device_class == 'curtain' || device_class == '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;
}
item4:
card:
type: "custom:button-card"
template: "list_3_items"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "widget_icon"
state:
- operator: "template"
value: >
[[[
return entity.attributes.current_tilt_position == "0";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "closing";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "opening";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
tap_action:
action: "call-service"
service: "cover.close_cover_tilt"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
icon: "mdi:arrow-bottom-left"
item2:
card:
type: "custom:button-card"
template: "widget_icon"
tap_action:
action: "call-service"
service: "cover.stop_cover_tilt"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
icon: "mdi:stop"
item3:
card:
type: "custom:button-card"
template: "widget_icon"
state:
- operator: "template"
value: >
[[[
return entity.attributes.current_tilt_position == "100";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "closing";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
- operator: "template"
value: >
[[[
return entity.state == "opening";
]]]
styles:
icon:
- color: "rgba(var(--color-theme),0.4)"
tap_action:
action: "call-service"
service: "cover.open_cover_tilt"
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
icon: "mdi:arrow-top-right"