Shutter Card

deltabert · August 9, 2023, 5:22pm

I found something peculiar, don’t know if that is of importance for my issue?
In the default shutter-card config, I am able to use the buttons left to the shutter as well use the mouse pointer to drag the shutter open or close.

With the by @Ildar_Gabdullin proposed config, the buttons ate still usable, but drag with the mouse is no longer working.
But I do not get the grayed-out buttons. Perhaps this has something to do with the statement:

color: var(--disabled-color);

I do not know where this variable (–disabled-color) is coming from…

Ildar_Gabdullin · August 9, 2023, 7:46pm

Regarding colors.
You seem to be not using a default theme.
Check with a default theme, it definitely has a proper —disabled-color variable.

Regarding mouse drag. Cannot check it myself (far from any civilian pc) but think that the “sc-shutter-buttons” selector does not touch the “shutter” element.

deltabert · August 10, 2023, 7:46am

Hoi Ildar, yes that was the problem. I did had an other theme…
Selected ‘Use default Theme’ and now it works. I was in the impression that the variable --disabled-color came from the shutter-card.js. Sorry, I am not a programmer, and rather new to these things.

Problem is still that (when the window is open) if you click in the location of the buttons, that the screen still reacts.
Would there be a possibility to prevent all actions of the screens?

And an other problem is, that when I do this for one window, the buttons from all windows are affected the same way; even if the windows are closed…
But I have read similar issues with shutter-card.js, where changes for one shutter effects all orther windows. So perhaps this is an issue with shutter-card.js?
Unfortunately, the maker of this card @Deejayfool does not react on questions…

So, perhaps i have to live with the fact that it is not possible to find a solution for my issue.
On the other hand, I can imagine that more people would like a solution for this.

Thank you very much for your help and patient with this.
Kind regards, Bert

deltabert · August 10, 2023, 3:57pm

Hi @Ildar_Gabdullin I give-up on this and will try different approach.

I am going to use the conditional card with the custom:stack-in-card,
Then I can use a picture card with a picture from the original shuttter-card as one of the two cards, and my original shutter-card as the second card.
I can display either of the two depending on the status of the window open/close, or the other three conditions which i would like to add.
I would like to thank you very much for thinking with me in this exercise.
Kind regards, Bert

Mariusthvdb · August 11, 2023, 2:23pm

As messaged privately , who not use a conditional card instead of pointer_events: none.

This card is too deviant from core HA cards to reliably mod, and even then…

I’ve stopped using it because of that.
However, showing/hiding based on conditions can easily be doen with conditional or state-switch and not rely on card-mod of the card itself

O wait never mind…. You’ve reached the same conclusion

Btw you never need stack-in-card if you already have card-mod.

Try reducing custom cards, and simply use an entities or vertical-stack

Ildar_Gabdullin · August 17, 2023, 12:58pm

Just tested myself, works absolutely FINE - it is possible to disable buttons & blinds as well:

  - type: custom:shutter-card
    card_mod:
      style: |
        .sc-shutter-buttons,
        .sc-shutter-selector {
          {% if is_state('input_boolean.test_boolean','on') %}
          pointer-events: none;
          color: var(--disabled-color);
          {% endif %}
        }
    entities:
      - entity: cover.test_garage_door

assssssss

deltabert · August 17, 2023, 2:15pm

@Ildar_Gabdullin That looks wonderfull!

At first I could not reproduce your example in my situation…
Then I think I had a lot of problems, because I had multiple shutter-cards to test in my View, and at first I was using a non supported Theme.
And I noticed, the configuration for one card influences the other cards in the same dashboard view.
So I deleted all other cards in this test view and now it is working… This is great!

But there is something peculiar with the shutter-card.
When I have a single shutter-card in a view, it works perfectly. But since I have 4 screens, I wanted to create 4 shutter-cards in one view.
But that does however not work. I created the following Verticat Stack card with 2 shutter cards. And then all buttons are not wotking and the blinds can’t be draged either…

The code of the single, working shutter-card:

type: custom:shutter-card
title: Screens example Ildar_Gabdullin
card_mod:
  style: |
    .sc-shutter-buttons,
    .sc-shutter-selector {
      {% if is_state('binary_sensor.raam_sensor_keuken_1_contact','on') %}
      pointer-events: none;
      color: var(--disabled-color);
      {% endif %}
    }
entities:
  - entity: cover.screen_1
    name: Screen (1) Keuken

With this picture:

And this is the code of the other card in the same view:

type: vertical-stack
cards:
  - type: custom:shutter-card
    title: Screens voorzijde huis
    card_mod:
      style: |
        .sc-shutter-buttons,
        .sc-shutter-selector {
          {% if is_state('binary_sensor.raam_sensor_keuken_1_contact','on') %}
          pointer-events: none;
          color: var(--disabled-color);
          {% endif %}
        }
    entities:
      - entity: cover.screen_1
        name: Screen (1) Keuken
        buttons_position: left
        title_position: top
  - type: custom:shutter-card
    card_mod:
      style: |
        .sc-shutter-buttons,
        .sc-shutter-selector {
          {% if is_state('binary_sensor.raam_sensor_werkkamer_am_1_contact','on') %}
          pointer-events: none;
          color: var(--disabled-color);
          {% endif %}
        }
    entities:
      - entity: cover.screen_2
        name: Screen (2) wk Anne-MArie
        buttons_position: left
        title_position: top

