Custom Dark Sky Animated Weather Card


hi @m.p.frankland I noticed that the version extension on the lovelace resource in the readme doesn’t match the version in the json. Might want to update the readme :wink:

On another note, I STILL can’t get this to load :unamused: (still getting custom element doesn’t exist error after cache clear, multiple refreshes etc.)

EDIT: still on HA 0.85.1 Is that an issue?


Not sure exactly what this means… The readme was updated today with the changelog, version and card source file


The version shouldn’t matter. What browser are you using ?





I’m using Chrome


Ah… other than for folks who use the tracker card, that number is meaningless. At one time the number needed to be incremented every time the card changed for lovelace to use the new version of the card. You could use whatever number you wanted as long as it changed whenever there was a new card. It doesn’t matter any more. Here is the line from my current ui-lovelace.

  - type: module
    url: /local/custom_ui/dark-sky-weather-card.js?v=7.2

btw: I was very happy when the reliance on the version number was removed… It was a PITA remembering to change it every time I tweaked the card. 7.2 was just the last time i updated the v number (before Christmas I think)


Do you know how to use the debug panel… The console window will show any card specific errors. If you keep getting an customElement not defined it means something is breaking the card bad enough that it doesn’t finish it’s definition phase. Either that or it can’t find the card in your directory structure.


unfortunately not…

I just tried updating card-modder and car-tools the latest versions but I think that has just caused more dramas. Now I get this when I navigate to a lovelace page withthe weather card on it: Uncaught TypeError: is not a function


the new card tools stops me from editing lovelace at the moment. It only works with 0.86


That error is in the card_modder definition so I can’t help there …

The debug tool is pretty easy to use…

Go to the page with the dark-sky card on it and press SHIFT+CTRL+C . It will open a panel on the right side of your screen. AT the bottom of the panel will be a window that should be the console window. hit F5 to refresh the page and any errors on the page should show up in that window. It looks like this:


Removed in latest??
Not in the readme but still in js


Thanks… must have fat fingered that… Its back in the readme.


Have you tried deleting the js file for the card completely and making a new file? I did this earlier and it fixed all my issues.


sorry for that, forgot to use the Preformatted text <>. I edited the original post too, but what I meant was that these Unit symbols are not yet using the<span class="unit> and hence are larger than the other unit symbols in that section of the card.
Small but delicate detail.


I actually have tried that, a few days ago. No change


Bugger!! Worth a shot in case you hadn’t.


It seems that I get quite a few errors in the console:

Uncaught (in promise) DOMException
card-tools.js:229 CARD-TOOLS IS INSTALLEDDeviceID: f9508854-651bd91f
card-modder.js:44 Uncaught (in promise) TypeError: is not a function
at HTMLElement._cardMod (card-modder.js:44)
at HTMLElement.firstUpdated (card-modder.js:26)
at HTMLElement._validate (app-19bfb9ea.js:1167)
at HTMLElement._invalidate (app-19bfb9ea.js:1167)
dark-sky-weather-card.js?v=7.2:287 Uncaught (in promise) TypeError: Cannot read property ‘state’ of undefined
at HTMLElement.get current [as current] (dark-sky-weather-card.js?v=7.2:287)
at HTMLElement.render (dark-sky-weather-card.js?v=7.2:27)
at HTMLElement.update (app-19bfb9ea.js:1191)
at HTMLElement._validate (app-19bfb9ea.js:1167)
at HTMLElement._invalidate (app-19bfb9ea.js:1167)
card-modder.js:44 Uncaught TypeError: is not a function
at HTMLElement._cardMod (card-modder.js:44)
at setTimeout (card-modder.js:37)


I just installed the newest version of the card and it’s awesome!

I added all the optional stuuf and the card looks great but…

where does the weekly forecast summary at the bottom of this card come from?

I’d like to leave everything but that one thing since I use another custom card that already displays that information and I like the size of the text in that box better.


Thanks, I will look into that. But since this card is still called dark-sky-weather-card, I was kind of hoping that could be done inside the card…:wink:

I was maybe thinking using the sunset/rise calculation to have available day/night icons displayed.

so either use the true states for clear-day/night and partly-cloudy-day/night, or, for other states, use a mapping based on sunset/rise calculation ?

We now leave cloudy-day1,2,3.svg and cloudy-night1,2,3.svg and rainy-night.svg unused.


With HA 0.86.1 I have this:


My config:

- type: custom:dark-sky-weather-card
            entity_sun: sun.sun
            entity_daily_summary: sensor.dark_sky_daily_summary
            entity_current_conditions: sensor.dark_sky_icon
            entity_humidity: sensor.humidity_outdoor
            entity_pressure: sensor.pressure_outdoor
            entity_temperature: sensor.temperature_outdoor
            entity_apparent_temp: sensor.dark_sky_apparent_temperature
            entity_visibility: sensor.dark_sky_visibility
            entity_wind_bearing: sensor.dark_sky_wind_bearing
            entity_wind_speed: sensor.dark_sky_wind_speed
            entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
            entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
            entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
            entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
            entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
            entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1
            entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2
            entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3
            entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4
            entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5
            entity_forecast_icon_1: sensor.dark_sky_icon_1
            entity_forecast_icon_2: sensor.dark_sky_icon_2
            entity_forecast_icon_3: sensor.dark_sky_icon_3
            entity_forecast_icon_4: sensor.dark_sky_icon_4
            entity_forecast_icon_5: sensor.dark_sky_icon_5
            entity_summary_1: sensor.dark_sky_summary_1
            entity_summary_2: sensor.dark_sky_summary_2
            entity_summary_3: sensor.dark_sky_summary_3
            entity_summary_4: sensor.dark_sky_summary_4
            entity_summary_5: sensor.dark_sky_summary_5
            entity_pop_1: sensor.dark_sky_precip_probability_1
            entity_pop_2: sensor.dark_sky_precip_probability_2
            entity_pop_3: sensor.dark_sky_precip_probability_3
            entity_pop_4: sensor.dark_sky_precip_probability_4
            entity_pop_5: sensor.dark_sky_precip_probability_5
            time_format: 24
            locale: pl

Any solution for that?