deejayfool/hass-shutter-card

Shutter card for Home Assistant Lovelace UI

Shutter card

Note : Be careful, since version 2021.11.0 of Home Assistant, there is a breaking change in the icon buttons. So install v1.3.0 of this card only if you have at least the version 2021.11.0 of Home Assistant

This card allows to open, close or set a shutter to the opening rate you want.

Configuration

General

Name	Type	Required	Default	Description
type	string	True	-	Must be "custom:shutter-card"
title	string	False	-	Title of the card

Entities

Name	Type	Required	Default	Description
entity	string	True	-	The shutter entity ID
name	string	False	Friendly name of the entity	Name to display for the shutter
buttons_position	string	False	left	Set buttons on left, right, top or bottom of the shutter
title_position	string	False	top	Set title on top or on bottom of the shutter
invert_percentage	boolean	False	false	Set it to true if your shutter is 100% when it is closed, and 0% when it is opened
can_tilt	boolean	False	false	Set it to true if your shutters support tilting.
partial_close_percentage	int	False	0	Set it to a percentage (0-100) if you want to be able to quickly go to this "partially closed" state using a button.
offset_closed_percentage	int	False	0	Set it to a percentage (0-100) of travel that will still be considered a "closed" state in the visualization.
always_percentage	boolean	False	false	If set to true, the end states (opened/closed) will be also as numbers (0 / 100 % ) instead of a text
shutter_width_px	int	False	153	Set shutter visualization width in px. You can make it thicker or narrower to fit your layout.
disable_end_buttons	boolean	False	false	If set to true, the end states (opened/closed) will also deactivate the buttons for that direction (i.e. the "up" button will be disabled when the shutters are fully open)

Remark : you can also just give the entity ID (without to specify entity:) if you don't need to specify the other configurations.

Sample

type: 'custom:shutter-card'
title: My shutters
entities:
  - entity: cover.left_living_shutter
    name: Left shutter
    buttons_position: left
    title_position: bottom
  - cover.bedroom_shutter

Install

If you use HACS, the resources will automatically be configured with the needed file.

If you don't use HACS, you can download js file from latest releases. Drop it then in www folder in your config directory. Next add the following entry in lovelace configuration:

resources:
  - url: /local/hass-shutter-card.js
    type: module

hass-shutter-card's Issues

Configuration for USB relay controlled shutters?

Thx for providing this excellent Home Assistant shutter card. I am using it with two different home assistant integrations for my solar powered Velux SSL blindes

1. Velux SSL with IO-Homecontrol integrated via Velux KLF 200
2. Velux SSL (old, no IO-Homecontrol) integrated with an USB relay to switch the remote control directly (hardware hack)

For 1. everything works perfect but for 2. I cannot use the full hass-shutter-card functionallity as my hardware hack does not provide any status information.

type: 'custom:shutter-card'
title: Velux Shutters
entities:
  - entity: cover.markise_dach
    name: VELUX SSL via USB-Relay
    buttons_position: left
    title_position: bottom

Here is my configuration.yaml:

# Velux KLF 200 for Windows and shades
velux:
  host: 192.168.178.129
  password: <my-velux-klf-password>

# Velux SSL roof shades via relay
cover:
  - platform: command_line
    covers:
      markise_dach:
        command_open: 'echo -e "\xFF\x01\x01" > /dev/ttyUSB0; sleep 0.2; echo -e "\xFF\x01\x00" > /dev/ttyUSB0'
        command_close: 'echo -e "\xFF\x02\x01" > /dev/ttyUSB0; sleep 0.2; echo -e "\xFF\x02\x00" > /dev/ttyUSB0'

I know I did not implement

        command_stop: ...
        command_state: ...
        value_template: >
          {% if value == 'open' %}
          100
          {% elif value == 'closed' %}
          0
          {% endif %}

as I have somehow to fake these commands and status e.g. by counting the seconds the blind typically requires to close. Now my question is:

What kind of information and status is required in order to make hass-shutter-card work?
Do you have similar examples already working?

FER: option to remove the up/down/stop buttons

Hi

is it possible to maken an option to hide the controls? i like this card just to show the state of the screen, not for using it
see my layout, i have rows of buttons, but they dont fit :)
if i could remove the controls, then maybe its niced
or maybe on option to hide + an option, so if you click on a cover, it opens if closed, and closes if opened ...

(i dont have an set position on my covers) mine can only be 0 or 100 closed/opened

screenshot:

https://www.dropbox.com/s/gvmacmgog568ou9/shutter.PNG?dl=0

Request Offset

Hi,

my window is half open, when the UI is set to 66%.
Is it possible to set an offset option, so that the ui fits to the real cover position?

Button do not switch function

