Custom animated weather card for Lovelace


I’m having an issue that I haven’t seen reported before.

I copy-pasted everything into an existing Lovelace “page”, with some commonly-used lights and a simple indoor climate display.

I’m 98% sure I followed the directions properly (I got other custom things working).

Now when I try to activate the page, the entire thing goes blank. Previously, I was getting my working components followed by the Red Box Of Death.

Here’s what’s in my console output:

http://hassbian.local:8123/local/custom_ui/dark-sky-weather-card.js?v=0:85:11 TypeError: hass.states[this.config.entity_current_conditions] is undefined

7:40 AM components/system_log/ (ERROR)

http://hassbian.local:8123/local/custom_ui/dark-sky-weather-card.js?v=0:85:82 Uncaught TypeError: Cannot read property 'state' of undefined

7:37 AM components/system_log/ (ERROR)

http://hassbian.local:8123/local/custom_ui/dark-sky-weather-card.js?v=0:85:82 Uncaught TypeError: Cannot read property 'state' of undefined

I’m fairly positive I have Dark Sky set up properly, because I get this nifty card in the traditional UI:


Any suggestions?


Just updated to 0.81.0.dev0 but I’m still getting error.

Anyone else? No problem to wait, just to understand if I’m the only one…:thinking:



Apparently 0.81.2 I’d out now… waiting for hassio though


Please any help?

2018-10-30 10:55:02 ERROR (MainThread) [frontend.js.latest.201810260",
description=“The Home Assistant frontend”,
author=“The Home Assistant Authors”,
author_email="[email protected]",
license=“Apache License 2.0”,
] Uncaught SyntaxError: Unexpected token <

My configuration.yaml contains:


  • platform: yweather
    woeid: hereismycityid

My ui_lovelace.yaml is:

title: TEST

Include external resources


  • url: /local/my-custom-card.js
    type: js
  • url: /local/my-webfont.css
    type: css
  • url: /local/custom_ui/weather-card.js
    type: js


  • icon: mdi:weather-cloudy
    id: weather
    title: Weatherrobot
    • id: bf41cb45be1e4abaafd34aee493c53f7 # Automatically created id
      type: custom:weather-card
      • weather.yweather

On screen error:


not sure, maybe related, but my regular

  - platform: yweather
    name: Home

normally showing:


looks like this in the 0.81.0.dev0 update:



Updated to 0.81.2 and all is working fine again.



Sorry for my dummy question. This custom weather card works only on, not on Hassbian, doesn’t it? I could not make it work. I checked every points in your comment but still no luck.
If I used just only normal weather card, it works

  • type: weather-forecast
    entity: weather.yweather

But if I use the custom animated weather card, it shows only a blank tab.
Thanks in advance


Wow, man… I had to scroll up to find the comment you were talking about to refresh my memory. Can you lay out the details of your issue? This card should work on any HA platform.

Out of curiosity, are you familiar with how browsers hold information? They can be a pain in the ass when trying to debug because half of the resources are pulled from cache when they should be updated. To force the update, you need to reload a page and delete the cache. So if you are going through the 8 steps listed in my previous post, are you refreshing the cache after you make changes? CTRL+F5 should do that.

Also, if you don’t mind, Please answer each step with a picture or text of what you did.


Yes, I’m running xx.xx

I should be blah blah blah.



  • icon: mdi:weather-cloudy
    id: weather
    title: Weather
    • type: custom:weather-card
      entity_weather: weather.yweather
      entity_sun: sun.sun

Wow finally it works like a charm! Gorgeous. Thanks Petro, I did not add card properly. Awesome!


Please could anyone post his working configuration.yaml and ui-loveace.yaml? I tried redownload (copy and paste from raw test on github) all the files and still not working…

>     title: My test
>     # Include external resources
>     resources:
>       - url: /local/my-custom-card.js
>         type: js
>       - url: /local/my-webfont.css
>         type: css
>       - url: /local/custom_ui/weather-card.js
>         type: js
>     views:
>       - icon: mdi:weather-cloudy
>         id: weather
>         title: Test1
>         cards:
>           - id: f84a9a7f674c4ee183d3745f056affb5  # Automatically created id
>             type: custom:weather-card
>             entity_weather: weather.yweather


  - platform: yweather
    woeid: 638242


I did everything, but still get the error, that the custom element not exist.
I’m running hassio.



Have you cleared the browser cache?

Which version of Hassio?

You should share some code to get some help.


Version of hassio is 0.81.6
On my lovelace.yaml file:

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

also on the yaml file:

  - title: Buiten
    id: outside
      - id: outside_weather
        title: Weather info on my location
        type: "custom:weather-card"
        entity_weather: weather.yweather
        entity_sun: sun.sun

Also on the log I see this:

https://myhassurl/local/custom_ui/weather-card.js:7:1 Uncaught SyntaxError: Unexpected token <


Try to download again the js and css files in the config/www/custom_ui folder

Seems like there is something wrong with the file…
Or check the js file at row 7


I redownloaded many times the js and css file, and still the errors keep coming up.
I downloaded them all in raw format, so there was no mistake.

Line 7 is:

link.rel = 'stylesheet';

In my configuration it’s:

  - platform: yweather
    woeid: mywoedid

Also I added the latest java in my config

javascript_version: latest

Many times I refreshed, and ctrl + F5, etc…


Seems a problem with cache… I did many times CTRL + F5, no result…finally, I also tried with firefox, and dang… it shows up… also on my phone I manually cleared cache, seems that you have to clear cache manually, or it won’t work…


Evening chaps,

Apologies to but in but I’ve also got the same issue with my Nest card


Is anyone else missing the currentCondition beside the big icon? I only see the icon and not the text even though the js file has it:
<span class=“icon bigger” style=“background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentCondition]}.svg) no-repeat; background-size: contain;”>${currentCondition}</span>


Is there a way save this weather card as an image so that it can be sent in a notification?


I’m missing the current condition text as well. Not sure why as the card is able to pull humidity, pressure, temperature attributes correctly. I looked at the weather.yweather entity I’m using and it is correctly reporting the weather condition as its sttate. If you find a fix, let me know!