Shutter Card

Share your Projects! Dashboards & Frontend
1

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

Instructions

You will find every instructions to install and configure this card on the dedicated GitHub page

Notes

  • I know this card doesn’t fit well in an horizontal card but I didn’t manage to do it as the width of the card can be really small in that case. So please avoid to use horizontal card even if it can works well for some of you.
  • If you are a good designer and can paint a beautiful shutter in material design, I’ld be glad to replace the actual one by yours because I’m not really satisfied of the actual picture.
26 Likes
2

Nice card, def gonna try it out.

I agree about the picture, would love if there was a setting to show a blackout shutter.
Another suggestion is to move the procentage under the picture centered and the name centered above, think it would look better.

Good work!

3

Hi.
Very nice card. It looks great. I have been thinking about something similar for a garage door. I use an ultrasonic sensor with a filter (ESPHome) to get the exact door height and use a relay output to trigger the door to open or close it.

It is nice to be able to set the door height for cases like when it rains and you need some access without getting too much rain in or if you want to air some laundry in the garage.

The other cover cards don’t really work because the remote has only one button (not three) so I have been thinking about modifying one to have one button.

Your card is very close to this requirement and I will be playing with it for sure.

Great work.

4

like your idea using the ultrasonic sensor for the height

once we know height that just come 100% with basic maths

think its
((Measured) * 100) / (Total Distance)

but can we esphome do it

5

Just don’t try with HC-SR04. I tried a bunch of sensors. The SR04’s are very erratic and not actually usable. There is another ultrasonic version that looks like a car’s park assist sensor. It is a few dollars more but if you use ESPHome’s median filter and a fast ping rate, it smoothes out really well.

6

Congratulations Deejayfool, it’s the best Roller Shutter card I’ve ever seen, we finally have a realistic dynamic icon!
Perhaps it would improve putting a background of sky blue behind the slats of the blind.

7

Really cool, I’d love to use this more, but I have 12 windows with shutters and using all of them would require quite some space. Especially on mobile devices with limited screen real estate. Putting 2 in a horizontal stack is not possible right now because the picture won’t fit.

Some improvement suggestions:

  • Maybe there is a way of display multiple shutters side by side in the same card
  • (Auto)Scaling of the shutter itself, or maybe an option to use a narrower image (1/2 the width)
  • As I have also electrified roof windows, so maybe an option to also have window pictures instead of shutters

keep up the good work!

1 Like
8

anyone some tips for me how i can make this shutter available on my pages
my whole lovelace config consist of pages , with 2 columns of buttons
when adding as test 4 shutters in same column , it looks like this below :slight_smile:
i want to remove my 4 old buttons that i use for open/closing my covers

tips are welcome

9

You can make the picture narrower so that it fits on the horizontal stack card, just take card-mod and adjust the CSS accordingly:

entities:
 - entity: cover.eg_bad
 - entity: cover.eg_kueche_1
 - entity: cover.eg_esszi_1
 - entity: cover.eg_wohn
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'

Screenshot_20200719-081418_Chrome
Screenshot_20200719-081418_Chrome1200×1920 333 KB

4 Likes
10

hi, can you show your complete card/code? i tried, but mine are vertical aligned :slight_smile:

      - type: horizontal-stack
        cards:                
          - type: 'custom:shutter-card'
            entities:
              - entity: cover.google_eetkamer
              - entity: cover.google_living
            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;
              }
11

You have only one shutters card in your horizontal stack. Within one shutters-card the shutters will be vertically aligned.

You should change your configuration to:

      - type: horizontal-stack
        cards:                
          - type: 'custom:shutter-card'
            entities:
              - entity: cover.google_eetkamer
          - type: 'custom:shutter-card'
            entities:
              - entity: cover.google_living
            style: |
              ha-card {
            .....
12

thats indeed better :slight_smile:
do you think you can make it even smaller? i want 4 of them on a small row
eventually, i dont need those up/down arrow, it can be removed …

is it possible to remove those?

13

Not with the CSS. you would have to change the java script code, shouldn’t be the problem.

14

ok, thnx for feedback

15

Hello
Installed via HACS in Home Assistant 0.113.3, even registered in Lovelace

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

but after creating the card, the error

Custom element doesn't exist: shutter-card.
type: 'custom: shutter-card'
entities:
   - entity: switch.sonoff_10009c7645_1

Who can help?

16

the problem is solved, can someone come in handy
in Lovelace you need to write the path like this:

  - url: /hacsfiles/hass-shutter-card/hass-shutter-card.js
    type: module
17

How do you assign the buttons to specific input booleans I have already created for open/close/stop?

Thanks

18

I’ve implemented the buttons and work well.
But how do you get the manual movement of the shutter to work with % of the open/close? I have installed cover_rf_time_based component also and was hoping to use this based in time to open/close but I am completely stuck at this part.

Thanks

19

Not sure you can with a timebased cover, how does your cover work and how does your code look?

20

At the moment my config looks like this: (which works fine with the buttons on the left, up/stop/down)

cover:
  - platform: template
    covers:
      living_blind:
        friendly_name: "Living Blinds"
        position_template: "0"
        open_cover:
          service: input_boolean.toggle
          entity_id: input_boolean.living_curtain_open
        close_cover:
          service: input_boolean.toggle
          entity_id: input_boolean.living_curtain_close
        stop_cover:
          service: input_boolean.toggle
          entity_id: input_boolean.living_curtain_stop

I have installed rf_time_based cover but not sure how to integrate this with the movement of the shutter blind:

  - platform: cover_rf_time_based
    devices:
      bedroom_cover_time_based:
        name: Bedroom Room Cover
        travelling_time_up: 35
        travelling_time_down: 33
        close_script_entity_id: script.rf_bedroom_cover_down
        stop_script_entity_id: script.rf_bedroom_cover_stop
        open_script_entity_id: script.rf_bedroom_cover_up
        send_stop_at_ends: False #optional
        aliases: #optional
          - bedroom_cover_time_based

thanks

1 Like