Custom Dark Sky Animated Weather Card

[Mariusthvdb (Marius)]

not that is necessarily solves any of the above issues, but merely as a suggestion to all fellow dark_sky users:

if you use the forecast option and especially if you use it with a large number of days, you should consider creating a second sensor for that. If not, Darksky creates these forecast sensors, of which you probably only need the uncommented ones:

  weather_darksky_forecast:
    name: Weer Darksky forecast
    entities:
#      - sensor.dark_sky_cloud_coverage_0
#      - sensor.dark_sky_cloud_coverage_1
#      - sensor.dark_sky_cloud_coverage_2
#      - sensor.dark_sky_cloud_coverage_3
#      - sensor.dark_sky_cloud_coverage_4
#      - sensor.dark_sky_cloud_coverage_5
#      - sensor.dark_sky_daily_max_precip_intensity_0
#      - sensor.dark_sky_daily_max_precip_intensity_1
#      - sensor.dark_sky_daily_max_precip_intensity_2
#      - sensor.dark_sky_daily_max_precip_intensity_3
#      - sensor.dark_sky_daily_max_precip_intensity_4
#      - sensor.dark_sky_daily_max_precip_intensity_5
#      - sensor.dark_sky_daytime_high_apparent_temperature_0
#      - sensor.dark_sky_daytime_high_apparent_temperature_1
#      - sensor.dark_sky_daytime_high_apparent_temperature_2
#      - sensor.dark_sky_daytime_high_apparent_temperature_3
#      - sensor.dark_sky_daytime_high_apparent_temperature_4
#      - sensor.dark_sky_daytime_high_apparent_temperature_5
      - sensor.dark_sky_forecast_daytime_high_temperature_0
      - sensor.dark_sky_forecast_daytime_high_temperature_1
      - sensor.dark_sky_forecast_daytime_high_temperature_2
      - sensor.dark_sky_forecast_daytime_high_temperature_3
      - sensor.dark_sky_forecast_daytime_high_temperature_4
      - sensor.dark_sky_forecast_daytime_high_temperature_5
#      - sensor.dark_sky_dew_point_0
#      - sensor.dark_sky_dew_point_1
#      - sensor.dark_sky_dew_point_2
#      - sensor.dark_sky_dew_point_3
#      - sensor.dark_sky_dew_point_4
#      - sensor.dark_sky_dew_point_5
#      - sensor.dark_sky_humidity_0
#      - sensor.dark_sky_humidity_1
#      - sensor.dark_sky_humidity_2
#      - sensor.dark_sky_humidity_3
#      - sensor.dark_sky_humidity_4
#      - sensor.dark_sky_humidity_5
      - sensor.dark_sky_forecast_icon
      - sensor.dark_sky_forecast_icon_0
      - sensor.dark_sky_forecast_icon_1
      - sensor.dark_sky_forecast_icon_2
      - sensor.dark_sky_forecast_icon_3
      - sensor.dark_sky_forecast_icon_4
      - sensor.dark_sky_forecast_icon_5
#      - sensor.dark_sky_moon_phase_0
#      - sensor.dark_sky_moon_phase_1
#      - sensor.dark_sky_moon_phase_2
#      - sensor.dark_sky_moon_phase_3
#      - sensor.dark_sky_moon_phase_4
#      - sensor.dark_sky_moon_phase_5
#      - sensor.dark_sky_overnight_low_apparent_temperature_0
#      - sensor.dark_sky_overnight_low_apparent_temperature_1
#      - sensor.dark_sky_overnight_low_apparent_temperature_2
#      - sensor.dark_sky_overnight_low_apparent_temperature_3
#      - sensor.dark_sky_overnight_low_apparent_temperature_4
#      - sensor.dark_sky_overnight_low_apparent_temperature_5
      - sensor.dark_sky_forecast_overnight_low_temperature_0
      - sensor.dark_sky_forecast_overnight_low_temperature_1
      - sensor.dark_sky_forecast_overnight_low_temperature_2
      - sensor.dark_sky_forecast_overnight_low_temperature_3
      - sensor.dark_sky_forecast_overnight_low_temperature_4
      - sensor.dark_sky_forecast_overnight_low_temperature_5
