Custom animated weather card for Lovelace

carlostico · July 22, 2018, 9:57pm

Hi @arsaboo can we fix this please …

Lovelace:

Regular Card:

Remove the overlapping “Clear Sky”

arsaboo · July 23, 2018, 1:13am

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

carlostico · July 23, 2018, 4:44am

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

arsaboo · July 23, 2018, 12:43pm

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.

atomicpapa · July 25, 2018, 10:20pm

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

docbobo · July 25, 2018, 10:25pm

Like this?

atomicpapa · July 25, 2018, 11:14pm

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

3m0 · July 26, 2018, 3:23am

yay trying the dark sky version now

tottow · July 28, 2018, 6:47pm

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…

mac_intos · July 28, 2018, 11:40pm

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

tottow · July 29, 2018, 12:46pm

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

petro · July 29, 2018, 1:11pm

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

Klex1404 · July 30, 2018, 8:07pm

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?

katsaplias · July 30, 2018, 8:52pm

great job guys!
looks amazing and very easy to setup
thanks

mac_intos · July 30, 2018, 9:51pm

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

mac_intos · July 31, 2018, 8:39pm

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

petro · July 31, 2018, 8:43pm

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?

mac_intos · July 31, 2018, 9:11pm

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

petro · July 31, 2018, 9:28pm

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:

Are you up to date on home assistant? I.E. v 0.74
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.
When you downloaded the weather-card.js and weather-card.css, did you download them in raw format and name them correctly?
Did you place the files into www\custom_ui\ directory?
Did you download the required icons and place them into the www\icons\weather_icons\animated directory?
When you unzip the icons, did you place the images from the unzipped/animated folder into the www\icons\weather_icons\animated directory?
In your ui-lovelace.yaml, did you correctly call out the resource?

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

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

mac_intos · July 31, 2018, 9:41pm

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