Custom Dark Sky Animated Weather Card

[telecomguy]

Here it is:

- platform: darksky
  api_key: !secret darksky_api
  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

[Pippyn]

You are missing the 0 under forecast:

forecast:
    - 0
    - 1
    - 2
    - 3
    - 4
    - 5

[telecomguy]

Ah, dang. Didn’t even notice that. I had the sensor set up before so I didn’t copy all of the config from the git. Not sure how I missed the 0, but I just added it and it’s working now. Thanks for the second set of eyes!

[m.p.frankland]

You have this in your code twice. Once near the top and again at the bottom… (ha… just noticed I had it that way in my card as well… anyway, it should only be there once. I have corrected it in my card for the next version)

@Mariusthvdb

// #####
// ##### Assign the external hass object to an internal class var.
// ##### This is called everytime a state value changes
// #####

set hass(hass) { this._hass = hass }

You need to replace all the

this.hass

references with

this._hass

As that is what you defined the class variable to be

[m.p.frankland]

@thomasloven

It also, as we’ve seen, makes it impossible to change the style of the card (which might be a good ability to have once themes are a bit more fleshed out).

Hi Thomas,

Thanks, that helps. I really appreciate you taking the time to explain the issue.

I will make the change to the style property in the next version.

[Mariusthvdb (Marius)]

thanks!

took the second one out (at the bottom) and replaced all this.hass with this._hass.

Still a no show…

do have this in the inspector:

line 275:

