Custom animated weather card for Lovelace

Hi @arsaboo can we fix this please …

Lovelace:

Regular Card:

Remove the overlapping “Clear Sky”

I don’t think you are using the files from the original post.

Finally got it working , had to change ownership of the files and a couple of restart

I am not using yweather because its not that accuarte instead using openweathermap but get this error:

the weird part is that with the old instructions non lovelace it shows everything fine , any ideas ?

Thanks

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:

https://domaingoeshere.duckdns.org:8123/local/custom_ui/weather-card.js?v=1:73:37 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:

weather:
  - 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
thanks

@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:

EDIT:

  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?

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

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

1 Like