Custom Dark Sky Animated Weather Card



I have tried to get this dark sky weather card to work and i managed to get passed some errors but im stucked getting this error in home assistant lovelace gui:

Please define entities

“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.dark_sky_humidity”,
“entity_pressure”: “sensor.dark_sky_pressure”,
“entity_temperature”: “sensor.dark_sky_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”,
“entity_forecast_low_temp_2”: “sensor.dark_sky_overnight_low_temperature_1”,
“entity_forecast_low_temp_3”: “sensor.dark_sky_overnight_low_temperature_2”,
“entity_forecast_low_temp_4”: “sensor.dark_sky_overnight_low_temperature_3”,
“entity_forecast_low_temp_5”: “sensor.dark_sky_overnight_low_temperature_4”,
“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”


I am so very new at this and I’m suffering from newbieitist, it’s a thing now…

I am getting this vague error in my home-assistant.log file

2018-10-23 14:42:15 ERROR (MainThread) [frontend.js.latest.201810120] Uncaught TypeError: Cannot read property ‘state’ of undefined

I’ve updated the js to remove the .core, I’ve incremented the version in ui-lovelace for the JS and cleared the cache, cookies, and other site data.
I can’t seem to get passed this error…


So I resolved this, fresh eyes this morning while trying to figure out another issue noticed that there was an error in my sensors.yaml file. I was lacking a single space in front of ‘- platform’

Put the space in and now I have a beautiful animated weather card!


I know it’s been a while since you posted this but how did you get the picture at the top of the weather card?


I have had this card working for 2 months now, I updated to 0.81.0 today and everything was ok but I was just playing around with some cards on the same page as this weather card (didn’t touch its config) and now I’m getting this

here is my console



Jim! Tsk tsk!!! There are maybe 10 threads about this! It’s a known bug and we are awaiting 0.81.1 hot fix soon…


ok thanks I assumed it wasn’t related to update as it had been working prior to this on 0.81.0


Yeah they made an error after 0.81.0b2 and it went straight to release instead of b3.


Issue still exists in 0.81.1


do you have 0.81.1 or does the dev tools show 0.81.0dev or something like that?




well that is odd. Peeps on discord say it fixed it for them


Same. I’m going to try to get it figured, I’ll let you know if I do.


@Kaostral - I found the solution here: Custom animated weather card for Lovelace

Basically, if the SVG used for the large icon is also used for the small icon, in Safari, that causes blurring. A bit silly to do, but I duplicated the /animated/ folder and named them /animated.small/ and /animated.large/ and updated the JS to use the appropriate resources.

    this.content.innerHTML = `
  <span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated.large/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
  <span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span>
    <ul class="variations right">
        <li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${humidity}<span class="unit"> %</span></li>
        <li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${pressure}<span class="unit"> ${getUnit('air_pressure')}</span></li>
    <ul class="variations">
        <li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>
        <li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${visibility}<span class="unit"> ${getUnit('length')}</span></li>
  <div class="forecast clear">
      ${ => `
          <div class="day">
              <span class="dayname">${(' ')[0]}</span>
              <br><i class="icon" style="background: none, url(/local/icons/weather_icons/animated.small/${weatherIcons[hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
              <br><span class="highTemp">${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}</span>
              <br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>
  <br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;

I should note that Safari (and by extension, mobile safari) still renders the icons slightly blurred, but it’s much better.


I think I’ve got a new one here:

http://hassbian.local:8123/local/custom_ui/dark-sky-weather-card.js?v=1:17:43 Uncaught TypeError: Cannot read property 'unit_system' of undefined

I looked up the Dark Sky API and they’ve got an API call units = [units]

I went through the .js file and hard-coded all the unit functions I could find so they’d return “us”. My configuration.yaml also has the unit system at the top set to Imperial.

Any guess what’s going on? It doesn’t render a single thing. In the traditional UI, I’ve got seven zillion Dark Sky sensors now, so I must be querying Dark Sky correctly. Therefore, I’ve got to guess something’s jacked up in the display code.