nextSunSet = new Date(this._hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit'});

my sun.sun is:

[m.p.frankland]

what is being passed into entity_sun in your lovelace config ? also what is being passed into the locale flag?

[Mariusthvdb (Marius)]

@m.p.frankland

what is being passed into entity_sun in your lovelace config ? also what is being passed into the locale flag?

the exit same setting as for the card with the other Lit settings, which shows immediately with all correct info if I load it again:

  - type: custom:dark-sky-weather-card
    entity_sun: sun.sun
    entity_daily_summary: sensor.dark_sky_daily_summary
    entity_summary_today: sensor.dark_sky_forecast_summary_0
    entity_current_conditions: sensor.dark_sky_forecast_icon
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_apparent_temp: sensor.dark_sky_apparent_temperature
    entity_temperature: sensor.dark_sky_temperature
    entity_visibility: sensor.dark_sky_visibility
    entity_daytime_high: sensor.dark_sky_forecast_daytime_high_temperature_0
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.br_wind_speed
    entity_wind_force: sensor.br_wind_force
    entity_current_text: sensor.weather_rsd_icon
    entity_precip_intensity: sensor.dark_sky_precip_intensity
    entity_today: sensor.vandaag
    entity_forecast_high_temp_1: sensor.dark_sky_forecast_daytime_high_temperature_1
    entity_forecast_high_temp_2: sensor.dark_sky_forecast_daytime_high_temperature_2
    entity_forecast_high_temp_3: sensor.dark_sky_forecast_daytime_high_temperature_3
    entity_forecast_high_temp_4: sensor.dark_sky_forecast_daytime_high_temperature_4
    entity_forecast_high_temp_5: sensor.dark_sky_forecast_daytime_high_temperature_5
    entity_forecast_low_temp_1: sensor.dark_sky_forecast_overnight_low_temperature_1
    entity_forecast_low_temp_2: sensor.dark_sky_forecast_overnight_low_temperature_2
    entity_forecast_low_temp_3: sensor.dark_sky_forecast_overnight_low_temperature_3
    entity_forecast_low_temp_4: sensor.dark_sky_forecast_overnight_low_temperature_4
    entity_forecast_low_temp_5: sensor.dark_sky_forecast_overnight_low_temperature_5
    entity_forecast_icon_1: sensor.dark_sky_forecast_icon_1
    entity_forecast_icon_2: sensor.dark_sky_forecast_icon_2
    entity_forecast_icon_3: sensor.dark_sky_forecast_icon_3
    entity_forecast_icon_4: sensor.dark_sky_forecast_icon_4
    entity_forecast_icon_5: sensor.dark_sky_forecast_icon_5
    entity_summary_1: sensor.dark_sky_forecast_summary_1
    entity_summary_2: sensor.dark_sky_forecast_summary_2
    entity_summary_3: sensor.dark_sky_forecast_summary_3
    entity_summary_4: sensor.dark_sky_forecast_summary_4
    entity_summary_5: sensor.dark_sky_forecast_summary_5
    entity_pop: sensor.dark_sky_forecast_precip_probability
    entity_pop_1: sensor.dark_sky_forecast_precip_probability_1
    entity_pop_2: sensor.dark_sky_forecast_precip_probability_2
    entity_pop_3: sensor.dark_sky_forecast_precip_probability_3
    entity_pop_4: sensor.dark_sky_forecast_precip_probability_4
    entity_pop_5: sensor.dark_sky_forecast_precip_probability_5
    entity_precip_intensity_1: sensor.dark_sky_forecast_precip_intensity_1
    entity_precip_intensity_2: sensor.dark_sky_forecast_precip_intensity_2
    entity_precip_intensity_3: sensor.dark_sky_forecast_precip_intensity_3
    entity_precip_intensity_4: sensor.dark_sky_forecast_precip_intensity_4
    entity_precip_intensity_5: sensor.dark_sky_forecast_precip_intensity_5
    show_beaufort: true
    tooltips: true
    old_daily_format: false
    static_icons: false
    locale: nl
    tooltip_bg_color: 'rgb( 75,155,239)'
    tooltip_border_color: orange

[m.p.frankland]

Well, that error is basically saying that the value in [this.config.entity_sun] is undefined… which can either mean that the value being passed in the lovelace config is not an entity in home assistant or if it is an entity, that the entity’s value is undefined. based on your screenshots you are passing in sun.sun and sun.sun has a value (and attributes). not sure what the issue is … all that seems correct.

Try removing entity_sun from your lovelace config. That should prevent it from trying to display the sunset information. Just to see if the rest of the card works or if there is another error being masked by this.

[Mariusthvdb (Marius)]

sure will try, and the entities are indeed correct, see my ‘old config/lit’ card, thanks for having a look:

update:

still the same error:

with this config:

# https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
  - type: custom:dark-sky-weather-card
#    entity_sun: sun.sun
    entity_daily_summary: sensor.dark_sky_daily_summary
    etc

what surprises me is that with the sun config commented out, the old card still show the sun setting/rising

[bart56]

@m.p.frankland

Based on this information it sounds like you started from the first post in this thread…

There is a post here: [Custom Dark Sky Animated Weather Card]
There is also a version.json file if you use the card tracker.

Start with removing the card you have and .css file if you still have it. Get the raw version of the card from guthub and follow the readme to set it up.

Let me know if you have issues.

Thanks M.P.
I have to say that there must be something fundamentally wrong with my setup (I’ve actually tried several versions including some of the postings here that folks have gotten to work. I did what you said.

I deleted the .css file.
I downloaded your latest js file from: here and it is the only file in my custom_ui folder.
I’ve checked my ui-lovelace.yaml. and here it is:

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

title: Home Assistant
views:
  - icon: mdi:weather-cloudy
  - title: Weather
    cards:
    type: 'custom:dark-sky-weather-card'
    entity_current_conditions: sensor.dark_sky_icon
    entity_temperature: sensor.dark_sky_temperature
    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_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_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0
    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_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_sun: sun.sun
    entity_visibility: sensor.dark_sky_visibility
    entity_daytime_high: sensor.dark_sky_daytime_high_temperature_0
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.dark_sky_wind_speed
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_apparent_temp: sensor.dark_sky_apparent_temperature
    entity_daily_summary: sensor.dark_sky_daily_summary
    entity_pop: sensor.dark_sky_precip_probability
    entity_pop_intensity: sensor.dark_sky_precip_intensity
    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
    entity_current_text: sensor.dark_sky_current_text
    locale: en
    static_icons: false
    tooltip_bg_color: 'rgb( 75,155,239)'
    tooltip_border_color: orange
    tooltip_border_width: 3
    tooltip_caret_size: 10
    tooltip_fg_color: '#fff'
    tooltip_left_offset: -12
    tooltip_width: 100
    tooltips: true
    old_daily_format: false
    time_format: 24
    show_beaufort: true

This is actually progress because after a reboot, now it says I’m missing entity_daytime_high
Here is the debug console error:

dark-sky-weather-card.js?v=7.1.2:98 Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
    at HTMLElement.slotValue (dark-sky-weather-card.js?v=7.1.2:98)
    at HTMLElement.get slots [as slots] (dark-sky-weather-card.js?v=7.1.2:80)
    at HTMLElement.render (dark-sky-weather-card.js?v=7.1.2:44)
    at HTMLElement.update (app-19bfb9ea.js:1191)
    at HTMLElement._validate (app-19bfb9ea.js:1167)
    at HTMLElement._invalidate (app-19bfb9ea.js:1167)

and sure enough when I check states, I see sensor.dark_sky_daytime_high_temperature_1 through 5 but not 0. Any thoughts?

Thank you for the help. (I feel really silly that I can’t get it to work!)
Bart

[m.p.frankland]

can you post your darksky sensor config…

[bart56]

Sure:
- platform: darksky
api_key: xxxxxxxxxxxxxxxxxxxxxxx
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: 10

# Weather convert wind speed
  - platform: template
sensors:
  wind_speed_mph:
    unit_of_measurement: "mph"
    value_template: "{{(states('sensor.weather_wind_speed')| float * 2.23694) | round(1) }}"
#      temp_deg_f:
#        unit_of_measurement: "ºF"
#        value_template: "{{((states('sensor.weather_temperature')| float * 1.8) + 32) | round(1) }}"
  weather_pressure_inhg:
    friendly_name: "Weather Pressure"
    unit_of_measurement: "inHg"
    value_template: "{{(states('sensor.weather_pressure')|float / 33.76895 ) | round(2) }}"
  weather_precipitation_in:
    friendly_name: "Weather Precipitation"
    unit_of_measurement: "in"
    value_template: "{{(states('sensor.weather_precipitation')|float / 25.4 ) | round(1) }}"
  friendly_wind_direction:
    friendly_name: 'Wind Direction'
    value_template: >-
      {%if states.sensor.weather_wind_direction.state | float<=11 %}N
      {% elif states.sensor.weather_wind_direction.state | float>348 %}N
      {% elif states.sensor.weather_wind_direction.state | float<=34 | float>11 %}NNE
      {% elif states.sensor.weather_wind_direction.state | float<=56 | float>34 %}NE
      {% elif states.sensor.weather_wind_direction.state | float<=79 | float>56 %}ENE
      {% elif states.sensor.weather_wind_direction.state | float<=101 | float>79 %}E
      {% elif states.sensor.weather_wind_direction.state | float<=124 | float>101 %}ESE
      {% elif states.sensor.weather_wind_direction.state | float<=146 | float>124 %}SE
      {% elif states.sensor.weather_wind_direction.state | float<=169 | float>146 %}SSE
      {% elif states.sensor.weather_wind_direction.state | float<=191 | float>169 %}S
      {% elif states.sensor.weather_wind_direction.state | float<=214 | float>191 %}SSW
      {% elif states.sensor.weather_wind_direction.state | float<=236 | float>214 %}SW
      {% elif states.sensor.weather_wind_direction.state | float<=259 | float>236 %}WSW
      {% elif states.sensor.weather_wind_direction.state | float<=281 | float>259 %}W
      {% elif states.sensor.weather_wind_direction.state | float<=304 | float>281 %}WNW
      {% elif states.sensor.weather_wind_direction.state | float<=326 | float>304 %}NW
      {% elif states.sensor.weather_wind_direction.state | float<=348 | float>326 %}NNW
      {%- endif %}
  dark_sky_current_text:
    value_template: >-
      '{% if is_state("sensor.dark_sky_icon","clear-day") %} Clear 
       {% elif is_state("sensor.dark_sky_icon","clear-night") %} Clear 
       {% elif is_state("sensor.dark_sky_icon","rain") %} Rain
       {% elif is_state("sensor.dark_sky_icon","snow") %} Snowy
       {% elif is_state("sensor.dark_sky_icon","fog") %} Foggy
       {% elif is_state("sensor.dark_sky_icon","sleet") %} Sleet
       {% elif is_state("sensor.dark_sky_icon","wind") %} Windy
       {% elif is_state("sensor.dark_sky_icon","cloudy") %} Cloudy
       {% elif is_state("sensor.dark_sky_icon","partly-cloudy-day") %} Partly Cloudy
       {% elif is_state("sensor.dark_sky_icon","partly-cloudy-night") %} Partly Cloudy
       {% elif is_state("sensor.dark_sky_icon","hail") %} Hailing
       {% elif is_state("sensor.dark_sky_icon","lightning") %} Lightning
       {% elif is_state("sensor.dark_sky_icon","thunderstorm") %} Thunderstorm

[m.p.frankland]

I would say based on what you are showing and saying that the config you are changing isn’t the config for the card in question. I don’t known how that is possible but with entity_sun commented out the card has no way to provide sunset information. It replaces the html with `` (an empty string).

[m.p.frankland]

Add forecast day 0 to your config and restart HA…

forecast:
- 0
- 1
- 2
- 3
- 4
- 5

[bart56]

Finally Success!
Thanks for your help and patience. I’m embarrassed to say I spent 5 days on and off and to get here feels great.

Thanks very much m.p. This is a nice piece of work and I learned about all sorts of things in HA trying to figure out how to make it work.

Bart

[m.p.frankland]

Awesome!, Glad you finally got it working .

[Mariusthvdb (Marius)]

@m.p.frankland

I would say based on what you are showing and saying that the config you are changing isn’t the config for the card in question. I don’t known how that is possible but with entity_sun commented out the card has no way to provide sunset information. It replaces the html with `` (an empty string).

thought it to be a cache issue maybe, so cleared the cache, updated the version number, restarted…
still showing the sun icons ?!?

of course it i the config of my dark-sky-weather-cards.js, and it is a module isnt it? just like the ;old’ card?
Im stumped…

[Mariusthvdb (Marius)]

wouldn’t it be a nice feature if we could conditionally set the colour of the big temp based on the temp.

I use this customization for my regular sensors icons to give you an idea of what I am looking for. Can we set the styles to use a template?:

sensor.dark_sky_*temperature*:
  templates:
    icon_color: >
      if (state < -5) return 'rgb(30, 255, 255)';
      if (state < 0) return 'rgb(30, 144, 255)';
      if (state < 10) return 'rgb(255, 255, 0)';
      if (state < 15) return 'rgb(255, 211, 30)';
      if (state < 20) return 'rgb(0, 128, 0)';
      return 'rgb(255, 165, 0)';

tried something like this, bt it won’t work obviously:

  var tempIconColor = this.hass.states[this.config.entity_temperature].state <= -5 ? 'rgb(30, 255, 255)':
                      this.hass.states[this.config.entity_temperature].state <= 0 ? 'rgb(30, 144, 255)':
                      this.hass.states[this.config.entity_temperature].state <= 10 ? 'rgb(255, 255, 0)':
                      this.hass.states[this.config.entity_temperature].state <= 15 ? 'rgb(255, 211, 30)':
                      this.hass.states[this.config.entity_temperature].state <= 20 ? 'rgb(0, 128, 0)': 'rgb(255, 165, 0)';

or with this.current.temperature…

and set that in the style .temp
please consider?

[gkron]

Hi. I’m on 0.84.6. I’ve had the card working for a while. Allof a sudden it stopped working. I see this in the console.

Access to script at ‘https://unpkg-gcp.firebaseapp.com/@polymer/[email protected]/lit-element.js?module’ from origin ‘https://xxxxxxxxx.duckdns.org’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I haven’t changed anything witht the card. I had upgraded the first line in the .js file to this and it had been working consistently.

import { LitElement, html, } from ‘https://unpkg-gcp.firebaseapp.com/@polymer/[email protected]/lit-element.js?module’;

I assume this is a unpkg issue again? Should I just be patient or is it dead? I wasn’t planning on upgrading to 0.86 yet but would that fix the issue?