Dark Sky Not loading icons

Configuration
1

I’ve configured my sensors.yaml to look like this:

Rebooted/cleared cache multiple times, but keep getting this error message:

http://192.168.1.214:8123/local/custom_ui/dark-sky-weather-card.js:17:43 Uncaught TypeError: Cannot read property ‘unit_system’ of undefined

for lovelace, in the old platform, nothing loads on the top

this is my lovelace file

resources:
  - url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.2
    type: js
  - url: /local/custom_ui/ecobee-card.js
    type: js
  - url: /local/card-modder.js
    type: module
  - url: /local/custom_ui/dark-sky-weather-card.js
    type: js

name:
views:
  - id: 0  # Automatically created id
    icon: mdi:castle
    cards:
      - id: 1  # Automatically created id
        type: horizontal-stack
        cards:
#################################################################
#                                                               #
#                           Remotes                             #
#                                                               #
################################################################# 

          - type: vertical-stack
            cards:
              - type: custom:card-modder
                card:          
                  type: picture-entity
                  entity: remote.living_room
                  tap_action: toggle
                  image: /local/lovelace/things/media2.jpg
                style:               
                  border-radius: 10px
                  border: solid 1px rgba(100,100,100,0.3)
                  box-shadow: 3px 3px rgba(0,0,0,0.4)
              - type: custom:card-modder
                card:          
                  type: picture-entity
                  entity: remote.downstairs
                  tap_action: toggle
                  image: /local/lovelace/things/media3.jpg
                style:               
                  border-radius: 10px
                  border: solid 1px rgba(100,100,100,0.3)
                  box-shadow: 3px 3px rgba(0,0,0,0.4)

      - id: 2
        type: horizontal-stack
        cards:
          - type: custom:ecobee-card
            entity: climate.thermostat

#################################################################
#                                                               #
#                           Weather                             #
#                                                               #
################################################################# 

      - id: 3
        type: horizontal-stack
        cards:
          - 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
2 
resources:
  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js

      - id: 3
        type: vertical-stack
        cards:
          - type: custom:card-modder
            card:
              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
            style:                 
              background-image: url("/local/lovelace/weather.jpg")
              background-repeat: no-repeat
              background-color: rgba(50,50,50,0.3)
              background-size: 100% 400px
              border-radius: 20px
              border: solid 1px rgba(100,100,100,0.3)
              color: "#ffffff"
              box-shadow: 3px 3px rgba(0,0,0,0.4)

dark-sky-weather-card.js and the icon located at /local/weather_icons/animated/

class DarkSkyWeatherCard extends HTMLElement {
  set hass(hass) {
    if (!this.content) {
      const card = document.createElement('ha-card');
      const link = document.createElement('link');
      link.type = 'text/css';
      link.rel = 'stylesheet';
      link.href = '/local/custom_ui/dark-sky-weather-card.css';
      card.appendChild(link);
      this.content = document.createElement('div');
      this.content.className = 'card';
      card.appendChild(this.content);
      this.appendChild(card);
    }

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

    const transformDayNight = {
      "below_horizon": "night",
      "above_horizon": "day",
    }
    const sunLocation = transformDayNight[hass.states[this.config.entity_sun].state];
    const weatherIcons = {
      '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-${sunLocation}-3`,
      'exceptional': '!!',
    }

    const windDirections = [
      'N',
      'NNE',
      'NE',
      'ENE',
      'E',
      'ESE',
      'SE',
      'SSE',
      'S',
      'SSW',
      'SW',
      'WSW',
      'W',
      'WNW',
      'NW',
      'NNW',
      'N'
    ];
    
    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 currentConditions = hass.states[this.config.entity_current_conditions].state;
    const humidity = hass.states[this.config.entity_humidity].state;
    const pressure = Math.round(hass.states[this.config.entity_pressure].state);
    const temperature = Math.round(hass.states[this.config.entity_temperature].state);
    const visibility = hass.states[this.config.entity_visibility].state;
    const windBearing = windDirections[(Math.round((hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
    const windSpeed = Math.round(hass.states[this.config.entity_wind_speed].state);
    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, };
    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, };
    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, };
    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, };
    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, };