#      - sensor.dark_sky_ozone_0
#      - sensor.dark_sky_ozone_1
#      - sensor.dark_sky_ozone_2
#      - sensor.dark_sky_ozone_3
#      - sensor.dark_sky_ozone_4
#      - sensor.dark_sky_ozone_5
#      - sensor.dark_sky_precip_0
#       - sensor.dark_sky_precip_1
#      - sensor.dark_sky_precip_2
#      - sensor.dark_sky_precip_3
#      - sensor.dark_sky_precip_4
#      - sensor.dark_sky_precip_5
#      - sensor.dark_sky_precip_accumulation_0
#      - sensor.dark_sky_precip_accumulation_1
#      - sensor.dark_sky_precip_accumulation_2
#      - sensor.dark_sky_precip_accumulation_3
#      - sensor.dark_sky_precip_accumulation_4
#      - sensor.dark_sky_precip_accumulation_5
#      - sensor.dark_sky_precip_intensity_0
#      - sensor.dark_sky_precip_intensity_1
#      - sensor.dark_sky_precip_intensity_2
#      - sensor.dark_sky_precip_intensity_3
#      - sensor.dark_sky_precip_intensity_4
#      - sensor.dark_sky_precip_intensity_5
#      - sensor.dark_sky_precip_probability_0
#      - sensor.dark_sky_precip_probability_1
#      - sensor.dark_sky_precip_probability_2
#      - sensor.dark_sky_precip_probability_3
#      - sensor.dark_sky_precip_probability_4
#      - sensor.dark_sky_precip_probability_5
#      - sensor.dark_sky_pressure_0
#      - sensor.dark_sky_pressure_1
#      - sensor.dark_sky_pressure_2
#      - sensor.dark_sky_pressure_3
#      - sensor.dark_sky_pressure_4
#      - sensor.dark_sky_pressure_5
      - sensor.dark_sky_forecast_summary
      - sensor.dark_sky_forecast_summary_0
      - sensor.dark_sky_forecast_summary_1
      - sensor.dark_sky_forecast_summary_2
      - sensor.dark_sky_forecast_summary_3
      - sensor.dark_sky_forecast_summary_4
      - sensor.dark_sky_forecast_summary_5
#      - sensor.dark_sky_forecast_temperature
#      - sensor.dark_sky_forecast_temperature_0
#      - sensor.dark_sky_forecast_temperature_1
#      - sensor.dark_sky_forecast_temperature_2
#      - sensor.dark_sky_forecast_temperature_3
#      - sensor.dark_sky_forecast_temperature_4
#      - sensor.dark_sky_forecast_temperature_5
#      - sensor.dark_sky_uv_index_0
#      - sensor.dark_sky_uv_index_1
#      - sensor.dark_sky_uv_index_2
#      - sensor.dark_sky_uv_index_3
#      - sensor.dark_sky_uv_index_4
#      - sensor.dark_sky_uv_index_5
#      - sensor.dark_sky_visibility_0
#      - sensor.dark_sky_visibility_1
#      - sensor.dark_sky_visibility_2
#      - sensor.dark_sky_visibility_3
#      - sensor.dark_sky_visibility_4
#      - sensor.dark_sky_visibility_5
#      - sensor.dark_sky_wind_bearing_0
#      - sensor.dark_sky_wind_bearing_1
#      - sensor.dark_sky_wind_bearing_2
#      - sensor.dark_sky_wind_bearing_3
#      - sensor.dark_sky_wind_bearing_4
#      - sensor.dark_sky_wind_bearing_5
#      - sensor.dark_sky_wind_gust_0
#      - sensor.dark_sky_wind_gust_1
#      - sensor.dark_sky_wind_gust_2
#      - sensor.dark_sky_wind_gust_3
#      - sensor.dark_sky_wind_gust_4
#      - sensor.dark_sky_wind_gust_5
#      - sensor.dark_sky_wind_speed_0
#      - sensor.dark_sky_wind_speed_1
#      - sensor.dark_sky_wind_speed_2
#      - sensor.dark_sky_wind_speed_3
#      - sensor.dark_sky_wind_speed_4
#      - sensor.dark_sky_wind_speed_5

