Sure. Love and credits go to tben an his awesome Lovelace UI Minimalist. I adjusted his template to my needs, so here’s my template:
#rollo:
variables: ## Variables for the „lock“ function
gesperrt: |
[[[
if (entity.entity_id == 'cover.tradfri_blind') return 'binary_sensor.schlafzfenster';
if (entity.entity_id == 'cover.tradfri_blind2') return 'binary_sensor.wohnzfenster';
return 'binary_sensor.kuechenfenster';
]]]
#type: custom:button-card
show_name: false
show_icon: false
show_state: false
show_label: false
styles:
card:
- border-radius: 5px
- padding: 10px 10px 0px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 10px
custom_fields:
item1:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
name: '[[[ return entity.name ]]]'
tap_action:
action: more-info
# template:
# - icon_info
# - cover
# icon_info, cover:
show_icon: true
show_name: true
show_state: false # true
show_label: true
size: 20px
icon: |
[[[
if (entity.attributes.current_position <= 20)
return 'mdi:window-shutter';
return 'mdi:window-shutter-open';
]]]
label: |
[[[
if (entity.state == 'opening') return 'wird geöffnet…';
if (entity.state == 'closing') return 'wird geschlossen…';
if (entity.attributes.current_position == 100) return 'vollständig geöffnet';
if (entity.attributes.current_position == 0) return 'vollständig geschlossen';
if (entity.attributes.current_position <= 20) return 'geschlossen';
else return entity.attributes.current_position + '% geöffnet';
]]]
styles:
card:
- border-radius: 21px 8px 8px 21px
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
img_cell:
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- border: 1px solid
name:
- align-self: end
- justify-self: start
- font-weight: 500
- font-size: 13px
- margin-left: 12px
label:
- justify-self: start
- align-self: start
- font-weight: 450
- font-size: 12px
- filter: opacity(70%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: 450
- font-size: 12px
- filter: opacity(70%)
- margin-left: 12px
#### BUTTONS
item2:
card:
type: custom:button-card
# list_items:
styles:
card:
- box-shadow: none
- padding: 10px
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
# - column-gap: 7px
- justify-items: center
- justify-content: space-between
custom_fields:
#### 1. ROLLO SCHLIEßEN ## close cover
item1:
card:
type: custom:button-card
icon: mdi:arrow-down
tap_action:
action: | ## don't allow button function if window is opened
[[[
if (states[variables.gesperrt].state == 'on') return 'none';
return 'call-service'
]]]
confirmation:
text: |
[[[
if (states[variables.gesperrt].state == 'on')
return 'Rollo kann nicht bewegt werden, weil das Fenster geöffnet ist.';
return 'Rollo bewegen?'
]]]
service: cover.close_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
# widget_icon:
show_name: false
show_icon: true
size: 20px
styles:
card:
# - box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- overflow: visible
grid:
- grid-template-areas: '"i"'
custom_fields:
sperre:
- position: absolute
- top: -10px
- left: 30px
custom_fields:
sperre: | ## show lock icon if window is opened
[[[
if (states[variables.gesperrt].state == 'on')
return `<ha-icon icon='mdi:lock' style='width: 18px; height: 18px; color: red;'></ha-icon>`;
return ' '
]]]
#### 2. ROLLO STOPPEN ## stop cover
item2:
card:
type: custom:button-card
icon: mdi:pause
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
# widget_icon:
show_name: false
show_icon: true
size: 20px
styles:
card:
# - box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i"'
#### 3. ROLLO ÖFFNEN ## open cover
item3:
card:
type: custom:button-card
icon: mdi:arrow-up
tap_action:
action: |
[[[
if (states[variables.gesperrt].state == 'on') return 'none';
return 'call-service'
]]]
confirmation:
text: Rollo bewegen?
service: cover.set_cover_position # cover.open_cover
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
position: 90
# widget_icon:
show_name: false
show_icon: true
size: 20px
styles:
card:
# - box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- overflow: visible
grid:
- grid-template-areas: '"i"'
custom_fields:
sperre:
- position: absolute
- top: -10px
- left: 30px
custom_fields:
sperre: |
[[[
if (states[variables.gesperrt].state == 'on')
return `<ha-icon icon='mdi:lock' style='width: 18px; height: 18px; color: red;'></ha-icon>`;
return ' '
]]]
#### 4. ROLLO 50%
item4:
card:
type: custom:button-card
name: '50%'
# icon: mdi:percent-outline
tap_action:
action: |
[[[
if (states[variables.gesperrt].state == 'on') return 'none';
return 'call-service'
]]]
confirmation:
text: Rollo bewegen?
service: cover.set_cover_position
service_data:
entity_id: '[[[ return entity.entity_id ]]]'
position: 50
# widget_icon:
show_name: true #false
show_icon: false #true
# size: 20px # Icon-Größe
styles:
card:
- padding: 0px
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- overflow: visible
grid:
- grid-template-areas: '"n"'
name:
- padding: 0.6rem
- font-size: 12px
custom_fields:
sperre:
- position: absolute
- top: -10px
- left: 30px
custom_fields:
sperre: |
[[[
if (states[variables.gesperrt].state == 'on')
return `<ha-icon icon='mdi:lock' style='width: 18px; height: 18px; color: red;'></ha-icon>`;
return ' '
]]]
#### ENDE ####
This is the button for the frontend:
#### ROLLO
- type: custom:button-card
entity: cover.tradfri_blind
template: rollos