Enhanced Shutter Card

Hi all,

I like to introduce here the Enhanced Shutter Card:

EnhancedShutterCard

It is a follow up of Deejayfool/hass-shutter-card .

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

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

Look at the repository and give it a try !

4 Likes

Good job !
If I had more time, I’ld have done something more customizable like this one.
I think you can replace your repository with mine in HACS, because yours do the same as mine, in better :wink: .

Thx for this card.
I used pic shutter card before but thi does not work anymore so many thx again.
But i cannot add them to HA
Hacs not find the card and add a custom repo gif me this error.

repositoy structure for v1.0.1 is not compliant

Anyway thx for the card allready

Hi, I double-tested it. No errors here in my product environment. Did you set Dashboard for Type when adding it as custom repository?

Hi Love your card!
Is there any option to remove the buttons and the text to have only the blinder shown?

Hi, not for now. I put it on my todo-list.

Add it again and restart HA en now i can use the card
Thx

Hi @marcelhoogantink ,

I recently proposed a pull requests with lots of improvements on Deejayfool repository for the hass-shutter-card. cf : Refactor to Lit, add a card editor, support for Section design and some more features and corrections. by cnico · Pull Request #121 · Deejayfool/hass-shutter-card · GitHub

I think my work could be merged with yours to improve globally this shutter card that we use every day. You can see all the added behaviours and corrections in the PR and in the commit history of the PR.
The need of disabling buttons of @Kallby86 is included.

As our modifications are quite different and also quite large on the code, I let you have a look at the difference and think about how to work on this merge proposal if you agree.
When I was developing it, after some complexity, I switched to Lit in order to simplify the code and I think it is really helpful for maintainability.
If you want we discuss about it more precisely, via Discord directly.

Hi @cnico ,

Thanks for your proposal.
Give me some time to look into your code.

Looking quickly into it, it has some nice additions.

I will look into it deeper and come back.

1 Like

Hi @cnico ,

I looked into your code, and installed your repo.
I think a manual merge is needed because the differences are really big.

For the card itself, all is clear to me, so merging just costs time.

For the card-editor, I was wondering: Is there any manual for it out there ( I did not find it), or did you get a sample of another card, and just did a try-and-error to get the editor right for the settings needed?

Do you agree, I use your code to update this card?

Hi,

Yes, feel free to merge the code as you think it is better to update enhanced-shutter-card. Once done, I will switch my usage to this one and give you some feedback if I find bugs or improvements.

For the editor, there is an official documentation that is quite minimal here : Custom card | Home Assistant Developer Docs
I used this doc, examples of other cards and even the code in homeassistant frontend.

@marcelhoogantink : I would be happy if the proposed changes of cnico will be added to your repo. Did you manage to merge it?
I assume your repo will be the new “offical” one in HACS for the shutter card, right?

I would like to solve the issue with the title and status being in one line, as this results in a line break depending on the width of the dashboard:
image

@Josch.hh :

  • Work in progress …
  • I suppose so.
  • What do you propose for this?

@cnico :
I started with the getLayoutOptions() to define the nbCols and nbRows, but I cannot detect any visual change in behavior, when the nbCols and/or nbRows are changed. So I cannot test the correct woring of getLayoutOptions().
I tried with your default values (nbRows=4 , nbCols=3) and for a simple test I doubled thes values to 8 and 6, but no change visible.
Did you manage to see some differences on change?

Concerning the issues with the title and the status being in the same line, i would propose to have it in independent lines which can be shown, hidden and positioned.

Do you have a branch with your code evolution so that I can test it ?
To see, the impact of this method, you have to use a Section. The computed layout with rows and cols is visible in the editor. So it requires to implement the editor first.

@cnico Thanks for your relpy, I found the issue :slight_smile: