Custom animated weather card for Lovelace


Openweather may not be passing templow and visibility information, hence the undefined. You can try to modify the .js file to include that information from other sources.


Has anyone edited this for use with Dark Sky? I know NOTHING about Javascript or I would just do it myself.


Like this?


yes because I am that ass that doesn’t know how to search. Thank you :smiley:


yay trying the dark sky version now


Hi guys, I’m having issues getting this to load. When following instructions above, and loading lovelace I get an error saying “service system_log/write called” and screen goes blank. Checking the tab for info it gives: Uncaught TypeError: Cannot read property ‘state’ of undefined”

any ideas? Yahoo sensor is running as it should…


Hello Guys, i have the same error mentioned here before: Custom element dosen’t exist
And in Logs http://x.x.x.x:8123/local/custom_ui/weather-card.js:7:1 Uncaught SyntaxError: Unexpected token <
Any thoughts


Hi again all - just a quick info post for the ones that are having the same issue as above. Make sure you are using the WEATHER sensor, and not just a normal yweather sensor for this. I made that mistake. It should look like this in config:

  - platform: yweather
    woeid: "yourid"

@ciotlosm - sorry for the confusion, but hopefully it helps others :slight_smile:


Nice, works great. Got it working in under 5 min. Animations are awesome too.


In macOS Safari it works
In Android Google Chrome it works
But in macOS Google Chrome it doesn’t work.

What could be the reason?


great job guys!
looks amazing and very easy to setup


@tottow Would you be so kind to put the whole code


Sorry to say but this code(lovelace code) is a mess trying for 3 days to make it work but it gives error after error. is not following the correct format and it was not cleaned having garage sensors and so on. Too bad the idea is great but the implementation is poor


I’m not sure why you are running into errors… The code is far from a mess, it works for many people. What issues are you having?


First i got the unexpected token error manage to fix that, then got: https://xxxx:8123/local/custom_ui/weather-card.js?v=1:73:37 and modifed the code every way posibile still no luck


I got this working in under 5 minutes by following the directions in the original post. And I have very limited knowledge when it comes to js and css.

Here’s what I’d like you to answer:


  1. Are you up to date on home assistant? I.E. v 0.74

  2. Are you using the up to date files linked in the original post? These files change on a regular basis when issues arise with people.

  3. When you downloaded the weather-card.js and weather-card.css, did you download them in raw format and name them correctly?

  4. Did you place the files into www\custom_ui\ directory?

  5. Did you download the required icons and place them into the www\icons\weather_icons\animated directory?

  6. When you unzip the icons, did you place the images from the unzipped/animated folder into the www\icons\weather_icons\animated directory?

  7. In your ui-lovelace.yaml, did you correctly call out the resource?

  - url: /local/custom_ui/weather-card.js
    type: js
  1. Did you properly add the card to a view?
  - icon: mdi:weather-cloudy
    id: weather
    title: Weather
      - type: custom:weather-card
        entity_weather: weather.yweather
        entity_sun: sun.sun


Thanks @petro for the elaborate answer, did all the above except updating HA, but the trick was: entity_weather:
where city is : the configured city under your weather sensor in your configuration.yaml


Yes, you need a weather entity to pass on.


What part of “experimental” don’t you understand.

I mean, thank you for testing, it is needed. But if you are testing experimental code, please be a bit more useful when it doesn’t work. You know, like posting issues on github, posting configuartions, logs etc.


@nickrout the code had snippets from personal config like garage dooror don’t you see that ?
and i did post a workaround for my problem so i have added the some contribution
Funny thing is that i had to bring some critics for somebody to reply including yourself