Custom Dark Sky Animated Weather Card

Nice, and understood. I merely suggested to place above the icon, because my other card had the weather station name listed also, and balances it that way. Gives it a nice ‘header’ feel.

check through the log and find the error line(s) directly referencing dark-sky-weather-card. The lines for aysnc.js are part of the stack trace. Ther may be only one for the card and a ton for async. The line (s) for dark-sky-weather-card will tell you specifically what source code line the error is occuring on.

The error is being thrown because at least one of the required parameters being passed in is missing or is referencing a value that is in an unknown state. knowing the line in the card causing the error will help narrow down the parameter that is causing the issue.

please also consider adding an option for wind force in But:

const windBft = hass.states[this.config.entity_wind_force].state;

and setting for the config:

entity_wind_force: sensor.br_wind_force

tried to fiddle it in, but since your card doesn’t use the const as the other weather card, I stopped and thought Id better ask you :wink:

this is how its done in the ‘regular’ adapted lovelace animated card…:

<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>Bft: ${windBft} - ${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>

showing:

56

if you don’t have a Bft sensor, here’s 2 versions to do so:

  windkracht:
    friendly_name: Windkracht
    value_template: >
      {% set wind = 3.6 * states('sensor.br_wind_speed')|float %}
      {% set wind_round = wind|round(1) %}
        {% if wind <= 1 %}Bft: 0, Wind stil, {{wind_round}} m/s
        {% elif wind <= 5 %}Bft: 1, Zwak: flauwe wind, {{wind_round}} m/s
        {% elif wind <= 11 %}Bft: 2, Zwak, {{wind_round}} m/s
        {% elif wind <= 20 %}Bft: 3, Matig: lichte bries, {{wind_round}} m/s
        {% elif wind <= 28 %}Bft: 4, Matig: flauwe bries, {{wind_round}} m/s
        {% elif wind <= 39 %}Bft: 5, Vrij krachtig, {{wind_round}} m/s
        {% elif wind <= 50 %}Bft: 6, Krachtig, {{wind_round}} m/s
        {% elif wind <= 62 %}Bft: 7, Hard, {{wind_round}} m/s
        {% elif wind <= 75 %}Bft: 8, Stormachting, {{wind_round}} m/s
        {% elif wind <= 89 %}Bft: 9, Storm, {{wind_round}} m/s
        {% elif wind <= 103 %}Bft: 10, Zware storm, {{wind_round}} m/s
        {% elif wind <= 117 %}Bft: 11, Zeer zware storm, {{wind_round}} m/s
        {% else %} > 117 %}Bft: 12, Orkaan, {{wind_round}} m/s
      {%- endif %}

and

  wind_bft:
    friendly_name_template: >
      Bft: {{states('sensor.wind_bft')}}
    value_template: >
      {% set wind = 3.6 * states('sensor.br_wind_speed')|float %}
        {% if wind <= 1 %}0
        {% elif wind <= 5 %}1
        {% elif wind <= 11 %}2
        {% elif wind <= 20 %}3
        {% elif wind <= 28 %}4
        {% elif wind <= 39 %}5
        {% elif wind <= 50 %}6
        {% elif wind <= 62 %}7
        {% elif wind <= 75 %}8
        {% elif wind <= 89 %}9
        {% elif wind <= 103 %}10
        {% elif wind <= 117 %}11
        {% else %} > 117 %}12
      {%- endif %}
    entity_picture_template: >
      {% set state = states('sensor.wind_bft') %}
      {% set path = '/local/weather/beaufort/' %}
      {% set ext = '.jpg'%}
        {{[path,state,ext]|join('')|lower}}

EDIT

this is a temporary fix…:

var windBearing = this.config.entity_wind_bearing && this.config.entity_wind_speed ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>Bft: ${this.hass.states[this.config.entity_wind_force].state} - ${this.current.windBearing} ${this.current.windSpeed}<span class="unit"> ${this.getUOM('length')}/h</span></li>` : ``;

01

New version available Here

  • Added “Today’s High” text to current day high temp. A couple of folks suggested this. You need to provide a value for entity_current_text. It is an optional parameter so if you don’t add it to your configuration it won’t show. See the note below.
  • Added Beaufort scale to Wind. Set show_beaufort flag to true to enable. (Suggested by @Mariusthvdb )
  • Added current condition text to current condition icon. Set entity_current_text to a sensor or template entity to enable. (Suggested by @Mariusthvdb )
  • Corrected ‘it’ localization of “feels like”. Changed to “Percepito”. (Suggested by @itajackass)
  • Corrected ‘de’ localization of “feels like”. Changed to “Gefühlt”. (Suggested by @VDRainer)
  • Added top margin to current conditions icon. (Suggested by @Marco_Lupieri)

image

Note: The sensor used to provide the value for the current conditions text could be set up as a template sensor. This way you can provide localization for the possible values. An example of how to set up this template is below.

      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
                         {% endif %}'
2 Likes

Fixed in latest version

Wow, jouwe been busy, thanks for that!

this would be easier like:

dark_sky_current_text:
        value_template: {{states('sensor.dark_sky_icon')|replace('-',' ')|capitalize}}

or

dark_sky_current_text:
        value_template: {{states('sensor.dark_sky_icon')|replace('-',' ')|title}}

depending on your preference for
Partly Cloudy Night

or

Partly cloudy night
in english of course.

might I suggest a mapper for any translation, makes the template so much easier:

      {% set mapper = 
        { 'Breezy': 'cloudy',
          'Clear Night': 'night',
          'Clear': 'day',
          'Mostly Clear': 'day',
          'Clear Day': 'day', 
          'Cloudy': 'cloudy',
          'Fog': 'cloudy',
          'Hail': 'rainy-7',
          'Lightning': 'thunder',
          'Mostly Cloudy': 'cloudy',
          'Partly Cloudy': 'cloudy-day-3',
          'Partly Cloudy Night': 'cloudy-night-3',
          'Rain': 'rainy-4',
          'Scattered Showers': 'rainy-3',
          'Showers': 'rainy-6',
          'Snow': 'snowy-6',
          'Mostly Sunny': 'day',
          'Sunny': 'day',
          'Windy': 'cloudy'} %}
      {% set state = states('sensor.dark_sky_icon')|title|replace('-',' ') %}
      {% set weather = mapper[state] if state in mapper else 'weather' %}
      {% set path = '/local/weather/animated/' %}
      {% set ext = '.svg'%}
        {{[path,weather,ext]|join('')|lower}}

something like this:

        value_template: >
          {% set mapper = 
            {'clear-night': 'Clear',
             'clear-day': Clear,
             'clear-night':'Clear',
             'rain':'Rain',
             'snow':'Snowy',
             'fog': 'Foggy',
             'sleet': 'Sleet',
             'wind':'Windy',
             'cloudy':'Cloudy',
             'partly-cloudy-day':'Partly Cloudy',
             'partly-cloudy-night':'Partly Cloudy',
             'hail':'Hailing',
             'lightning':'Lightning',
             'thunderstorm':'Thunderstorm'} %}
          {% set state = states('sensor.dark_sky_icon') %}
          {% set weather = mapper[state] if state in mapper else 'weather' %}
            {{weather}}

we should also take care of the ‘else’, i my example here, i’ve named it weather which is useless in this case, but maybe some generic weather condition could be set. Or, if one is certain of the total possible weather conditions, the trick is to leave out only one, and set that as else condition:

    value_template: >
      {% set mapper = 
        {'clear-night': 'Clear',
         'clear-day': Clear,
         'clear-night':'Clear',
         'rain':'Rain',
         'snow':'Snowy',
         'fog': 'Foggy',
         'sleet': 'Sleet',
         'wind':'Windy',
         'cloudy':'Cloudy',
         'partly-cloudy-day':'Partly Cloudy',
         'partly-cloudy-night':'Partly Cloudy',
         'hail':'Hailing',
         'lightning':'Lightning' } %}
      {% set state = states('sensor.dark_sky_icon') %}
      {% set weather = mapper[state] if state in mapper else 'Thunderstorm' %}
        {{weather}}

would you show me how to get my own Bft sensor in here? I have no need for the full template in this card, since I already have an external sensor doing the math or me:

const windBft = hass.states[this.config.entity_wind_force].state;

could I simply state:

get beaufortWind() { hass.states[this.config.entity_wind_force].state} and leave the rest of the card as it is?

Mine just did this:
image
Latest was working great inc current conditions… just now boom??

Well see here…


The fix there fixed it

I have just updated the darksky.js file to the latest as posted above, included the fix as per your link and done a hard-refresh using F12 etc… I get the below error yet card-tools IS on my system, hence the card DID work at one point yesterday. I dont know what else to try now

image

image

Any suggestions?

EDIT: I also get the below in the error log which I guess is relating to the wind direction. I’ll try and fix that in a minute and see if it clears that error.

https://xxxx:8123/local/custom_ui/dark-sky-weather-card.js?v=7.1:229:117 Uncaught TypeError: Cannot read property ‘state’ of undefined

The above error only shows up once whereas the below keeps spamming the log.

https://unpkg.com/@polymer/[email protected]/lib/utils/async.js?module:44:11 Uncaught TypeError: Cannot read property ‘state’ of undefined

…and now I dont even get the card at all (so it was lucky I managed to get that first screen capture)

I had to delete cookies and auth again…

Just noticed, you seem to be using a different card here. (I don’t have a css file for a start. Your error also points to card-tools

yeah, that css was from the original dark-sky card I think. I could probably delete it since this card doesnt reference it. As i mentioned above though (and in the screen shot) i do have card-tools, I literally put it on my system yesterday… its got me fü©…

well it’s an error with card-tools … I have card-tools as well no error… The red error you’re displaying is for card-tools not darksky

got me back to here:

image

and these in the log:

Have you tried not wrapping it in card-modder?

Here is my config for the stack I have dark-sky in:

      - type: vertical-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_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_forecast_icon_1: sensor.dark_sky_icon_1
            entity_forecast_icon_2: sensor.dark_sky_icon_2

etc…

I’ll give it a try, however I just noticed this on another thread which could be causing the issue

"Unpkg seem to have problems at the moment"

ok that is the identical issue from github I referenced above. Yes that is the error and it seems common to a few plugins. (First post he mentions the mini media card)

yeah, its from the mini_media_player card but I figured that if that website is having troubles, perhaps its why I’m getting those errors since the errors reference that site. Just about to try removing the card-modder from my code and test again

I removed the card-modder code from my lovelace entry or this card and still get the same error spamming the log:

https://unpkg.com/@polymer/[email protected]/lib/utils/async.js?module:44:11 Uncaught TypeError: Cannot read property ‘state’ of undefined

I had to delete all content on my iPad, log out etc delete cookies… it’s a PITA error of a small screen!

Delete all data, delete cookies and try again. Bloody frustrating.

I did that. Full delete of ALL data ‘time range - all time’ in Chrome. Still not happy. I don’t get the card at all (no red screen), just the log error