Custom Dark Sky Animated Weather Card

I had the background working before. Its coded like this:

title: Weather
id: 6
icon: 'mdi:weather-partlycloudy'
background: center / cover no-repeat url("/local/images/elizabeth_quay_perth.jpg") fixed

…which sits with the rest of the code posted above.

I basically just kept what is used by this card and left the rest out.

I do have a sensor which gives the direction as a N, S, E, W etc. already (part of the BOM stuff) but does the card do the conversion from an angle itself? I have linked the card the the existing sensor with the N, S, E, W etc.

I do have the sun: component active

Yes, you need to give it a value between 0-360. I don’t know why this is the case, but it’s how it done.

I didnt realise that I wasn’t using the latest version. Updated and now I get this:

image

yet I put card-tools on the system this morning and have restarted HA a few times since

then after some more mucking around with indentation and restarts… the whole card has gone and I get this error in the log:

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

…which spams the log over and over as long as I am looking at the weather page

Pls use the RAW source and clear the browser cache plus increase the v value in the ui_lovelace. yaml.

I did use the RAW code and the v=number is as per the instructions on the Git page… being the latest version number. Using Chrome I cleared the cache with Control+F5

Try F12 for dev console and right click on refresh button and select Hard Reload and Delete Cache… Lovelace can be a bugger with this…

It’s possible to move the icon of today weather condition a little bit down. Now is on top with no margin

That was easy :wink: :

22

add:

  get maxTodayText() {
    const maxToday_en = "Max today:";
    const maxToday_fr = "Max aujourd'hui:";
    const maxToday_it = "Max oggi:";
    const maxToday_de = "Max heute:";
    const maxToday_nl = "Max vandaag:";


    switch (this.config.locale) {
      case "it" :
        return maxToday_it;
      case "fr" :
        return maxToday_fr;
      case "de" :
        return maxToday_de;
      case "nl" :
        return maxToday_nl;
      default :
        return maxToday_en;
    }
  }

and change line 23 to

var daytimeHigh = this.config.entity_daytime_high ? html`<li><span class="ha-icon"><ha-icon icon="mdi:thermometer"></ha-icon></span>${this.maxTodayText} ${Math.round(this.hass.states[this.config.entity_daytime_high].state)}<span> ${this.getUOM('temperature')}</span></li>` : ``;

btw @m.p.frankland : noticed a very tiny typo in

switch (this.config.locale) {
  case "it" :
    return feelslike_it; 

should be:

switch (this.config.locale) {
  case "it" :
    return feelsLike_it;

I will change it … “Si sente come” is google translate’s literal translation of feels like.

I will add this . Need translations for "Today’s High:’ in fr, it, nl, de. It will default to english.

check 2 posts up :wink:

I can add this. It would be easier to add below the Icon (similar line level to where the feels like text goes. It will keep the card balanced.) This will suffer from locale issues as well. The dark sky platform always uses english for the icon names. To implement it I will add another entity_ parameter. I would suggest using a template sensor to convert the names into whatever locale you like and remove the embedded -'s before passing the value to the card.

This is done like this because that is the way Dark sky reports wind direction.

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?