Custom animated weather card for Lovelace


How did you get the translation of the names of the days of the week?

I changed line 98 in js file to:

<span class="dayname">${new Intl.DateTimeFormat('pl-PL', {weekday: 'short'}).format(new Date('.')[0].toUpperCase()}</span>

and now names of the days are in polish.


It’s incorrect. I’ve pasted this line and console was all red :wink:
This works:

<span class="dayname">${(new Intl.DateTimeFormat('pl-PL', {weekday: 'short'})).format(new Date(daily.datetime)).split('.')[0].toUpperCase()}</span>


Of course, you’re right.


How do you get the written forecast at the bottom of the panel? Is it a darksky thing?


Sorry, I didn’t get notifications (I’ll have to check the settings for this) glad you figured out by the way


I’m not sure if it’s a darksky thing, I added language on my yaml, not sure if that did it, I’ll take a look later today at my files and let you know


So I tried following this and everything seems be implemented correctly, but it just doesn’t work.
I get this error in the log and the ui lovelace just pops up with a blank screen.


http://hassio:8123/local/custom_ui/weather-card.js:73:37 Uncaught TypeError: Cannot read property 'state' of undefined

Any ideas?

EDIT: Fixed!!!
I didn’t set up the yweather platform. When I did, it worked!


I’ve just added this to my setup. Works and looks great. I just have 2 issues.

  1. The minimum/low temp is all listed as undefined.
  2. There is no forecast at the bottom.

Are these related to darksky not having these values?

Also, is it possible to change the hourly forecast to daily along the bottom?


Thank you very much, it (almost) works. Where do I actually specify the location for the weather data? I have my latitude and longitude in the configurations.yaml but it is not giving me the weather for my location.


Follow the instructions to set up yweather, specifically you need a WOEID:


Hi! Still no solution on blurring?


Same issue with blurring here. Only in Safari though, it works fine in Chrome and Firefox.


I am using native app


True, in native app on iOS as well.



I’m getting errors upgrading to 0.81.0 Hassio on the weather-card an also with themostat-card and some others, not with swipe card for example.

Anyone else?
Any suggestion?



is it in a vertical stack?


Yes, it is.
And it was also before, working properly.


there is a bug with stacks in 0.81. Hotfix 0.81.1 soon


@woody4165 what @DavidFW1960 said bug with stacks getting fixed soon - next up[dater I would think


Hi! Great custom card, thank you!

Is there any way to add a title to the card?