just create 2, one with the whole shebang, and one with only the few conditions you need the forecast for:

  - platform: darksky
    api_key: !secret darksky_key
    update_interval:
    # At least one of these must be specified:
      hours: 1
    monitored_conditions:
      - summary
      - icon
      - temperature
      - precip_type
      - precip_intensity
      - precip_probability
      - precip_accumulation
      - apparent_temperature
      - dew_point
      - wind_speed
      - wind_gust
      - wind_bearing
      - cloud_cover
      - humidity
      - pressure
      - visibility
      - ozone
      - minutely_summary
      - hourly_summary
      - daily_summary
      - temperature_high
      - temperature_low
      - apparent_temperature_high
      - apparent_temperature_low
      - precip_intensity_max
      - uv_index
      - moon_phase
      - nearest_storm_distance
      - nearest_storm_bearing

  - platform: darksky
    api_key: !secret darksky_key
    name: dark_sky_forecast
    update_interval:
    # At least one of these must be specified:
      minutes: 720
    forecast:
      - 0
      - 1
      - 2
      - 3
      - 4
      - 5
    monitored_conditions:
      - summary
      - icon
#      - precip_type
#      - precip_intensity
#      - precip_probability
#      - precip_accumulation
#      - apparent_temperature
#      - dew_point
#      - wind_speed
#      - wind_gust
#      - wind_bearing
#      - cloud_cover
#      - humidity
#      - pressure
#      - visibility
#      - ozone
#      - minutely_summary
#      - hourly_summary
#      - daily_summary
      - temperature_high
      - temperature_low
#      - apparent_temperature_high
#      - apparent_temperature_low
#      - precip_intensity_max
#      - uv_index
#      - moon_phase
#      - nearest_storm_distance
#      - nearest_storm_bearing

just thought Id share…

[klogg]

@Mariusthvdb I like this idea a lot. I saw you post it in another thread with some problems so didn’t copy it. I guess you fixed that problem?

[Mariusthvdb (Marius)]

don’t exactly know which problem that was , but yes, Ive got it fixed. It also appeared to be a ‘bug’ in the Darksky info, so a PR has been made for the component not to use temperature as a forecast condition anymore, and only use temperature_high and _low

[m.p.frankland]

odd… I am running on 0.84.6 without issue. Is there anything in the log ?

[jolly]

http://192.168.1.xxx:8123/local/custom_ui/dark-sky-weather-card.js?v=7.1:85:82 Uncaught TypeError: Cannot read property ‘state’ of undefined

[m.p.frankland]

This is an error in the card because the state is unknown… based on that error line, you are using an older version of the card. Line 85 is a comment line in the latest version. Take a look at line 85 in your .js file… the config object that has an unknown state will be on that line. It should be right before position 82.

Are there any errors relating to the darksky platform. you may only see them in the log right after HA starts (if there are any at all)

[jolly]

I copied the raw file and changed the type from js to module

[jolly]

84  get dayOrNight() {
85    const transformDayNight = { "below_horizon": "night", "above_horizon": "day", }
86    return transformDayNight[this.hass.states[this.config.entity_sun].state];
87  }

[jolly]

my line on file js

[m.p.frankland]

Yah,

Sorry, I was looking at the wrong source code. You have the latest I have posted. I have another version with a couple of tweaks that changed some of the line numbers…

Anyway,

That error is occurring after the last comma on line 85. Try removing the comma and see if that helps.

What version of HA are you on?

The really odd thing is that there isn’t a state on that line. The next line 86 has a state reference entity_sun. can you make sure that is being passed in and that the sensor being used has a value…

[alibababa]