I have to setup multiple window shutter.
The problem is that not on all are working correct.
This means, if you touch the up button the shutter goes down.
With the option "invert_percentage: true" the shutter will show the status correctly but the arrow Buttons ( up / down) are not changing. Is it possible to implement the function? (Arrow-up button -> down, arrow-down button -> up).
Thanks
Mirko

Request: Movement Feedback

Hello!

First I want to congratulate for this awesome plugin!
Also this is not any issue but a request to add some sort of visual feedback when the shutters are going up or down on the addon 😁
Also, long press on the sensor "title" could Open the sensor data.

Thanks!

One more scaling issue

... manifests itself when using this card with Thomas Loven's fold-entity-row card. In which case the right hand side of the shutter card is simply cut off - making the combination visually unattractive. A pity, as this is exactly the hallmark of this card :-(

Use card without percentage

Hi,

i have template covers, so only up/down/stop command ... no percentage ..

i have implemented this card now, the card shows, but i always see "undefined" , also the up/down arrow doesnt work
the word "undefined" is where the 0 .. 100% should be

Shutter position (where do I place boolean)

Where do I put boolean true for 0 and 100%.
Can I have an example please

Feature Request | square - rectangle hor & vert

Hi,

I love this card! Good job!!
We have a square (W=H), horizontal (W>H) and vertical (W<H) shutters in the same room. Any way to visualize this or can you alter this with with entity props?
I tried but my CSS knowledge is too little ...

Mario

Covers without position percentage available display undefined

Hi,

thanks for this card. One issue though:

for example a cover defined as a template and not providing position value displays undefined for position.
A configuration parameter for hiding the position would be welcomed.

platform: template
covers:
  reluxa:
    friendly_name: "Living shutter"
    value_template: >-
      {% if states('input_boolean.reluxa_open') == "on" %}
        open
      {% else %}
        closed
      {% endif %}
    open_cover:
      service: script.reluxa_open
    close_cover:
      service: script.reluxa_close
    stop_cover:
      service: script.reluxa_stop
    icon_template: >-
      {%- if  is_state('input_boolean.reluxa_open', 'on') -%}
      mdi:border-all-variant
      {%- else -%}
      mdi:view-headline
      {% endif %}

KNX Shutter without position

Hello, thank you for the great roller blind visualization. Unfortunately, the position is not displayed for me.

The KNX roller blind has the following values

- name: "Büro Hof"
  move_long_address: '3/1/37'
  move_short_address: '3/1/39'
  position_address: '3/1/38'
  position_state_address: '13/1/38'
  travelling_time_down: 15
  travelling_time_up: 16

it looks like the position data are given. But unfortunately this does not appear in the picture.

what am I doing wrong

New property..

Hello @Deejayfool ,

As I already told you, I love your card..
If you want you can add the sliding door option instead of window, and the movements from right to left or left to right (user configurable) and change the actions of the mouse, at the moment you could rotate the psd files, while someone manages to do some more specific ..
I think there are many people looking for a card that can do this ...

Thank you.!

Current image clashes with MDI-icons

They look very out of place with the MDI-standard icons

Would it be possible to create an image that matches the MDI-icons?

I believe something based on these might work?
https://materialdesignicons.com/icon/window-shutter
https://materialdesignicons.com/icon/window-shutter-open
https://dev.materialdesignicons.com/icon/window-shutter-alert

support for curtains?

Hi, love the look of this, and starting using it! And I'm not sure if it makes sense, but could this also support curtains (left-right) and blinds (up-down) with matching visuals?

Request: Smaller or scalable graphics

Not an issue, but a request:
It would be great if the shutter graphic was just a little smaller, or even scalable, so we can fit 2 next to each other in a horizontal stack. Especially on mobile, to save screen estate.
Right now they are being cut off at the right side.

bad indentation of a sequence entry

Hello everybody

Does anyone know why I get this error?

Errores de configuración detectados:
bad indentation of a sequence entry (5:9)

2 | title: Persianas
3 | entities:
4 | - cover.shellyswitch25_d8bfc01a522f
5 | name: Left shutter
-------------^
6 | buttons_position: left
7 | title_position: bottom

Thanks a lot

Request: support for awnings

