Shutter Card

Sorry for the late reaction, but normal life came in between… But I still have not managed to get this working.
To keep it simple I tried your example with simply the entity for ‘window is open’ however, I did not see the the buttons grayed-out and the shutter-card buttons remain working in both positions; Window Open (on) and Closed (off).

type: custom:shutter-card
title: Screen wk Bert
entities:
  - entity: cover.screen_4
    name: Werkkamer Bert (4)
    buttons_position: left
    title_position: top
card_mod:
  style: |
    .sc-shutter-buttons {
      {% if is_state('binary_sensor.raam_sensor_werkkamer_b_1_contact', 'on') %}
      pointer-events: none;
      color: var(--disabled-color);
      {% endif %}
    }

And in the Template Editor all conditions are working:

4) - Test raam wk-Bert open/dicht
{% if is_state('binary_sensor.raam_sensor_werkkamer_b_1_contact', 'on') %}
  Ja, het raam is open
{% else %}
  Nee, het raam is gesloten
{% endif %}
===============
5) Test Lux waarde
Zonsterkte is momenteel: {{ states('sensor.outside_luminance_front_illuminance_lux') }} lux.
{% if states('sensor.outside_luminance_front_illuminance_lux')|float(default=0) < 3500 %}
  Zonsterkte is hoger dan: {{ zonsterkte }} lux.
{% else %}
  Zonsterkte is lager dan: {{ zonsterkte }} lux.
{% endif %}

==================
6)
{% if states('is_sun_above_horizon') %}
 1 - Ja, de zon is boven de horizon
{% else %}
 2 - Nee, de zon is onder
{% endif %}
7)
# {{ states('sensor.openweathermap_temperature') | int > 20 }}
{% if states('sensor.openweathermap_temperature') | int > 20  %} 
 1 - De temperatuur is BOVEN de 20 graden Celcius
{% else %}
 2 - De temperatuur is LAGER dan 20 graden Celcius
{% endif %}

These template sensors are working perfectly looking at the results in the Template Editor.
(To be honest, it is the first time I used the Template Editor; have still a lot to learn from Jinja2.)

BTW, I even tried ChatGPT in the hope that might give me some help with this. It was a very interesting session, but it good not help me; it apologized for that :cry:
Use Home Assistant Lovelace ShutterCard to open and close sunscreens with the following conditions in the ShutterCard:

Hopefully you have still some suggestions…

1 Like

@JohnnSnoww , I do not have this behaviour with the shutter-card. I use two different switches (make) but both are Tasmotized and produce MQTT entities in Home Assistand. So mine are not Zigbee devices. So, I can’t help you with this.

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…

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.

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

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

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 :wink:

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

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

@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

1 Like

@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?

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?

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.

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

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 :slight_smile:

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

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

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.

1 Like

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

Start testing after fixing - must be lowercase

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.

Yes, case is unimportant, my fault)))