I came across this thread where a custom animated weather card was discussed:
Nice! I figured I’d give it a try. This turned out to be a half-day long project, and I had to write down my steps, so I figured I’d share them here in case anyone is interested.
I found a long-running thread about this custom card. Great! But there’s a lot which has changed over the time the thread has been active. If we go all the way to post #296, January 2019, there’s a link to the latest (it says) GitHub repository:
Here’s the repository: custom-ui/weather-card at master · bramkragten/custom-ui · GitHub
But wait. The files in that repository are over 2 years old. Luckily, there’s a readme linking to a newer one:
This gives instructions, but they’re hard to follow, some are out of date, and they assume a lot of knowledge I don’t yet have.
I should pause here to say that I did try using HCAS to install this. That by itself was a bit of a fiasco. I did get HCAS going, but never got this card working. Pilot error, I’m sure. But in the end the manual install at least forced me to understand better what I was doing.
For non-HCAS installs, there are two options. The “hosted” option talks about a “lovelace config” file. But I generally update Lovelace using the UI, so I skipped that one.
Instead, I tried the manual option. Those instructions seemed easy enough:
1) Download the weather-card.js to /config/www/custom-lovelace/weather-card/. (or an other folder in /config/www/)
I shortened it a bit and used config/www/weather-card/, leaving off the extra level.
- Save, the amCharts icons (The contents of the folder “animated”) under
/config/www/custom-lovelace/weather-card/icons/
(or an other folder in /config/www/)
I quickly found that the default SAMBA configuration blocks folders named “icons” from being accessed or created. I went down another rabbit hole to learn all about SAMBA configuration in HA.
Long story short, I went to Supervisor / Add-ons / Samba share / Configuration
and deleted the icon* entry.
(To be honest, on my first attempt I just rename the folder to Fred, copied it, and then used PUTTY to rename (mv) it back to icons. Fixing the SAMBA config would be far easier though.)
With the icons saved to /config/www/weather-card/icons/, I could now continue…
3) If you use Lovelace in storage mode, and want to use the editor, download the weather-card-editor.js to /config/www/custom-lovelace/weather-card/.
What’s “storage mode”? I figured if I don’t know what it is, I probably don’t use it, so I ignored this step. I’ll come back to this later 
The “manual” option also requires registering resources to Lovelace as a last step:
Add the following to resources in your lovelace config:
resources:
- url: /local/custom-lovelace/weather-card/weather-card.js
type: module
Not knowing what it means to “register resources” in Lovelace, and since I’m using the UI and not directly editing the config file, I did some more searching. I found that there is an option in the UI to register resources. Maybe this will work?
I went to Configuration / Lovelace Dashboards / Resources and added:
URL: /local/weather-card/weather-card.js
Resource Type: JavaScript Module
OK, no errors, so moving on, the next section of the instructions is:
Configuration:
And add a card with type custom:weather-card:type: custom:weather-card entity: weather.yourweatherentity name: Optional name
It also gave a couple more examples of the configuration values available.
The key here is you need to already have installed a weather platform. I’m using the National Weather Service platform, which I’d already set up using the instructions here:
Whichever one you choose, it will have weather.something entities associated with it. Go to Configuration / Entities / Search entities, and type in weather. Use the value in the Entity ID column for the entity: entry (where I used weather.kpsm_daynight, below).
Again, adding cards in Lovelace is now done through the UI:
- Pick the view you want to include the new card, then hit the three dots at the upper right.
- Select “Edit Dashboard”
- Select the “+” at the bottom right to add a new card
There’s no Custom Weather Card to choose, so I tried “Manual” at the bottom.
I created the following, based on the examples and by looking at the existing weather card I’d been using:
type: custom:weather-card
entity: weather.kpsm_daynight
current: true
details: false
forecast: true
hourly_forecast: false
number_of_forecasts: 5
This last step appeared to work, in that HA displayed a nice example of the way the card will look, EXCEPT, it wouldn’t let me save it and displayed the following error:
TypeError: Failed to fetch dynamically imported module:
http://192.168.1.226:8123/local/weather-card/weather-card-editor.js
This error mentioned the file in the step I’d ignored, above:
- If you use Lovelace in storage mode, and want to use the editor, download the weather-card-editor.js to
/config/www/custom-lovelace/weather-card/. (or the folder you used above)
OK, so I copied that file to my www\weather-card folder.
That didn’t help. Same error. I restarted HA.
Still getting the error. Did a ctrl-refresh to refresh the browser cache.
That fixed it. Good lesson: Always refresh the browser cache after messing with the Lovelace front end!
I now have an animated weather card. It’s a really nice presentation of basic weather information, and I learned a lot setting it up. I still wish documentation in HA was clearer and kept up-to-date. But I’ll try to do my part; when I struggle with the documentation I’ll post here in the Share Your Projects section so others may learn, too.
