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
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.
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.
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
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 
i want to remove my 4 old buttons that i use for open/closing my covers
tips are welcome
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'
4 Likes
hi, can you show your complete card/code? i tried, but mine are vertical aligned
- 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;
}
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 {
.....
thats indeed better 
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?
Not with the CSS. you would have to change the java script code, shouldn’t be the problem.
ok, thnx for feedback
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?
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
How do you assign the buttons to specific input booleans I have already created for open/close/stop?
Thanks
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
Not sure you can with a timebased cover, how does your cover work and how does your code look?
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
I think the timebased is not compatible with with this card if you cant get it to work. Seems like you need a cover that sets position with 0-100% to get that feature.
A workaround might be to create a dummy cover and then use automations or node-red to calculate the movement from procentage to actual time up or down to link them together.
ok thanks - was suspecting there would be no easy option.
What about the type: ‘custom:vertical-slider-cover-card’ type of card?
I’m thinking if the rf_time based object may work with this?
I dont know. Never tried them.