Form my window Roller Shutters I wanted to have possibility of manual Up & Down control, Slider control and Preset Buttons. I also wanted to have both Roller Shutters in same section, without any shadow or spacer in between.
I searched forums and FB Groups and I found some pieces of code hare and there but nothing worked as I wanted to.
I then found custom:vertical-stack-in-card and everything changed.
To achieve what you see on the pictures I used:
- custom:vertical-stack-in-card
https://github.com/ofekashery/vertical-stack-in-card - custom:button-card
https://github.com/custom-cards/button-card - custom:slider-entity-row
https://github.com/thomasloven/lovelace-slider-entity-row
The code for everything is:
type: custom:vertical-stack-in-card
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- entity: cover.master_bedroom_shutter_1
name: ''
title: Master Bedroom Left Screen
state_color: false
show_header_toggle: true
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 0
entity_id: cover.master_bedroom_shutter_1
entity: cover.master_bedroom_shutter_1
name: Close
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 0) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 25
entity_id: cover.master_bedroom_shutter_1
entity: cover.master_bedroom_shutter_1
name: 25%
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 25) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 50
entity_id: cover.master_bedroom_shutter_1
entity: cover.master_bedroom_shutter_1
name: 50%
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 50) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 75
entity_id: cover.master_bedroom_shutter_1
entity: cover.master_bedroom_shutter_1
name: 75%
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 75) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 100
entity_id: cover.master_bedroom_shutter_1
entity: cover.master_bedroom_shutter_1
name: Open
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_1', 'current_position', 100) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: entities
entities:
- type: custom:slider-entity-row
entity: cover.master_bedroom_shutter_1
hide_state: false
grow: true
full_row: true
step: 5
style:
.: |
ha-card { --ha-card-box-shadow: 0px;
height: 30px;
}
'#states div':
slider-entity-row:
$: |
ha-slider {
height: 17px;
border: 1px solid grey;
border-radius: 10px;
padding: 9px 2px 10px 2px;
}
slider-entity-row:
$:
ha-slider:
$:
'#sliderKnob': >
.slider-knob {border-radius: 10px} .slider-knob {padding:
30px 30px 0px 0px} .slider-knob {border: 1px solid
rgba(100,100,100, 0.4)} .slider-knob {background-color:
rgba(255,255,255, 0.9)} .slider-knob {width: 0px}
.slider-knob {height: 0px}
.slider-knob-inner {border: 0px} .slider-knob-inner
{background-color: rgba(0,0,0,0.0)}
.slider-knob-inner::after {background-color:
rgba(0,0,0,0.0)} .slider-knob-inner::after {border: 0px)}
.slider-knob-inner::before {background-color: rgba(0,0,0,
0.6)} .slider-knob-inner::before {border: 0px)}
paper-progress:
$: >
#progressContainer {background-color: rgba(0, 0, 0, 0.0)}
#primaryProgress {background-color: rgba(0, 0, 0, 0.0)}
state_color: false
show_header_toggle: true
- type: vertical-stack
cards:
- type: entities
entities:
- entity: cover.master_bedroom_shutter_2
name: ''
title: Master Bedroom Right Screen
state_color: false
show_header_toggle: true
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 0
entity_id: cover.master_bedroom_shutter_2
entity: cover.master_bedroom_shutter_2
name: Close
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 0) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 25
entity_id: cover.master_bedroom_shutter_2
entity: cover.master_bedroom_shutter_2
name: 25%
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 25) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 50
entity_id: cover.master_bedroom_shutter_2
entity: cover.master_bedroom_shutter_2
name: 50%
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 50) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 75
entity_id: cover.master_bedroom_shutter_2
entity: cover.master_bedroom_shutter_2
name: 75%
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 75) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 100
entity_id: cover.master_bedroom_shutter_2
entity: cover.master_bedroom_shutter_2
name: Open
show_icon: false
card_mod:
style: |
ha-card {
--ha-card-background:
{% if is_state_attr('cover.master_bedroom_shutter_2', 'current_position', 100) %}
green;
color: white;
{% endif %}
}
styles:
card:
- border: 0px 0px 0px 0px
- border-radius: 0%
- box-shadow: 0px 0px 0px 0px
- type: entities
entities:
- type: custom:slider-entity-row
entity: cover.master_bedroom_shutter_2
hide_state: false
grow: true
full_row: true
step: 5
style:
.: |
ha-card { --ha-card-box-shadow: 0px;
height: 30px;
}
'#states div':
slider-entity-row:
$: |
ha-slider {
height: 17px;
border: 1px solid grey;
border-radius: 10px;
padding: 9px 2px 10px 2px;
}
slider-entity-row:
$:
ha-slider:
$:
'#sliderKnob': >
.slider-knob {border-radius: 10px} .slider-knob {padding:
30px 30px 0px 0px} .slider-knob {border: 1px solid
rgba(100,100,100, 0.4)} .slider-knob {background-color:
rgba(255,255,255, 0.9)} .slider-knob {width: 0px}
.slider-knob {height: 0px}
.slider-knob-inner {border: 0px} .slider-knob-inner
{background-color: rgba(0,0,0,0.0)}
.slider-knob-inner::after {background-color:
rgba(0,0,0,0.0)} .slider-knob-inner::after {border: 0px)}
.slider-knob-inner::before {background-color: rgba(0,0,0,
0.6)} .slider-knob-inner::before {border: 0px)}
paper-progress:
$: >
#progressContainer {background-color: rgba(0, 0, 0, 0.0)}
#primaryProgress {background-color: rgba(0, 0, 0, 0.0)}
state_color: false
show_header_toggle: true
Below is a Light Mode screenshot from my phone.
