type: custom:button-card
name: |
[[[ return states['climate.stue'].attributes.temperature + "°C" ]]]
custom_fields:
icon: |
[[[
var weather = states['weather.home'].state;
return '<img src = "/loacl/icon/' + weather + '.svg" width="50" height="50" />'
]]]
#Custom: Button card
fiery nest
old lynx
local is spelled wrong in this version of the code...
old lynx
Gimmie a sec. Lemme see what I can come up with. I'm still guessing a path issue maybe pertaining to the variable.
fiery nest
ok, thank you! i have also checked the "state" vs the name of the SVG file, and it matches perfectly
old lynx
Let's take the variable out of the equation for the moment. This is what I just used. yaml custom_fields: icon: | [[[ var weather = states['weather.home'].state; return '<img src = "/local/icons8-sunny-48.png" width="50" height="50" />' ]]] Change the /local/icons8-sunny-48.png to one of your icons. Hard-code it for right now. Let's get it to show first.
I'm going to grab an SVG and see it that might be an issue.
fiery nest
still dont work, i will try to upload a png file hold on
old lynx
An SVG worked for me. return '<img src = "/local/sunny-svgrepo-com.svg" width="50" height="50" />'
fiery nest
i will try to move them out of the local file and keep it in the www file for fun
old lynx
That's what I was saying earlier. They're not supposed to be in a "local" folder.
I've match my path more to your's.
fiery nest
i tried with a images folder now in the www folder. but no joy
old lynx
Show me the full path that you're trying to use.
fiery nest
i might have setup the www folder wrongly? does it need reed/write rights as in a FTP server?
old lynx
what do you mean you set up the www folder? The www folder is already made.
fiery nest
[[[
var weather = states['weather.home'].state;
return '<img src = "/images/sunny.svg" />'
]]]
path in the file editor is /config/www/images
old lynx
blah. I haven't used File Editor in years. Lemme install it right quick so I can try to see what you're seeing.
fiery nest
Just took a screenshot, and when i click the image, it workes fine. but just not in that button-card
old lynx
Try local/images/sunny.svg
fiery nest
same thing
but if i add a / before local, that "brokan image" icon goes away, but still no icon
old lynx
my bad. There is supposed to be a / at the beginning.
fiery nest
yeah, but the image still not showing. this makes me go crazy! 🙂
old lynx
Try the image that I downloaded. https://www.svgrepo.com/svg/67725/sunny Maybe there's something going on with the SVG file. Your path looks correct and the file looks like it is in the folder of the path you're using. 😕
old lynx
Off-topic: I use the Samba share add-on to expose folders on the network and the Studio Code Server add-on which is way better than the File Editor.
So you're able to see that SVG now?
fiery nest
yes 🙂 for some wierd reason
i tested the SVG file within home assistant, and it did work.. i just dont understand why its not willing to work with mine
old lynx
I think SVG files can be weird sometimes. If they're not written just right they can cause issues. Perhaps HA could understand its code but not your browser. (Because SVGs are technically code and not a graphic.)
fiery nest
now the challange is to get that code to work with state hehe.
old lynx
I would suggest at this point, set up your files and folders the way you want. Next, let's test each of your weather conditions.
That will be next.
fiery nest
it might actually be the file manager when i re-name files
Yeah.. its the file manager thats the problem.
I re-named it to cloudy.svg for a test. It bugged out again, but when i change the code back to "/local/images/sunny-svgrepo-com.svg" and keep the name cloudy.svg from file manager.. it works hehe
thank you for the help! sleep time 🙂
old lynx
okay. I might play with the variable part because I'm not sure if it is going to work with the current syntax. I'll let you know what I figure out.