    const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];


    this.content.innerHTML = `
      <span class="icon bigger" style="background: none, url(/local/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
      <span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span>
      <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>
        <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>
        </ul>
      </span>
      <div class="forecast clear">
          ${forecast.map(daily => `
              <div class="day">
                  <span class="dayname">${(daily.date).toString().split(' ')[0]}</span>
                  <br><i class="icon" style="background: none, url(/local/weather_icons/animated/${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>
              </div>`).join('')}
      </div>
      <br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;
  }

  setConfig(config) {
    if (!config.entity_current_conditions || 
    		!config.entity_humidity ||
    		!config.entity_pressure ||
     		!config.entity_temperature ||
    		!config.entity_visibility ||
    		!config.entity_wind_bearing ||
    		!config.entity_wind_speed) {
      throw new Error('Please define entities');
    }
    this.config = config;
  }

  // @TODO: This requires more intelligent logic
  getCardSize() {
    return 3;
  }
}

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

Appreciate your help, but not sure what im supposed to do here

4

Where do i get the icon pack? the icon pack is not apart of this post Custom Dark Sky Animated Weather Card

5

Download weather icon pack and save to the correct directory.

6

my card looks like this now, im almost there, what else do i need to do?
34%20PM

7

show your config in lovelace-ui also the directory of the files where you put .js, .css and icon pack.

8 
resources:
  - url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.2
    type: js
  - url: /local/custom_ui/ecobee-card.js
    type: js
  - url: /local/card-modder.js
    type: module
  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js
  - url: /local/custom_ui/button-card.js
    type: module
name: Test
views:
  - id: 0  # Automatically created id
    icon: mdi:castle
    cards:
      - id: 2  # Automatically created id
        type: horizontal-stack
        cards:
#################################################################
#                                                               #
#                           Remotes                             #
#                                                               #
################################################################# 

          - type: vertical-stack
            cards:
              - type: custom:button-card       
                entity: remote.living_room
                tap_action: toggle
                icon: mdi:sofa
                name: Receiver Upstairs
              - type: custom:button-card       
                entity: remote.downstairs
                tap_action: toggle
                icon: mdi:sofa
                name: Receiver Upstairs

      - id: 3
        type: vertical-stack
        cards:
          - type: custom:card-modder
            card:
              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
            style:                 
              background-image: url("/local/lovelace/weather.jpg")
              background-repeat: no-repeat
              background-color: rgba(50,50,50,0.3)
              background-size: 100% 400px
              border-radius: 20px
              border: solid 1px rgba(100,100,100,0.3)
              color: "#ffffff"
              box-shadow: 3px 3px rgba(0,0,0,0.4)

Imgur

9

can anyone else help me out please?

10

you need to show your darksky config… it does appear your icons might be in the wrong place at first sight but can’t tell without config

11

If you always use Google Chrome to open the lovelace then change the way how you open the dark-sky-weather-card.css to google chrome.

I see you set default open program from the picture attached are use with different programs.
The .CSS you use Firefox, but .JS you use Google Chrome. So try change the default open program. When you open lovelace.html also ctrl+F5 to refresh the page.

The directory is correct.

12 
resources:
  - url: /local/custom-lovelace/upcoming-media-card/upcoming-media-card.js?v=0.2.2
    type: js
  - url: /local/custom_ui/ecobee-card.js
    type: js
  - url: /local/card-modder.js
    type: module
  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js
  - url: /local/custom_ui/button-card.js
    type: module
name: Test
views:
  - id: 0  # Automatically created id
    icon: mdi:castle
    cards:
      - id: 2  # Automatically created id
        type: horizontal-stack
        cards:
#################################################################
#                                                               #
#                           Remotes                             #
#                                                               #
################################################################# 

          - type: vertical-stack
            cards:
              - type: custom:button-card       
                entity: remote.living_room
                tap_action: toggle
                icon: mdi:sofa
                name: Receiver Upstairs
              - type: custom:button-card       
                entity: remote.downstairs
                tap_action: toggle
                icon: mdi:sofa
                name: Receiver Upstairs

      - id: 3
        type: vertical-stack
        cards:
          - type: custom:card-modder
            card:
              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
            style:                 
              background-image: url("/local/lovelace/weather.jpg")
              background-repeat: no-repeat
              background-color: rgba(50,50,50,0.3)
              background-size: 100% 400px
              border-radius: 20px
              border: solid 1px rgba(100,100,100,0.3)
              color: "#ffffff"
              box-shadow: 3px 3px rgba(0,0,0,0.4)
13

That isn’t your dark sky configuration. That is your lovelace display of darksky, not the config.

14

you mean the config thats used for darksky in lovelace? if so, its at the bottom…, which other config are you referring to?

15

You need to read the docs because nothing will work if you don’t have darksky configured in your config yaml file (all the sensors etc)

You seem to have not actually configured the component at all. (Or perhaps you have but you’re not showing s that configuration anywhere)

16

it works fine in the regular configuration.yaml file…

homeassistant:
  name:
  latitude: 38.56197292078033
  longitude: 121.50247002084518
  #elevation:
  unit_system: imperial
  time_zone: America/Los_Angeles
  customize: !include customize.yaml

# Enables the frontend
frontend:
  javascript_version: latest


# Enables configuration UI
config:

hassio:

# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# http:
#   base_url: example.duckdns.org:8123

# Checks for available updates
# Note: This component will send some information about your system to
# the developers to assist with development of Home Assistant.
# For more information, please see:
# https://home-assistant.io/blog/2016/10/25/explaining-the-updater/
updater:
  # Optional, allows Home Assistant developers to focus on popular components.
  # include_used_components: true

# Discover some devices automatically
#discovery:


# Allows you to issue voice commands from the frontend in enabled browsers
conversation:

# Enables support for tracking state changes over time
history:

# View all events in a logbook
logbook:

# Enables a map showing the location of tracked devices
map:




# Text to speech
tts:
  - platform: google

# Cloud
cloud:
  alexa:
    filter:
      include_entities:
        - switch.music
        - switch.music2
      include_domains:
        - switch
    entity_config:
      light.kitchen:
        name: Turn on Receivers
        description: two receivers
      switch.stairs:
        display_categories: Switches

ring:
  username:
  password:

camera:
  - platform: ring

binary_sensor:
  - platform: ring
    monitored_conditions:
      - ding
      - motion

mqtt:
  broker: m12.cloudmqtt.com
  port: 18030
  username: rohmytca
  password: 
  keepalive: 60

# Remotes
remote:

  - platform: harmony
    name: Living Room
    host: 192.168.1.148
  - platform: harmony
    name: Downstairs
    host: 192.168.1.187
    friendly_name: Downstairs Hub

media_player:
  - platform: plex
    entity_namespace: 'plex'
    include_non_clients: false
    scan_interval: 5
    show_all_controls: false
    use_custom_entity_ids: true
    use_episode_art: true
    remove_unavailable_clients: true
    client_remove_interval: 600


weather:
  - platform: darksky
    api_key:


sun:

ecobee:
  api_key: 


group: !include groups.yaml
automation: !include automations.yaml
sensor: !include sensors.yaml
switch: !include includes/switches.yaml
17

Ah I see… but you have not added any monitored conditions…

This is what mine looks like:


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

(It’s part of a package for me so it might look different with the indenting)

18

care to elaborate…?

19

the docs for this component spell it out pretty well!

20

I have this in my sensors.yaml file…

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

dark sky works fine in regular home assistant, just not love lace…