Hi everybody, I followed this tutorial Custom Button Card 5: Change Background using Input Select - YouTube to set the background of a button-card depending on the state of a input_select. It does work for files that do not contain spaces. Has anybody a idea how to adapt this to filenames with spaces? I tried to apply String()
or the .replace()
function to no avail.
And as an addition, does anyone know how to center the image?
Here is the yaml:
type: custom:button-card
entity: input_select.radiosender
show_state: false
show_name: false
show_icon: false
triggers_update:
- input_select.radiosender
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.radiosender
styles:
card:
- background-color: transparent
- height: 400px
- background: |
[[[
var images = states["input_select.radiosender"].state;
return 'url(/local/pictures/radio-button/'+(images)+'.png) round'
]]]
- background-size: cover
Olivier1974
(Olivier Toussaint)
March 9, 2023, 6:14pm
2
A normal space is url encoded as %20
So “my home sweet home.png
” is my%20home%20sweet%20home.png
in Jinja2:
{{ "my home sweet home.png" | urlencode }}
gives
my%20home%20sweet%20home.png
EDIT I assume that style is about javascript so
var images = states["input_select.radiosender"].state;
var encodedUrl = 'url(/local/pictures/radio-button/' + encodeURIComponent(images) + '.png) round';
return encodedUrl;
something like that …
EDIT 2 : You’ll have to play around with " and ’ to get what you need.
Olivier1974:
encodeURIComponent
AwesomeK All it took was your hint with the %20 url encoding and the encodeURIComponent()
function. Thanks alot!
This is the code:
type: custom:button-card
entity: input_select.radiosender
show_state: false
show_name: false
show_icon: false
triggers_update:
- input_select.radiosender
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.radiosender
hold_action:
action: more-info
double_tap_action:
action: more-info
styles:
card:
- background-color: transparent
- height: 400px
- background: |
[[[
var images = states["input_select.radiosender"].state;
return 'url(/local/pictures/radio-button/'+encodeURIComponent(images)+'.png) round'
]]]
- background-size: cover
Olivier1974
(Olivier Toussaint)
March 9, 2023, 8:27pm
4
Can you please mark my reply as solution, so it will close your topic.
Thank you