A similar card for awnings would be great, especially if it handles their peculiarity of being considered "closed" when fully extended (you'd call that "open" IRL).

Invert open/close

Hi, I have some covers and when they are open the card shows a closed shutter.
So if it's possible to invert this with an option in the card thois would be great

Position integration

It would be fine to use home assistant cover mqtt integration states to animate buttons : open, closed, opening, closing, stopped
same lovelace cover button does.
Thanks

Enhancement request: step sliding

Great work! 😃
To do the same job I was using an input_number with this configuration:

awning_group_position:
  name: Awnings
  min: 0
  max: 100
  step: 25
  mode: slider
  unit_of_measurement: '%'
  icon: mdi:pan-horizontal

It would be great if your custom card would have a step parameter, allowing the user to set 'discreet' sliding actions (e.g. only 0% - 25% - 50% - 75% - 100%).

Dark mode images

Hi, would you be able to offer alternative darker blinds images for dark mode themes?

Dark grey / gun metal instead of light grey / white for example.

Very nice work btw.

Qubino shutter zwave reads open 257%

Hi,
I have an issue that is as follows:
When my blinds are fully opened it states that they are open 257%.
This creates a problem with up / stop and down arrow.
% do not change nor do the illustration of the blinds movement up / down.

during down movement i cannot use stop button to stop them at any point.
during up movement i can stop the blinds in any position.

Also, it is not possible to drag the blinds to any level.

Note: i have a Tradfri (IKEA) blind that works perfectly on a second card.
Drag, up down and stop works as they are supposed to.

Qubino flush shutter dc / Shutter card 1.2.0
Home assistant supervised, version 2020.12.7 on debian 10 (Buster)
Docker 20.10.1

Best regards
// Hans

Invert_percentage not working with graphic

When using the invert_percentage entity, the arrows on the card are correct and the graphic displays the correct position; however to use the graphic to set the position, I have to drag the graphic to the inverse.

(ex. If the blinds are set to have 30% of the window showing and want to set the blinds to have 40% of the window showing, I have to drag the graphic up to the 60% showing)

This might because the value for the position of a cover might not be inverted, while the lower and raise commands are simply swapped.

Add support for tuya shutters

Tuya shutters are currently broken.

They supply their percentage in the entity

No percentage

Today a new firmware 1.8.16 was released for the HmIP-BROLL.
Since then the shutter card does not show any percentage of the shutter.

Feature Request | Add Horizontal Cover

I know this is called Shutter Card but if you could add an image and option for horizontal sunshades that would be great. My vertial cover/shutter comes out at the end of the horizontal cover. We have allot of these in the netherlands and germany for sure too.
![SunRain Horizontal Cover]. See image of the product I have at my home.

(https://user-images.githubusercontent.com/1422692/118152894-885c5f00-b415-11eb-943d-85ae7dcf018a.jpg)

not available for 0.155.2

Hi. This has been an awesome integration!.

Upgraded to 0.115.2 HA core and now see:

`Custom element doesn't exist: shutter-card.
entities:

• buttons_position: left
  entity: cover.living_room_cover
  name: Living Room
  title_position: bottom
  title: Living Blind
  type: 'custom:shutter-card'`

Is this an incompatibility issue?
Appreciate any help.

Horizontal shades control

If it's possible can you add control to horizontal shades. I have a Tuya Zemismart shades and would like to control them same way like your shutters
TY

Stop Button

Cool Card, thank you very much.
Is it possible to hide the stop button?

Issue: Blind not centered

When I insert the Custom: blind-card into a Custom: vertical-stack-in-card, the curtain is automatically decentralized on the card interface. I tried to solve it by using a built-in style and putting a custom css in it, but it doesn't override it.

This is the code

- type: custom:blind-card
    entities:
      - entity: cover.tradfri_blind
        name: Tenda Studio
        buttons_position: right
        title_position: top
        blind_color: '#636160'

And i've added this piece of custom CSS.

style: |
      .sc-blind-middle {
        margin: auto;
      }

But nothing happens.

Adding support for venetian blinds

Hello that's the best custom card what I used in my life :)>

I just wondering if is any chance (in the future) to add support for venetian blinds?
Just extra option for tilt position.

Cheers Lucas.

Improve funcionality for gate and garage door

Hello,
This is a nice work, but i'd love if you also do it for a garage door, and for a gate?
Since the principal is the same its just a visual change and everyone whould love.

Thanks

Garage door:

Gate:

Request: Side by side shutter

I would like to second @da_syygy suggestion to have side by side shutters/shades in order to support those that have a separate day and night covering. Something like the below image.

Shutter doesn't scale

Hi,
great card so far. I was looking for something like this for some time. But is it possible, that the shutter image will scale to fit the size of a horizontal stack in mobile view.
It looks okay on a desktop PC but the same card looks terrible on my mobile

This is a combined vertical / horizontal stack.
Maybe you can fix this, if not I will use the card anyway but without stacking.
Kai

Broadlink 433mhz

Hello,

is it possible to add this card to shutters controled by Broadlink (433mhz)? If so, how can I do it?
I have all my shutthers as entities but I got this result... (the ones at the top are working, but I love this card and the STOP function)

https://i.ibb.co/XyY5V71/1.jpg

Help! - I want to edit the color of the sutters, how to?

Hi all,

This is a great card, however I would like to have the shutters in another color than the default.

I've installed this card through hacs but I can't find the location of the .PNG files, which I need to edit for changing the color.
Can anyone help me?

invert_percentage

Hi, great work.

invert_percentage changes the position of the cover image, not the displayed percentage.
If the shutter is open (100%) and you turn on the invert_percentage option, the shutter will be shown in the card as closed but still 100%.
In my case 0% is open and 100% closed. :)
Thanks

one card - multiple shutters

hello there is possible to manage multiple shutters by one shutter card ? could someone show me configuration ?

More configurations

It would be great to in some way, like with smaller icon (not so wide) to make this card fit better. If you have 3 shutters it would be much better to e able to combine in some way the look. I tried the vertical stack card but again the icon doesnt fit well if you have eg 3 shutters.

No visual editor available for: custom:shutter-card

Hi.
I need your help please. I have installed that crazy shutter-card via HACS, so everything it's auto configurated.
But, when i try to configure an Shelly 2.5 Shutter control appears that info: No visual editor available for: custom:shutter-card

What i'm doing wrong?
That's also normal the "custom:shutter-card" appears on red?

Thanks in advance

deSousa

Added Card via HACS

I added the Shutter Card via HACS and receive and error Custom element doesn't exist: shutter-card.

Should I just add it manually?

button status

Is there any way to make the directional button grayed out when the end position is reached?

thanks in advance.

Is the shutter movement supposed to trigger the buttons?

Awesome design btw. Love it.

But how does the shutter movement by a cursor for example trigger the button actions? Got the buttons working with input booleans toggle actions. I have a RF control open/stop/close and are triggered by the broadlink rm.

But what I am trying to achieve is a rf time based action on the position of the shutter height.

Can this be achieved?

Thanks

Support fro vertical blinds

Would it be possible to support vertical blinds like the one below, it is possible to control it but the graphic is up to down and not left to right

https://www.home-assistant.io/integrations/hunterdouglas_powerview/

Please help with shutter-card

I hope i am here at the right place for seeking help...
I installed the shutter-card via HACS. But when i configure the card it gives mne this error:

And when i try to use the card it gives this error nessage:

I am using several switches which are configured with Tasmot fw, and they all work perfectly with MQTT.
Also in HA they are working:
In Configuration::Entities when I select the entity: cover.screen_1, the this is working (Screens are reacting):

When I press the buttons or use the slider, the screen functions.
BTW, I had tested this before on a test RPi3, and at that time i did no had this problem. It is now on a newly installed Home Assistant Superviced Docker install on a RPi4. Using HA version 0.117.6.
BTW2, I already deleted and reinstalled the custom shutter-card via HACS without success.
Also i have currently 3 other custom cards installed via HACS and they do work correctly... And, i restarted Hass multiple times...
Even rebooted the RPi.
I checked if the js file was installed:

Hopefully you are able to help me.

Position undefined after HA restart

Hi,
Thanks for your awesome plugin that I'm discovering at the same time with HA.
When HA restart, the shutter position is undefined.
Therefore, I created a automation rule in automations.yaml in order to obtain the shutters positions:

#Permet de récupérer la position des volets roulants au redémarrage
- alias: "Power state on HA start-up"
  trigger:
    platform: homeassistant
    event: start
  action:
    - service: mqtt.publish
      data:
        topic: "cmnd/VR_Bureau_IP70/shutterposition"
        payload: ""

You can see that this rule works in this picture for a normal card but not in the plugin:

Once I move the shutter, the position is actualized and no more problem:

So, how can I obtain the shutter position at HA restart ?
Thanks for your help and your sharing,
Regards,

Thierry

REQUEST: Controls on Bottom or Off

would like the option to have the controls show on the bottom or be off/removed completely (only using the visual to control)

Two phase working methods for shutters

Congratulation about this great add-on.
May I suggest a feature?
I used this to control the shutters. But the shutters build up with slates.
There is a time when the lowest slate hits the ground, and there is an another time when all the slates closed.
It would be good if your solution can handle this functionality.

I mean when we set 50%, the shutter should cover the half of the window, when I set 100% the shutter lowest slate should reach the ground, and after it we should go forward, to completely close the shutter if we want.

So one timer for cover the whole window, and a 2nd timer after it to close the shutter.

I hope I was clear...

Thank you

Request: Flip button positions

For some reason my button directions are opposite to opening and closing actions on the shutter. Up arrow brings the awning down and vice versa.

Similar to flipping the percentage, can we also have an option to flip the direction of movement of the motor based on arrow clicks?

Could you do a version for Velux windows?

Love your shutter card. Best looking control I have found to represent my Velux blinds. Here is my implementation:

I was wondering if you could do a version for Velux windows? Here is an animation from Velux of what they look like when opening and closing.
https://www.youtube.com/watch?v=u7J7oKIjsGA

To go with above, here are the blinds:
https://www.youtube.com/watch?v=NWRyRgLIWWk

Anything that looks more like a window would be great!