And this is the corresponding picture:

You can see that the buttons are disabled.
But also if I create a second shutter card, a duplicate from the working card and change the windo-sensor then in both card the buttons are disabled… I have no idea why this is hapening.
Perhaps there is indeed something wierd with this card?

I really would like to thank you very much for you patience and persistence with me and my issue!

Kind regards, Bert

deltabert · August 17, 2023, 7:31pm

@Ildar_Gabdullin , I discovered an other thing.
When I place each shutter-card in its own (separate) Dashboard View, then than all 4 work correctly with your configuration.
But when I copy all 4 shutter-cards to one and the same Dashboard View, then it is fault.
Hope you have still an other idea?

Ildar_Gabdullin · August 17, 2023, 7:49pm

This is a BUG imho.
And in my setup (Win+Chrome) I see no issues.

Here 4 cards for same “cover” entity (which is not working), each card depends on a personal “input_boolean” flag, everything seems to work OK (ofc I have not tested whole 100500 cases).
Are you using Safari?

deltabert · August 17, 2023, 8:41pm

I was testing this in Edge on Win10
But I will try it with other browsers.

EDIT: Hi Ildar, I duplicated the shutter-cards in their separate views and moved those all to one other view. Then I tested it with Chrome, Opera, Firefox, Firefox Developer Ed, Brave, Vivaldi and Mullvad Browser. (Yes, I tried them all ;-)) But all browsers gave the same faults. If one or two windows are open, all shutter-cards are not operable anymore.

BTW, I tested this on two different laptops. Both Win-10 and laatest MS fixes, both with the browsers mentionned above.
BTW2, I created a new Dashboard and copied all 4 cards to that dashboard. In pastebin you find this configuration. Perhaps you find something i did wrong…
BTW3, Perhaps @Deejayfool could have a look at this behaviour of his shutter-card…
BTW4, As it stands now, I think I have 2 options; 1) accept this and use separate views with this card, or 2) go with the suggestion Mariushvdb did in post #126 of this thread.

c.marteddu · September 20, 2023, 9:56am

How long did you wait? I can’t create the.gz file

Winzy54 · January 18, 2024, 10:35am

Hello.
your design looks great. i try to use it as well. but for some reason the style doesnt change.
i have very new to coding and HA so probably you will find my mistake quick

here is my code: (i have it as grid maybe i need to change to card but i dont even know how to do that)

square: false
type: grid
cards:
  - entities:
      - entity: cover.stairs
      - entity: cover.middle
      - entity: cover.kitchen_2
    style: |
      ha-card {
        font-size: 11px !IMPORTANT;
      }
      .sc-shutter-label {
        font-size: 15px !IMPORTANT;
      }
      .sc-shutter-top {
        text-align: left !IMPORTANT;
      }
      .card-header {
        font-size: 20px !IMPORTANT;
      }
      .sc-shutter-selector-slide {
        width: 54% !IMPORTANT;
      }
      .sc-shutter-selector-picture {
        background-size: 100px 100% !IMPORTANT;
        background-repeat: no-repeat !IMPORTANT;
      }
      .sc-shutter-selector-picker {
        width: 54% !IMPORTANT;
      }
    type: custom:shutter-card
columns: 1

Winzy54 · January 18, 2024, 11:31am

hi. did you manage to change the height of the shutter?

Ildar_Gabdullin · January 18, 2024, 9:02pm

Starting from card-mod 3.4.0 you are obliged to place “style” option under the “card_mod” option. Go to card-mod repo for details.

Winzy54 · January 18, 2024, 10:10pm

thanks.
I managed to do that. but i am not so familiur with CSS codes
any change you can help me make each window with its arrows smaller.

here is my code:

square: false
type: grid
cards:
  - entities:
      - entity: cover.bed_room_bed
        name: Bed
      - entity: cover.bed_room_small
        name: Small
      - entity: cover.bed_room_dressing
        name: Dressing
    card_mod:
      style: |
        ha-card {
         font-size: 11px !IMPORTANT;
        }
        .sc-shutter-label {
         font-size: 15px !IMPORTANT;
        }
        .sc-shutter-top {
         text-align: left !IMPORTANT;
        }
        .card-header {
         font-size: 20px !IMPORTANT;
        }
        .sc-shutter-selector-slide {
         width: 88% !IMPORTANT;
        }
        .sc-shutter-selector-picture {
         background-size: 153px 100% !IMPORTANT;
         background-repeat: no-repeat !IMPORTANT;
        }
        .sc-shutter-selector-picker {
         width: 88% !IMPORTANT;
        }
    type: custom:shutter-card
    title: Bed Room
columns: 1

Ildar_Gabdullin · January 18, 2024, 10:21pm

Start testing after fixing - must be lowercase

Winzy54 · January 18, 2024, 10:28pm

do you mean all the !IMPORTANT?

its working with lowercase and uppercase.

but i dont know what to change or add to make everything smaller.

Ildar_Gabdullin · January 18, 2024, 10:52pm

Yes, case is unimportant, my fault)))

Winzy54 · January 19, 2024, 2:10pm

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

buutske · February 11, 2024, 10:57am

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