Home Assistnat – Roller Shutter & Preset buttons

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.