Shutter Card

Well I was enjoying till the last update and it has broken it. I cannot see my background picture anymore. Do you experience the same?

Great card.
Is it possible to change the graphics from a ridged shutter to a flat one, like the ikea fyrtur?

No, I have the latest one v1.4.0 with latest HA
Home Assistant 2023.3.1
Supervisor 2023.03.1
Operating System 9.5
Frontend 20230302.0 - latest

and all working fine.

As far as I understand, you can only change 1 shutter with a background picture? All the other shutters wil have the same picture? Or is there a workaround for the others?

Don’t remember anymore :slight_smile: Not looked at it since the time when I wrote the post. Sorry.

Yes that is correct. I just redid it because mine had reset to default after the last update. I mean I am no programmer or anything but I followed the Moppersmurf’s instruction and from the looks of it, there will be just one background picture for all blinds.

i want to drag it and it shows me the percentage either as a tool tip or it updates the percentage in the title bar, is this possible with card mod?

i would like to visually stretch the shuttercard a bit. even if the graphics would be “wrong” and blurred. i would like to visually distinguish floor-to-ceiling windows from normal windows. Any way to do this, via card-mod for example?

should look something like this (photoshop)

thanks a lot!

Is it possible to have a diferent image for diferent shutters ?

Any way to do this with a different picture for each blind?

I have solar powered shutters, is there a way to also show the battery percentage in the card?

I really don’t know. But because I updated my pics are gone. I’ll repair it and will look into it.

Hi @Deejayfool
I love your shutter card and u use it since a year now. I use it for closing my sun-screens. I also made an automation for this.
However, I have a feature request for this card.
From a security point of view, I do not like the idea that any of my family members is able to close the screens without knowing e.g. that the windows are still open. That causes great troubles.
In my automation, i use conditions for:

  • Sun strength (=> 20.000 lux)
  • Window is clodes
  • Wind speed is below a certain value.

Would it be possible to add these conditions to the configuration of the shutter-catd?
And if it is already possible with the current card, how could i implement this in the current config of the card?
Regards, Bert


Do you need to disable the “lower” button if some conditions are met?

Hi @Ildar_Gabdullin , Thank you for coming back on this issue!
Yes, I think that would be a solution. But then with a grayed-out icon or some other information about the condition which is not med. (There are 3 conditions which has to be med.)

I do have a card witch shows all 3 conditions that need to be med:

type: horizontal-stack
  - type: custom:mini-graph-card
      - entity: sensor.openweathermap_temperature
        name: Temp.
    line_color: '#e74c3c'
    line_width: 8
    font_size: 75
  - type: custom:mini-graph-card
      - entity: sensor.openweathermap_wind_speed
        name: Wind
    line_color: var(--accent-color)
    line_width: 8
    font_size: 75
  - type: custom:mini-graph-card
      - entity: sensor.outside_luminance_front_illuminance_lux
        name: Zon
    line_color: var(--accent-color)
    line_width: 8
    font_size: 75

But I have no clue how to change the Shutter-Card to implement the 3 entities with there respective values…


Is there anyway to see the opening pourcentage while draging the slider ? It’s really anoying to not be able to see the % while we are setting the position of the shutter.

Other tweakings that could be great :

  • ability to change the shape of the windows (with little wood, bay, windows)
  • One or more leaf
  • ability to change easily the color of the windows chassis and color or shutter

Some inspiration (coming from Jeedom)

It is possible to disable buttons:

  - type: custom:shutter-card
      style: |
        .sc-shutter-buttons {
          {% if ............... %}
          pointer-events: none;
          color: var(--disabled-color);
          {% endif %}

Here all 3 buttons are disabled; any button may be disabled separately if needed.

I am afraid that i am lost a bit.
I tried the following config for the ShutterCard:

type: custom:shutter-card
title: Screen wk Bert
  - entity: cover.screen_4
    name: Werkkamer Bert (4)
    buttons_position: left
    title_position: top
  style: |
    .sc-shutter-buttons {
      {% if sensor.outside_luminance_front_illuminance_lux < 60,000 %}
      pointer-events: none;
      color: var(--disabled-color);
      {% endif %}

I understand that the variable sc-shutter-buttons is a variable in the script-file hass-shutter-card.js .

I tried it first with just one variable; the sun strength in lux.
As Lux value in the if-statement i used 10000, 10,000 60000 1nd 60,000 to test. (current value is 12,254 lux.
But neither values give disabled buttons.
I am sorry, but i am not a programmer, so please …

I also tried to use Template sensors; i

- platform: template
      friendly_name: "Is Sun Above Horizon"
      value_template: "{{ state_attr('sun.sun', 'elevation') > 0 }}"
      friendly_name: "Is Sunny Day"
      value_template: "{{ states('sensor.openweathermap_temperature') | int > 20 }}"
      friendly_name: "Is Warm Day"
      value_template: "{{ states('sensor.outside_luminance_front_illuminance_lux') | int > 20000 }}"
      friendly_name: "Is Windy Day"
      value_template: "{{ states('sensor.openweathermap_wind_speed') | float > 4 }}"
      friendly_name: "Is Window Open"
      value_template: "{{ is_state('binary_sensor.raam_sensor_werkkamer_b_1_contact', 'on') }}"

      friendly_name: "Is Wind Speed Above 4 m/sec"
      value_template: "{{ states('sensor.openweathermap_wind_speed') | float > 4 }}"

I also tried to use the Window Open because I thought that might be simpler and exchanged {% if sensor.outside_luminance_front_illuminance_lux < 60,000 %}
with this: {% if binary_sensor.raam_sensor_werkkamer_b_1_contact = ‘on’ %} in the Style: part of your example.

But still i have no success… Hopefully you can help me further?
kind regard, Bert

This is wrong - and this is not about using card-mod or shutter-card, this is a wrong using HA templating.
Should be at least
{% if states('sensor.outside_luminance_front_illuminance_lux')|float(default=0) < 60,000 %}
(not sure about a comma in “60,000” - looking weird; also I usually use a dot “60.123”, but may be it depends on local settings)

Also, use Dev tools to test your templates.

I have a little problem with the blind.
When I change them, the blind moves to the respective position, but in HA the percentage does not change and neither does the blind.
The position and percentage change only when I go to zigbee2mqtt in the respective device and give a refresh.

Do you have any idea why? And how do I solve it?