Custom Dark Sky Animated Weather Card

well, I wrote it is my tweaked version, it probably is because some of the required entities aren’t provided.

I have uploaded my config there too, so you can compare.

If anything, you can manually edit the LitElement bits into your local card, and that should fix it.

That error is 1000% caching…

Hm I can’t get your config to work either, I just get the same error, Cannot read property ‘childElementCount’ of null. I’m also sometimes getting that bug mentioned elsewhere where the entire dashboard goes blank until I refresh. It’s definitely using your .js file, I’ve purged the cache a few times and even restarted HA but no joy.

I’ll have to have a closer look in the morning. I’m in no way a coder of any kind so I won’t be able to fix this on my own!

see above it IS caching.
Try F12 dev-tools and then right click refresh and select empty cache & hard reload
Then CTRL+F5 a few times.
I’m pretty sure Marius patched that as per his above post. I had a few people saying the same thing with my fork of this card but in the end it was caching and now working. My fork is in HACS by the way and will work with the dark-sky config you are using for this abandoned card too. My BOM card also has many more options so maybe check that out.

you can try this: home-assistant-config/dark-sky-weather-card.js at ea5ad8d62d67896e13a9cff55fcc81dfcf47f8cf · iammexx/home-assistant-config · GitHub

which is the original card, with my PR for the LitElement fix.

click the ‘Raw’ button, copy all and paste it into your current card. Reload resources, and all should be fine.

1 Like

@DoctorOctagonapus Me too…I have tried too using your code @Mariusthvdb using Raw and then deleting cache and refreshing and it doesn’t work for me either
I then cherry picked your alterations and pasted them over my code and neither did that work…

well, what can I say:

Hi
How you setup this background on the weather ?

type: custom:dark-sky-weather-card
style: |
 ha-card {
   background: url("/local/images/weather-background-{{states('sun.sun')}}.png");
   background-size: 100% 400px;
   }

OK after a comment on the Github issue I’ve had a look through all my Dark Sky sensors and found that sensor.dark_sky_precip and sensor.dark_sky_precip_accumulation_0d through sensor.dark_sky_precip_accumulation_5d were all showing as unknown. Can’t find any Dark Sky failure messages in my log, does this sound like something that would break the card in the way I’m seeing?

It will break it if you are passing them through and they are mandatory sensors.

So I know Marius likes manually editing this card that was abandoned a long time (years ago) by the author.
There is also my fork here GitHub - DavidFW1960/bom-weather-card: Custom Animated Weather Card for any weather provider that is in HACS and is supported/maintained. It also contains many extra features and customisations now listed in the readme so check it out…

I’m not sure what else to do I have adjusted the Lit references in the js script of lovelace-darksky and can confirm this has been replaced by looking in the \community directory.

var Lit = Lit || Object.getPrototypeOf(customElements.get("ha-panel-lovelace") || customElements.get('hui-view'));
var html = Lit.prototype.html;

// #####
// ##### Custom Card Definition begins
// #####

class DarkSkyWeatherCard extends Lit {

I have delete the cache and CTRL F5 lots of times. But every time I look at the js script in the developer tools of Google Chrome or Microsoft Edge its still exactly the same as it was before…
This just seems to be a forever loop…It’s driving me nuts

var LitElement = LitElement || Object.getPrototypeOf(customElements.get("home-assistant-main"));
var html = LitElement.prototype.html;

// #####
// ##### Custom Card Definition begins
// #####

class DarkSkyWeatherCard extends LitElement {

Did you delete the dark-sky-weather-card.js.gz file within the dark-sky-weather-card folder? HACS loads that file first if it is present so if you have just been modifying the dark-sky-weather-card.js and not done anything with the .gz file your changes aren’t being respected. Delete the .gz file, make your changes to the .js file, see if the changes are working and if so you can recreate the .gz file by running:

gzip -k dark-sky-weather-card.js in the dark-sky-weather-card directory.

I’m using Marius’ changes with no issue so I think it might be what I mentioned above. Keep us posted.

1 Like

Hi…thanks for that…I did have the .gz file still in the directory…I duly deleted it, and the cache again so it would just find the js file…it was exactly the same…so I recreated the gz file with the newly modified js script…and again its still the same old file in the cache…

That’s really odd indeed. I’ve had caching issues with HACS before but, as David mentioned above, opening Developer tools, right-clicking on the refresh button and choosing “Empty Cache and Hard Reload” has always done the job. I’ll keep thinking about it and respond if I think of anything else.

Thank you very much…It’s driving me crazy…
Just out of curiosity you don’t have to enable Lit anywhere in HA do you…I’m pretty sure you don’t and it is just some sort of crazy caching issue…but to be in both Chrome and Edge browsers is perplexing

You are correct in your assumption, it should just work. You could try an incognito tab in chrome to see if the changes are present there but it may cause other weird issues due to the way incognito mode works. Might help us fully qualify it being a caching issue which I still feel like it is tbh.

1 Like

It is indeed absolutely fine in incognito mode…so caching has a lot to answer for on my computer…!!!

1 Like

yeah, this is my working card: https://gist.github.com/Mariusthvdb/2f24cc40a6dac7e474c65e7412a4c418
below in the comments I have added my config.

check my card above, and adapt to the same Lit (versus your LetElement)

also there’s a guard in place in line 679 (quick edit…) , which was added on Balloobs own instructions.

btw, I don’t use HACS, so any issue with that I cant help you with. I simply edit the resource, click refresh resources, and that’s it (mostly). if must be, I clear browser cache in Chrome manually, or edit the version number in resources.yaml

1 Like