Shutter Card

:grin:
And how can I make it smaller like the picture?
(It’s just photoshop) but I want all my shutter to be smaller.

Hi, did you find a solution for this problem?
Or anyone?

I’m using this switch (https://templates.blakadder.com/loratap_SC400W.html) and this shutter card (https://github.com/Deejayfool/hass-shutter-card).

How do I configure home assistant to receive the switch mqtt commands and update the shutter card if I use the physical buttons instead of the button in HA?

What should I place in:

  • cover.yaml
  • switches.yaml
  • templates.yaml
  • etc…

Here’s the commands the shutter switch is sending:

20:57:06.279 MQT: stat/Persiana_Hospedes/POWER1 = ON 20:57:06.298 RUL: POWER1#STATE performs "publish stat/Persiana_Hospedes/POWER1 1" 20:57:06.302 MQT: stat/Persiana_Hospedes/POWER1 = 1 20:57:06.320 RUL: POWER1#STATE=1 performs "POWER2 OFF" 20:57:06.327 MQT: stat/Persiana_Hospedes/RESULT = {"POWER2":"OFF"} 20:57:06.332 MQT: stat/Persiana_Hospedes/POWER2 = OFF 20:57:20.299 MQT: stat/Persiana_Hospedes/RESULT = {"POWER1":"OFF"} 20:57:20.302 MQT: stat/Persiana_Hospedes/POWER1 = OFF 20:57:20.364 RUL: POWER1#STATE performs "publish stat/Persiana_Hospedes/POWER1 0" 20:57:20.370 MQT: stat/Persiana_Hospedes/POWER1 = 0 GPT

hello
can someone please tell me how can i hide this part ?
Screenshot 2024-02-18 052315

Possible by card-mod, but you will have to try it by yourself…

Someone, please?

        - type: custom:shutter-card
          entities:
            - entity: cover.chambre_d_amis
              name: Chambre d'amis
              buttons_position: left
              title_position: bottom
              always_percentage: true
              disable_end_buttons: true
              partial_close_percentage: 18
          card_mod:
            style: |
              .sc-shutter .sc-shutter-bottom .sc-shutter-position {
                display: none;
              }

Play arround with .sc-shutter .sc-shutter-bottom .sc-shutter-position as I can’t remember which one is which. But the result is this:

image

EDIT: Maybe you’ll like it or not but this is what I did, it is overkill but this how I like it:

        - type: custom:shutter-card
          entities:
            - entity: cover.chambre_d_amis
              name: Chambre d'amis
              buttons_position: left
              title_position: bottom
              always_percentage: true
              disable_end_buttons: true
              partial_close_percentage: 18
          card_mod:
            style: |
              .sc-shutter .sc-shutter-bottom .sc-shutter-position {
                display: none;
              }
        - type: custom:mod-card
          style:
            hui-horizontal-stack-card$: |
              hui-tile-card {
                margin-right: 10px !important;
                margin-bottom: 10px !important;
                width: 150%;
                flex: auto !important; 
              }
              hui-entity-card {
                margin-bottom: 10px !important;
                flex: auto !important; 
                min-width: 85px !important;
              }
          card:
            type: horizontal-stack
            cards:
              - type: entity
                entity: cover.chambre_d_amis
                attribute: current_position
                unit: '%'
                card_mod:
                  style:
                    .: |
                      .header {
                        display: none !important;
                      }
                      .info .value {
                        font-size: 16px;
                      }
                      .info {
                        padding-top: 0px !important;
                      }
                      .info .measurement {
                        font-size: 16px;
                      }
              - features:
                  - type: cover-position
                type: tile
                entity: cover.chambre_d_amis
                vertical: false
                show_entity_picture: false
                card_mod:
                  style:
                    .: |
                      ha-card .content {
                        display: none;
                      }
                      ha-card .container {
                        display: none;
                      }
                      ha-card .background {
                        display: none;
                      }
                    hui-card-features$:
                      hui-cover-position-card-feature$: |
                        ha-control-slider {
                          --control-slider-thickness: 20px !important;
                        }

image

1 Like

Thank you! I’ll try that! :v:

Hi everyone .
has any off you guys managed to resize the shutter for example my blinds ar 2 m high but the window is only 1.2 m high how can i make the shutter to stop at a certain point like a limitation to how much can it close .

Love the card. Appreciate your work!
However the card doesn’t work when casted to Nest hub. The dashboard view is ok and other pictures (picture-elements) work fine.
Is there a workaround?

1 Like

Is there a way to group two blinds into one?
Thanks,
Rob

1 Like

I am looking for the exact same thing.
i tried to create a group but that didnt work.

Hi there,

I’m working with this card and I saw in the topic that many asked an option in order to hide or not the command buttons to open/stop/close the shutter.

While we are waiting for this feature and since someone in the thread suggests to modify the native js file of the integration without saying what raws to hide … well … could someone tell me which are this rows? Obviously unless it’s not too complicated.

1 Like

Hi, Andre,
I am use a Google Nest Hub gen2 (GNH) also for casting a Home Assistant Dashboard, but since a few moths I am not able to use buttons anymore. Also i only can cast a dashboard which starts with ‘lovelace’, and then a View. Any other dashboard the GNH reacts that it can not find the URL. But in the past this has worked OK.

Would it be possible for you to share your configuration for cassting to the GNH?

Hi,

kannst du bitte den Code für die grünen Rollo Karten teilen? Bin gerade am basteln aber bekomme es nicht hin. Danke.

Does anyone know how to get the buttons into one row?
One is always below when I have 2 next to each other in a horizontal stack.

Also the hight of the window/shutter is a bit to big

Screenshot 2024-07-12 091514

One more question to the Pros.
I would like to have a different picture on the right one as it is for windows.
I tried to copy the whole hass-shutter-card and renaming it but it doesn’t work.

(changed the base64 image inside).
The whole custom:window-card is not found.
I tried to also register it under ressource (over dashboard) same issue

anyone knows how this is done correctly?

hi there

does anybody also have the following issue. i have a weird semi transparent plane and the arow that shows the position in the middle of the element.

the arrow tells me if the shutters are open or closed. but the visualisation of the shutter does not change, also the text with state is wrong.

i use a sonof dual R3

image

Use edit dashboard:
strong text
image

I used this code:

 - type: custom:shutter-card
            entities:
              - entity: cover.terasos_uzuolaida
                name: Terasos
                buttons_position: left
                title_position: bottom
                blind_color: '#FFD580'
            grid_options:
              columns: 6
              rows: auto

And got next result:
image

Hi all,

I like to introduce here the Enhanced Shutter Card:

EnhancedShutterCard

It is a follow up of the shuttercard in this topic.

I started changing this card to create a PR, but due to this card’s inactiviy, I decided to create my own repository.

This Card has all the options of original Card, but also the options to add your own window/shutter and background images. You also can resize the shutter-images.

Look at the repository and give it a try !

Want to reply on this Card? Please do so in the topic of the Enhanced Shutter Card

1 Like