Custom animated weather card for Lovelace


What I had to do to fix this issue was create 2 versions of the icons and call one folder “small” and change the forecast reference in the .js file to the smaller folder. Seems like if it’s using the same icon for the forecast and the larger current conditions it renders the small size first then stretches it for the larger one making it ugly


Happens to me as well, I get the following error in the console
Been following the guide and am probably missing something here…

Update: after changing to yweather, I get the following stack


I have probably experienced the same problem. Changing the boolean value of dom.webcomponents.shadowdom.enabled and dom.webcomponents.customelements.enabled to false in about:config fixed the problem for me.

Note: Some of your UI objects may show up incorrectly, for example the custom column width of a Glance card.


Not sure what I’m doing wrong but I get the "Custom element doesn’t exist error when I enable this card. I think someone further up in the chain commented that this was indicates that the “weather-card.js” script is not being executed.

However I have placed this file in the www/custom-ui folder and have the icons in the www/icons/weather-icons/animated as specified in the instructions.

I’m running Home Assistant in a Docker container on my Mac server. Is this a problem and if so what other container(s) or services need to be running in order for the script to execute properly.

Thanks in advance…


Make sure that you have added these files in the ui-lovelace.yaml and HA has the required permissions.


@ Arsaboo: You say “make sure that you have added these files…”. Are you implying that both the weather-card.js and the icons folder require to be reference in the ui-lovelace.yaml file? Currently I have:

  - url: /local/custom_ui/weather-card.js
    type: js

at the top of this file.

With regard to permissions it would seem that the Docker container that is running HA has read/write permissions to the HA config folder as it is able to write the Home-assistant.log file successfully.

Any additional ideas?


smart! this probably solves it on regular Hassio too!

btw did you actually crop the icons too, or simply have them doubled in 2 folders


I just put them in 2 different folders


thanks i will test. Any idea whether the static icons are still used by the card? Or elsewhere for that matter?

btw, the blurring only happens when the smaller icons are in the window too. Scrolling these out of the window, immediately sharpens the card icon. I think @Jer78 discovered that a while ago :

35 42


copied all files to animated/forecast and edited the line:

<br> <i class="icon" style="background: none, url(/local/weather/animated/forecast/[[item.condIcon]].svg) no-repeat; background-size: contain;"></i>

thanks for this long wanted solution! did you post this in the thread for the regular card too?

Custom Dark Sky Animated Weather Card

I am having this sort of error:

2018-08-28 20:13:00 ERROR (MainThread) [frontend.js.latest.201808200] Uncaught TypeError: Cannot read property 'state' of undefined

What’s the meaning and how to solve?


Wonder why this is giving me errors in chromium browser via pi screen? It works when I access from chrome on my laptop and phone.

I cleared cache but still get error n.setConfig is not a function



@arsaboo same error for me. Line 73 though:

    const currentCondition = entity.state;


Most likely that means that the underlying state is not defined. Check in the states table if that is the case.


and me? mine works except on pi screen using chromium


Where would it be defined? I just followed the instructions in the first post. Do they assume I have something else defined somewhere? Are there other steps I need to do to make it work?

At the moment I have:

title: Home
- url: /local/custom-lovelace/sonarr-upcoming-card/sonarr-upcoming-card.js
  type: js
# - url: /local/custom_ui/weather-card.js
#   type: js

Then down on the tab I have:

#  - title: Animated Weather
#    icon: mdi:weather-cloudy
#    id: weather
#    garage_door_tilt_sensor_alarm_level: Weather
#    cards:
#      - type: "custom:weather-card"
#        entity_weather: weather.yweather
#        entity_sun: sun.sun

All commented out for now as they aren’t working.
I also copied the css and js to /www/custom_ui/ and the icons to /www/icons/weather_icons (unzipped)

Am I missing something else???

EDIT: Found the Darksky Version and it’s working…


Getting the same error here:

URLOFMYHASS.IO/static/custom-elements-es5-adapter.js:13:615 Uncaught TypeError: Class constructor WeatherCard cannot be invoked without ‘new’

how is it supposed to be fixed?

EDIT: ok, I totally don’t know how but it seems to work now. I haven’t done anything :sweat_smile:


Anyone? Please.


Just installed this yesterday and it works great…however today I updated to 77.2 and I get the following error in my logs:

MYIP:8123/local/custom_ui/dark-sky-weather-card.js?v=4:17:43 Uncaught TypeError: Cannot read property ‘unit_system’ of undefined

Any suggestions?



Change the js code and change the reference from




Custom UI: Weather state card
Custom Dark Sky Animated Weather Card

I have the same error