Hi, API key is actual, restart done, cache is cleared and refreshed UI, all sensor states are working properly. Really don´t know, why it´s not working…

[m.p.frankland]

Can you post your .js file.

Also you do not have wind_bearing defined in your Dark Sky platform.

[alibababa]

Wind_bearing just added, no change…

.js file saved under /config/www/custom_ui/

import { LitElement, html, } from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';

// Create your custom component
class DarkSkyWeatherCard extends LitElement {
  
  // Declare properties
  static get properties() {
    return { hass: Object, config: Object, };
  }


// #####
// ##### Define Render Template
// #####

  _render( {hass, config }) {

//  Handle Configuration Flags 
    var icons = this.config.static_icons ? "static" : "animated";
    var sunLeft = this.config.sunset ? this.sunSet.left : "";
    var sunRight = this.config.sunset ? this.sunSet.right : "";

// Build HTML    
    return html`
      <style>
      ${this.style}
      </style>
      <ha-card class = "card">  
        <span class="icon bigger" style="background: none, url(/local/icons/weather_icons/${icons}/${this.weatherIcons[this.current.conditions]}.svg) no-repeat; background-size: contain;">${this.current.conditions}</span>
        <span class="temp">${this.current.temperature}</span><span class="tempc">${this.getUOM('temperature')}</span>
        <span>
          <ul class="variations right">
              <li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${this.current.humidity}<span class="unit"> %</span></li>
              <li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${this.current.pressure}<span class="unit"> ${this.getUOM('air_pressure')}</span></li>
              ${sunRight}
          </ul>
          <ul class="variations">
              <li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${this.current.windBearing} ${this.current.windSpeed}<span class="unit"> ${this.getUOM('length')}/h</span></li>
              <li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${this.current.visibility}<span class="unit"> ${this.getUOM('length')}</span></li>
              ${sunLeft}
          </ul>
        </span>
            <div class="forecast clear">
              ${this.forecast.map(daily => html`
                <div class="day fcasttooltip">
                  <span class="dayname">${(daily.date).toLocaleDateString(this.config.locale,{weekday: 'short'})}</span>
                  <br><i class="icon" style="background: none, url(/local/icons/weather_icons/${icons}/${this.weatherIcons[this.hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
                  <br><span class="highTemp">${Math.round(this.hass.states[daily.temphigh].state)}${this.getUOM('temperature')}</span>
                  <br><span class="lowTemp">${Math.round(this.hass.states[daily.templow].state)}${this.getUOM('temperature')}</span>
                  <div class="fcasttooltiptext">${ this.config.tooltips ? this.hass.states[daily.summary].state : ""}</div>
                </div>`)}
              </div>
        <br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>
      </ha-card>
    `;
  }


// #####
// ##### windDirections" returns set of possible wind directions by specified language
// #####

  get windDirections() {
    const windDirections_en = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'];
    const windDirections_fr = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSO','SO','OSO','O','ONO','NO','NNO','N'];
    const windDirections_de = ['N','NNO','NO','ONO','O','OSO','SO','SSO','S','SSW','SW','WSW','W','WNW','NW','NNW','N'];
    switch (this.config.locale) {
      case "it" :
      case "fr" :
        return windDirections_fr;
      case "de" :
        return windDirections_de;
      default :
        return windDirections_en;
    }
  }


  
// #####
// ##### dayOrNight : returns day or night depending opn the position of the sun.
// #####

  get dayOrNight() {
    const transformDayNight = { "below_horizon": "night", "above_horizon": "day", }
    return transformDayNight[this.hass.states[this.config.entity_sun].state];
  }


// #####
// ##### weatherIcons: returns icon names based on current conditions text
// #####
  get weatherIcons() {
    return {
      'clear-day': 'day',
      'clear-night': 'night',
      'rain': 'rainy-5',
      'snow': 'snowy-6',
      'sleet': 'rainy-6',
      'wind': 'cloudy',
      'fog': 'cloudy',
      'cloudy': 'cloudy',
      'partly-cloudy-day': 'cloudy-day-3',
      'partly-cloudy-night': 'cloudy-night-3',
      'hail': 'rainy-7',
      'lightning': 'thunder',
      'thunderstorm': 'thunder',
      'windy-variant': `cloudy-${this.dayOrNight}-3`,
      'exceptional': '!!',
    }
  }


// #####
// ##### forecast : returns forcasted weather information for the next 5 days
// #####

