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.
Hi Martin
Nice job and many thanks for sharing your code 🙂
I have create a similar card who works very well, but unfortunately one thing didn’t work.
The background color will not change by state attribute to green!
No error message occurs but the color will also not change 🙁
Any idea?
Since I’m using it to control venetian blinds, the next challenge is to add a blind position slider 🙂
thanks
reards
Kei
Hi.
Please, contact me on messenger.