Custom Dark Sky Animated Weather Card

That didn’t answer the question.

let me try a different way,… When you upgraded to version .84 did you make the switch to storage mode (which is now the default) or did you force HA to keep using yaml mode for lovelace configuration (requires a change to configuration to keep using ui-lovelace.yaml).

I forced HA to keep using yaml mode and changed configuration…

hmmm… I am running out of ideas. Somehow your HA instance is using an old version even though you say have the new version.

The error you say you are getting isn’t possible in the latest version. As I mentioned before, that particular error check and error message was removed a couple of versions ago as it really wasn’t useful.

Original code in previous versions:

  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;
  }

Code from current version:

  setConfig(config) {
//    if (!config.entity) {
//      throw new Error('You need to define an entity');
//    }
    this.config = config;
  }

You need to find out why it is still using the old version. That’s why I was asking about storage and yaml mode. If you don’t force lovelace into yaml mode by adding

lovelace:
  mode: yaml

to your configuration.yaml it will use storage mode and any changes in ui-lovelace.yaml will be ignored.

Anyway, you say you have already done that so I am at a loss as to why your instance is still trying to use an old version.

Don´t know how and why, but it´s finally working! Many thanks for your help.

I would also like to ask you, if I can somehow change AM/PM clock to 24hrs and add feels like temperature?

Thank you

The 12 / 24 hour clock is based on the default for the locale you choose. If I set locale: fr it will change the days to french and the clock to 24 hour (metric).

I am considering adding apparent temp and probability of precipitation but not sure if I am going to add them as tooltips or in each day block. No specific timeline when they will be added.

1 Like

If you are looking for user input I think these would be great additions and I would be happy for them to be shown just for today in the top half of the card above the daily forecast.

Whatever you decide thanks again for your work on this.

Hello, the card is working well, thanks for your efforts @m.p.frankland and all in this forum.

My one question is, how come the first “forecast” is not today, rather it shows tomorrow’s forecast? Is this by design? I’ve tried changing the “config” in LoveLace but no avail, can only assume the .js script parses the forecast (days/high temp/low temp) and it thinks today is Friday (when it’s actually Thursday).

In Dark Sky, forecast 1 is tomorrow, forecast 0 is today. I can look into adding the current day’s forecast in the top of the card along with the current conditions (maybe as a tooltip on the current temp)…

Hello, I am receiving the error “Uncaught TypeError: Cannot read property ‘state’ of undefined” when trying to set this up. I saw this error reported earlier in the thread, but was not able to get it to work with any of the suggestions. Please let me know if there is something I can try to fix this.

I like that. Hard to believe you’re not a js developer.

You need to open debugging in Chrome and load your Home Assistant. Control-Shift-I and then reload your HA.

Look for all the red and post it here. It will tell you which states are undefined

Thanks for the help. Here is what it shows:

Uncaught TypeError: Cannot read property ‘state’ of undefined
at HTMLElement.get current [as current] (dark-sky-weather-card.js?v=7.1:166)
at HTMLElement._render (dark-sky-weather-card.js?v=7.1:29)
at HTMLElement._propertiesChanged (lit-element.js?module:165)
at HTMLElement._flushProperties (properties-changed.js?module:387)
at HTMLElement._flushProperties (lit-element.js?module:182)
at microtask.run (properties-changed.js?module:334)
at MutationObserver.microtaskFlush (async.js?module:41)

It seems like some part was not copied. Here it is:

Uncaught TypeError: Cannot read property ‘state’ of async.js?module:44 undefined

click on that - where does it take you? it should load the js file and show you what the script is trying to load

Ok this is the line with a red X next to it:

var conditions = this.hass.states[this.config.entity_current_conditions].state;

paste a few more lines

Here you go, there is only a red X next to the second line var conditions…

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);

My bet would be on current state undefined. Does your HA States have this sensor with data?

Mine is:
[sensor.dark_sky_temperature]

4.2 attribution: Powered by Dark Sky
unit_of_measurement: °C
friendly_name: Dark Sky Temperature
icon: mdi:thermometer

Yes I have that:

[sensor.dark_sky_temperature]22.2 attribution: Powered by Dark Sky unit_of_measurement: °F friendly_name: Dark Sky Temperature icon: mdi:thermometer

Card has been updated.

New version is available here
Readme is here

Major changes in this version are:

  • Added Dutch (nl) translation for Wind Directions
  • Added Feels Like to current temperature
  • Added current daytime high forecast
  • Added current probability of precipitation
  • Added daily forecast probability of precipitation
  • Altered the way daily forecast high and low appear
  • Added old_daily_format flag. Shows old style daily forecast high and low format (values stacked on top of each other).
  • Made most current condition items optional
  • Removed Sunset flag. Adding entity_sun to the configuration will cause the sunset information to appear

Feels Like: Optional component. Add entity_apparent_temp to config for it to be visible. I have made an attempt at translating the text for the locales that have been setup for Wind Directions. If the text is incorrect or you want a different locale setup let me know.
image

Current Daytime High Forecast: Optional component. Add entity_daytime_high to config for it to be visible
image

Current Probability of Precipitation (pop): Optional component. Add entity_pop to config for it to be visible
image

Daily Probability of Precipitation (pop): Optional component. Add entity_pop_1 thru 5 to config for it to be visible. All entity_pop_# entries must be present for any to show.
image

Altered the way the daily forecast appears. The new format is the default. A flag (old_daily_format) has been added to show the forecast in the old way if desired.
image

Most current conditions are now optional (including the ones added above). Here is the card with all options present

Here is the card with no optional components present
image

Removed the Sunset Flag. entity_sun is now optional and controls whether the sunset information is displayed.

3 Likes