Custom animated weather card for Lovelace

bundito · October 29, 2018, 1:00pm

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/__init__.py (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/__init__.py (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:

Screenshot_20181029_075751

Any suggestions?

woody4165 · October 30, 2018, 8:10am

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…

Thanks

DavidFW1960 · October 30, 2018, 8:42am

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

Jiran · October 30, 2018, 10:00am

Please any help?

2018-10-30 10:55:02 ERROR (MainThread) [frontend.js.latest.201810260",
description=“The Home Assistant frontend”,
url=“GitHub - home-assistant/frontend: 🍭 Frontend for Home Assistant”,
author=“The Home Assistant Authors”,
author_email="[email protected]",
license=“Apache License 2.0”,
packages=find_packages(
include=[
“hass_frontend”,
“hass_frontend_es5”,
“hass_frontend.",
"hass_frontend_es5.”,
]
),
install_requires=[“user-agents==1.1.0”],
include_package_data=True,
zip_safe=False,
)
] http://192.168.1.15:8123/local/custom_ui/weather-card.js:7:1 Uncaught SyntaxError: Unexpected token <

My configuration.yaml contains:

weather:

platform: yweather
woeid: hereismycityid

My ui_lovelace.yaml is:

title: 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: Weatherrobot
cards:

id: bf41cb45be1e4abaafd34aee493c53f7 # Automatically created id
type: custom:weather-card
entities:

weather.yweather

On screen error:
Home%20Assistant%20(1)

Mariusthvdb · October 30, 2018, 11:08am

not sure, maybe related, but my regular

weather:
  - platform: yweather
    name: Home

normally showing:

looks like this in the 0.81.0.dev0 update:

woody4165 · October 31, 2018, 9:30am

Updated to 0.81.2 and all is working fine again.

Thanks!

thanhdotien278 · November 2, 2018, 9:27am

Sorry for my dummy question. This custom weather card works only on Hass.io, 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

petro · November 2, 2018, 11:38am

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.

Example:

Yes, I’m running xx.xx

I should be blah blah blah.

thanhdotien278 · November 2, 2018, 5:19pm

views:

icon: mdi:weather-cloudy
id: weather
title: Weather
cards:

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!

Jiran · November 5, 2018, 7:39am

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

configuration.yaml

weather:
  - platform: yweather
    woeid: 638242

broesie · November 5, 2018, 2:41pm

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

weather_error

woody4165 · November 5, 2018, 5:42pm

Have you cleared the browser cache?

Which version of Hassio?

You should share some code to get some help.

broesie · November 5, 2018, 5:47pm

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

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

also on the yaml file:

  - title: Buiten
    id: outside
    cards:
      - 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 <

woody4165 · November 5, 2018, 5:52pm

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

broesie · November 5, 2018, 5:57pm

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:

weather:
  - platform: yweather
    woeid: mywoedid

Also I added the latest java in my config

javascript_version: latest

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

broesie · November 5, 2018, 8:56pm

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…

swakes · November 6, 2018, 11:43pm

Evening chaps,

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

prateek33 · November 13, 2018, 7:37am

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>

sendorm · November 20, 2018, 3:50pm

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

dwinnn · November 20, 2018, 11:37pm

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!