  get forecast() {
    var forecastDate1 = new Date();
    forecastDate1.setDate(forecastDate1.getDate()+1);
    var forecastDate2 = new Date();
    forecastDate2.setDate(forecastDate2.getDate()+2);
    var forecastDate3 = new Date();
    forecastDate3.setDate(forecastDate3.getDate()+3);
    var forecastDate4 = new Date();
    forecastDate4.setDate(forecastDate4.getDate()+4);
    var forecastDate5 = new Date();
    forecastDate5.setDate(forecastDate5.getDate()+5);
    

    const forecast1 = { date: forecastDate1,
  	                  condition: this.config.entity_forecast_icon_1,
  										temphigh: this.config.entity_forecast_high_temp_1,
  										templow:  this.config.entity_forecast_low_temp_1, 
  										summary: this.config.entity_summary_1, };
    const forecast2 = { date: forecastDate2,
  	                  condition: this.config.entity_forecast_icon_2,
  										temphigh: this.config.entity_forecast_high_temp_2,
  										templow:  this.config.entity_forecast_low_temp_2,
  										summary: this.config.entity_summary_2,  };
    const forecast3 = { date: forecastDate3,
  	                  condition: this.config.entity_forecast_icon_3,
  										temphigh: this.config.entity_forecast_high_temp_3,
  										templow:  this.config.entity_forecast_low_temp_3,
  										summary: this.config.entity_summary_3, };
    const forecast4 = { date: forecastDate4,
  	                  condition: this.config.entity_forecast_icon_4,
  										temphigh: this.config.entity_forecast_high_temp_4,
  										templow:  this.config.entity_forecast_low_temp_4,
  										summary: this.config.entity_summary_4, };
    const forecast5 = { date: forecastDate5,
  	                  condition: this.config.entity_forecast_icon_5,
  										temphigh: this.config.entity_forecast_high_temp_5,
  										templow:  this.config.entity_forecast_low_temp_5,
  										summary: this.config.entity_summary_5, };

	  return [forecast1, forecast2, forecast3, forecast4, forecast5];
  }


// #####
// ##### current : Returns current weather information
// #####