Open up your dark-sky-weather-card.js file and remove .core
to read
(lines 17 and 26)

This string occurs twice in the same function. There was a breaking change in Home Assistant and the source code for this card has not yet been updated.


I’ve spent 4 hours with these awful instructions on how to get this damn thing running and I’m no closer to actually figuring it out. Does anybody have an actual well-written write-up on how to get ANYTHING to run properly?


@Yakker part of that problem is that Home-Assistant is still in a developmental stage and the updates sometimes have changes that break the code we have already. It’s annoying but part of the beta life.

Where are you stuck?


There is something wrong in my config because when I add it in the lovelace config the page does not load and I get a white screen like this after seeing it for half a second.

My configs are:


  - platform: darksky
    api_key: !secret darksky_api_key
      - 1
      - 2
      - 3
      - 4
      - 5
      minutes: 5
      - summary
      - icon
      - nearest_storm_distance
      - nearest_storm_bearing
      - apparent_temperature
      - pressure
      - precip_intensity
      - precip_probability
      - precip_accumulation
      - precip_intensity_max
      - humidity
      - wind_speed
      - visibility
      - wind_bearing
      - temperature
      - cloud_cover
      - precip_type
      - daily_summary
      - uv_index
      - temperature_high
      - temperature_low
      - apparent_temperature_high
      - apparent_temperature_low


  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js
          - 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.dark_sky_humidity
            entity_pressure: sensor.dark_sky_pressure
            entity_temperature: sensor.dark_sky_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
            entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
            entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
            entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
            entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
            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


.clear {
    clear: both;

  .card {
    margin: auto;
    padding-top: 2em;
    padding-bottom: 1em;
    padding-left: 1em;
    position: relative;

  .ha-icon {
    height: 18px;
    margin-right: 5px;
    color: var(--paper-item-icon-color);

  .temp {
    font-weight: 300;
    font-size: 4em;
    color: var(--primary-text-color);
    position: absolute;
    right: 1em;

  .tempc {
    font-weight: 300;
    font-size: 1.5em;
    vertical-align: super;
    color: var(--primary-text-color);
    position: absolute;
    right: 1em;
    margin-top: -14px;
    margin-right: 7px;

  .variations {
    display: inline-block;
    font-weight: 300;
    color: var(--primary-text-color);
    list-style: none;
    margin-left: -2em;
    margin-top: 4.5em;

  .variations.right {
    position: absolute;
    right: 1em;
    margin-left: 0;
    margin-right: 1em;

  .unit {
    font-size: .8em;

  .forecast {
    width: 100%;
    margin: 0 auto;
    height: 10em;

  .day {
    display: block;
    width: 20%;
    float: left;
    text-align: center;
    color: var(--primary-text-color);
    border-right: .1em solid #d9d9d9;
    line-height: 2;
    box-sizing: border-box;

  .dayname {
    text-transform: uppercase;

  .forecast .day:first-child {
    margin-left: 0;

  .forecast .day:nth-last-child(1) {
    border-right: none;
    margin-right: 0;

  .highTemp {
    font-weight: bold;

  .lowTemp {
    color: var(--secondary-text-color);

  .icon.bigger {
    width: 10em;
    height: 10em;
    margin-top: -4em;
    position: absolute;
    left: 0em;

  .icon {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;

  .weather {
    font-weight: 300;
    font-size: 1.5em;
    color: var(--primary-text-color);
    text-align: left;
    position: absolute;
    top: -0.5em;
    left: 6em;
    word-wrap: break-word;
    width: 30%;

config/www/custom_ui/dark-sky-weather-card.js as in the first post

Hassio is on version 0.81.5

What can I check?



@woody4165 Can you post your entire .js code and check your log for errors?


Mine did this also, Add ?v=5 and hit ctr shift and R to refresh.