Custom Dark Sky Animated Weather Card

My modification of this card optionally shows decimals

great thank you - work well!

1 Like

Hello, loving this card as opposed to the ā€œoriginalā€ custom animated weather card it can show temperature values of my actual sensor - and not just the entity.

One question though: As the weather integration I am using (dwd weather) doesnā€™t have forecast sensors for each day (the weather forecast somehow seems to be integrated into the weather entity) - I canā€™t use the forecast section of this card. The original one seems to be able to read the forecast from the weather entity.

So I would like to combine both worlds. Use the ā€œcurrentā€ section of this card and the forecast section of the original card. The original card has the option to only show forecast, current or details. However I donā€™t know how to achieve this with this version of the card.

Could you somehow help me to just show the ā€œcurrentā€ part of this card - e.g. by removing the forecast bit?

Thanks a lot guys!

You should be able to use attributes of the weather entity for the forecastā€¦ you just need to parse through the correct attribute in the card config.

Oh really this is possible? This would be awesome!!

Could you please explain to me how to do that? - I donā€™t have that much experience with configurating stuff and programming in generalā€¦

Best regards and thanks for the quick response!

so this is now officially an issue for me :wink:

even after having updated the LitElement to Lit, as David has done in his BOM card, I cant make the card show. Balloob tuned in on Discord on the error I saw:

 updateValues() {
    const root = this.shadowRoot;
    if (root.childElementCount > 0)

advising me to do:

It calls updateValues too early

the shadowroot doesnā€™t exist yet
just guard it. if (this.shadowRoot) { this.updateValues(); }

so I changed to

  set hass(hass) {
    this._hass = hass;
    if (this.shadowRoot) { this.updateValues(); }
//     this.updateValues();
  }


// #####
// updateValues - Updates card values as changes happen in the hass object
// #####

  updateValues() {
    const root = this.shadowRoot;
    if (root.childElementCount > 0) {

etcetc

no more errors in the inspector. No card either though ;-(

Hope anyone here has more luckā€¦ please let me know if you do.

Update

well, what do you know: the card is back, automagic once againā€¦ Guess Iā€™ll keep an eye on it

2 Likes

Funny I never saw that error myself but I guess I need to make that other change as well

@Mariusthvdb Iā€™ve not been able to get it working even with your tweaked version. All I get is this error in the log:

https://[URL]/local/dark-sky-weather-card.js?track=true:709:14 Uncaught TypeError: Cannot read property ā€˜childElementCountā€™ of null

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ā€¦