  get current() {
    var conditions = this.hass.states[this.config.entity_current_conditions].state;
    var humidity = this.hass.states[this.config.entity_humidity].state;
    var pressure = Math.round(this.hass.states[this.config.entity_pressure].state);
    var temperature = Math.round(this.hass.states[this.config.entity_temperature].state);
    var visibility = this.hass.states[this.config.entity_visibility].state;
    var windBearing = this.windDirections[(Math.round((this.hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
    var windSpeed = Math.round(this.hass.states[this.config.entity_wind_speed].state);
    
    return {
      'conditions': conditions,
      'humidity': humidity,
      'pressure': pressure,
      'temperature': temperature,
      'visibility': visibility,
      'windBearing': windBearing,
      'windSpeed': windSpeed,
    }
  }

  
// #####
// ##### sunSetAndRise: returns set and rise information
// #####

get sunSet() {
    var nextSunSet = new Date(this.hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit'});
    var nextSunRise = new Date(this.hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit'});
    var sunLeft;
    var sunRight;
    var nextDate = new Date();
    nextDate.setDate(nextDate.getDate() + 1);
    if (this.hass.states[this.config.entity_sun].state == "above_horizon" ) {
      nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise;
      return {
      'left': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span>${nextSunSet}</li>`,
      'right': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span>${nextSunRise}</li>`,
      };
    } else {
      if (new Date().getDate() != new Date(this.hass.states[this.config.entity_sun].attributes.next_rising).getDate()) {
        nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise;
        nextSunSet = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunSet;
      } 
      return {
      'left': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span>${nextSunRise}</li>`,
      'right': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span>${nextSunSet}</li>`,
      };
    }
}


// #####
// ##### style: returns the CSS style classes for the card
// ####

get style() {
  
  // Get config flags or set defaults if not configured
  var tooltipBGColor = this.config.tooltip_bg_color || "rgb( 75,155,239)";
  var tooltipFGColor = this.config.tooltip_fg_color || "#fff";
  var tooltipBorderColor = this.config.tooltip_border_color || "rgb(255,161,0)";
  var tooltipBorderWidth = this.config.tooltip_border_width || "1";
  var tooltipCaretSize = this.config.tooltip_caret_size || "5";
  var tooltipWidth = this.config.tooltip_width || "110"
  var tooltipLeftOffset = this.config.tooltip_left_offset || "-12"
  var tooltipVisible = this.config.tooltips ? "visible" : "hidden"
  
  return html`
        .clear {
        clear: both;
      }

      .card {
        margin: auto;
        padding-top: 2em;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: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: 9em;
      }

      .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: 20;
      }

      .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%;
      }
  
      .fcasttooltip {
        position: relative;
        display: inline-block;
      }

      .fcasttooltip .fcasttooltiptext {
        visibility: hidden;
        width: ${tooltipWidth}px;
        background-color: ${tooltipBGColor};
        color: ${tooltipFGColor};
        text-align: center; 
        border-radius: 6px;
        border-style: solid;
        border-color: ${tooltipBorderColor};
        border-width: ${tooltipBorderWidth}px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        bottom: 50%;
        left: 0%; 
        margin-left: ${tooltipLeftOffset}px;
      }

      .fcasttooltip .fcasttooltiptext:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -${tooltipCaretSize}px;
        border-width: ${tooltipCaretSize}px;
        border-style: solid;
        border-color: ${tooltipBorderColor} transparent transparent transparent;
      }

      .fcasttooltip:hover .fcasttooltiptext {
        visibility: ${tooltipVisible};
      }
      `
}

// #####
// ##### getUOM: gets UOM for specified measure in either metric or imperial
// #####

  getUOM(measure) {
    
    const lengthUnit = this.hass.config.unit_system.length;
    
    switch (measure) {
      case 'air_pressure':
        return lengthUnit === 'km' ? 'hPa' : 'mbar';
      case 'length':
        return lengthUnit;
      case 'precipitation':
        return lengthUnit === 'km' ? 'mm' : 'in';
      default:
        return this.hass.config.unit_system[measure] || '';
    }
  }


  setConfig(config) {
//    if (!config.entity) {
//      throw new Error('You need to define an entity');
//    }
    this.config = config;
  }
  
  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3 //this.config.entities.length + 1;
  }
  
}

customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);

[m.p.frankland]

icon looks like it is missing as well.

That code is definitely the new card.

The really odd thing is the error that you said you were having (where it comes up red and says there are missing entities) is from an earlier version of the card. This version of the card doesn’t have that check or the ability to present that error. Did you ever have the older version?

[alibababa]

Icons are also saved as per instruction. I have similar one from arsaboo, but I think that I remove all files…

[m.p.frankland]

no no, you are missing “icon” from the dark sky configuration

[alibababa]

Can you pls specify it closer? As I can see state of sensor.dakr_sky_icon

[jolly]

Unable to connect to Dark Sky: HTTPSConnectionPool(host=‘api.darksky.net’, port=443): Max retries exceeded with url: /forecast/apixxxxxxxxxxxx/xx.xxxxxx,x.856043?units=si&lang=it (Caused by NewConnectionError(’<urllib3.connection.VerifiedHTTPSConnection object at 0x7263a3d0>: Failed to establish a new connection: [Errno -3] Try again’,))

[firstof9]

That error is an error with the darksky component not the card.

[fernandex00 (Fernando Tapia S)]

i got the latest version the one on github