Deejayfool / hass-shutter-card

Shutter card for Home Assistant Lovelace UI
Apache License 2.0
271 stars 98 forks source link

Shutter width over 153, lower strip not working. #114

Open d3z1b3l opened 7 months ago

d3z1b3l commented 7 months ago

Hi!

First of all, big thanks for this very nice card!!! I Love it ;-)

But I found one bug.

If I set the shutter_width_px higher than 153, the lower strip is still size 153.

Maybe you can fix it? ;-)

See at the picture:

Bildschirmfoto 2024-02-05 um 13 53 48

Greets, d3z1b3l!

Marcelo-Y commented 4 months ago

While it is not solved, I managed do make my own workaround. Changed the JS code of the "shutter-selector-picker" CSS.

Find this code in JS file: .sc-shutter-selector-picker { background-image: url(data:@file/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAHCAYAAAA8nm5hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHpPAACA1wAA+5gAAH6BAAB41AAA6bgAADhTAAAa8BY+DIIAAAG4SURBVHja7JYxstowEIZ/rWTJNuPODZyAjipFCq6Qw+RyHILuVXTMQGMzYxwDwpawrVT2MEkeL34UITP+GzXaWUnfr91lm83m+2w2+6qUgnMOQ9W2LYioX0e9rpxzYIzBOQfn3ENeRITD4aCLongTxpgvVVV9q+t6kEkYYwAAzjk8z0NVVf1BRr2eOl5dMTDGPNxLRDDG/DDGKKG1llpr2blqCGTOOeI4BuccdV3jer2ONF64ioRhiCiKYK1FVVWw1vbm+RPbsiyDsiylUEq1vu9jqEkYY7jdbrhcLphMJmCMQSn1btJR/17WWmit++ovhHiXNxFBStlIKVsRBAEFQQDO+aCEnHPsdjusVissFgvM53P4vj+SeFEREdbrNbbbLZbLJabTKdq2fbjfGMOttSTyPLee5xnOeT/Y/G0l2e/3iKIIYRgiy7J+ILrvgaOeaxG/zhSfiWeMoa5rZFmGOI4BAGmaPuwaRISiKMrT6WRFkiRra63oTDLEmWmaAgDyPMfxePztUv/DEHv/+B9BeRbaMyYZkvc+rvv4TdMgz3PEcYwkSdA0zYd8z+ez1lq//QQAAP//AwAV5u5HIxEL5wAAAABJRU5ErkJggg==); }

Change it to: .sc-shutter-selector-picker { background-image: url(data:@file/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAHCAYAAAA8nm5hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHpPAACA1wAA+5gAAH6BAAB41AAA6bgAADhTAAAa8BY+DIIAAAG4SURBVHja7JYxstowEIZ/rWTJNuPODZyAjipFCq6Qw+RyHILuVXTMQGMzYxwDwpawrVT2MEkeL34UITP+GzXaWUnfr91lm83m+2w2+6qUgnMOQ9W2LYioX0e9rpxzYIzBOQfn3ENeRITD4aCLongTxpgvVVV9q+t6kEkYYwAAzjk8z0NVVf1BRr2eOl5dMTDGPNxLRDDG/DDGKKG1llpr2blqCGTOOeI4BuccdV3jer2ONF64ioRhiCiKYK1FVVWw1vbm+RPbsiyDsiylUEq1vu9jqEkYY7jdbrhcLphMJmCMQSn1btJR/17WWmit++ovhHiXNxFBStlIKVsRBAEFQQDO+aCEnHPsdjusVissFgvM53P4vj+SeFEREdbrNbbbLZbLJabTKdq2fbjfGMOttSTyPLee5xnOeT/Y/G0l2e/3iKIIYRgiy7J+ILrvgaOeaxG/zhSfiWeMoa5rZFmGOI4BAGmaPuwaRISiKMrT6WRFkiRra63oTDLEmWmaAgDyPMfxePztUv/DEHv/+B9BeRbaMyYZkvc+rvv4TdMgz3PEcYwkSdA0zYd8z+ez1lq//QQAAP//AwAV5u5HIxEL5wAAAABJRU5ErkJggg==); background-size: contain;}

*Just added "background-size: contain;" in the end.

Hope it gets solved.

Good lucky!!!

Dietermies commented 1 month ago

I have the same error as d3z1b3l.

The change you suggested in the line .sc-shutter-selector-picker { background-image: url(data:@file/ .... didn't work for me. Maybe it's because of where I made the change.

I changed it using the file editor in the configuration /homeassistant/www/community/hass-shutter-card/hass-shutter-card.js in line 250. Here is the last part of the line: ... IxEL5wAAAABJRU5ErkJggg==);background-size: contain;} Was that correct? Or does the correction have to be made somewhere else?

I saved the change, checked the YAML configuration, reloaded it and restarted home assistant. But to no avail. The bottom bar of the roller shutter still remains at 153px, although the top part follows the size adjustment.