Custom animated weather card for Lovelace

Tagged for later. Couldn’t get passed the “element doesn’t exist” problem but am still interested in using this once it matures.

Is there a way to rename the short day names? I want to translate them. I’ve already figured out how to use long translated names for NNE, WSW etc, and I also replaced wind speed numbers with descriptive names that I made using a template sensor. Sharing if anyone is caring:

vindhastighet_tekst:
  friendly_name: 'Vindhastighet'
  icon_template: mdi:weather-windy
  value_template: >
    {% set vind = states.weather.metno.attributes["wind_speed"] %}
      {% if   vind|float <=   0.72 %}Stille, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=   5.40 %}Flau vind, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  11.88 %}Svak vind, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  19.44 %}Lett bris, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  28.44 %}Laber bris, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  38.52 %}Frisk bris, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  49.68 %}Liten kuling, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  61.56 %}Stiv kuling, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  74.52 %}Sterk kuling, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <=  87.84 %}Liten storm, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <= 102.24 %}Full storm, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float <= 117.36 %}Sterk storm, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
      {% elif vind|float >  117.36 %}Orkan, {{(states.weather.metno.attributes["wind_speed"]|float/3.6)|round(1)}} m/s
    {%- endif %}

you could use a mapper like this:

  weather_rsd_icon:
    friendly_name: Weather in Rsd
    value_template: >
      {{states('sensor.yweather_current')}}
    entity_picture_template: >
      {% 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',
          'Rain': 'rainy-4',
          'Scattered Showers': 'rainy-3',
          'Showers': 'rainy-6',
          'Snow': 'snowy-6',
          'Mostly Sunny': 'day',
          'Sunny': 'day',
          'Windy': 'cloudy'} %}
      {% set state = states('sensor.yweather_current') %}
      {% set weather = mapper[state] if state in mapper else 'weather' %}
      {% set path = '/local/weather/animated/' %}
      {% set ext = '.svg'%}
        {{[path,weather,ext]|join('')|lower}}

never mind the final template, my suggestion would be to replace the if,elif else with a mapper.

the sensor you posted could at least be shortened:

{% set vind = states.sensor.owm_wind_speed.state %}
  {% if vind|float <=   0.72 %}Stille, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=   5.40 %}Flau vind, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  11.88 %}Svak vind, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  19.44 %}Lett bris, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  28.44 %}Laber bris, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  38.52 %}Frisk bris, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  49.68 %}Liten kuling, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  61.56 %}Stiv kuling, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  74.52 %}Sterk kuling, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  87.84 %}Liten storm, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <= 102.24 %}Full storm, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <= 117.36 %}Sterk storm, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float >  117.36 %}Orkan, {{vind|float/3.6|round(1)}} m/s
  {% endif %}

you’d need an else to safeguard unknown outcome, and use the final line for that

{% set vind = states.sensor.owm_wind_speed.state %}
  {% if vind|float <=   0.72 %}Stille, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=   5.40 %}Flau vind, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  11.88 %}Svak vind, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  19.44 %}Lett bris, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  28.44 %}Laber bris, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  38.52 %}Frisk bris, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  49.68 %}Liten kuling, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  61.56 %}Stiv kuling, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  74.52 %}Sterk kuling, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <=  87.84 %}Liten storm, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <= 102.24 %}Full storm, {{vind|float/3.6|round(1)}} m/s
  {% elif vind|float <= 117.36 %}Sterk storm, {{vind|float/3.6|round(1)}} m/s
  {% else % }Orkan, {{vind|float/3.6|round(1)}} m/s
  {% endif %}

shorter:

{% set vind = states.sensor.owm_wind_speed.state|float %}
{% set vind_type = (vind/3.6)|round(1) %}
  {% if vind <=   0.72 %}Stille, {{vind_type}} m/s
  {% elif vind <=   5.40 %}Flau vind, {{vind_type}} m/s
  {% elif vind <=  11.88 %}Svak vind, {{vind_type}} m/s
  {% elif vind <=  19.44 %}Lett bris, {{vind_type}} m/s
  {% elif vind <=  28.44 %}Laber bris, {{vind_type}} m/s
  {% elif vind <=  38.52 %}Frisk bris, {{vind_type}} m/s
  {% elif vind <=  49.68 %}Liten kuling, {{vind_type}} m/s
  {% elif vind <=  61.56 %}Stiv kuling, {{vind_type}} m/s
  {% elif vind <=  74.52 %}Sterk kuling, {{vind_type}} m/s
  {% elif vind <=  87.84 %}Liten storm, {{vind_type}} m/s
  {% elif vind <= 102.24 %}Full storm, {{vind_type}} m/s
  {% elif vind <= 117.36 %}Sterk storm, {{vind_type}} m/s
  {% else  %} Orkan, {{vind_type}} m/s
{%- endif %}
1 Like

Thanks, I really like that, templating is still very new to me. However, I think you misunderstood what I was asking, or I wasn’t clear enough. What I want is:

MON -> MAN
TUE - > TIR
WED -> ONS
THU -> TOR
FRI -> FRE
SAT -> LØR
SUN -> SØN

sure, yo do that with a mapper:

         {% set mapper = 
            { 'Mon': 'MAN',
              'TUE': 'TIR',
              'Clear': 'day',
              'WED': 'ONS',
              'THU': 'TOR', 
              'FRI': 'FRE',
              'SAT': 'LØR',
              'SUN': 'SØN'} %}
          {% set state = 'Mon' %}
          {% set Day = mapper[state] if state in mapper else state %}

            {{Day}}

just replace my set state = ‘Mon’ with the sensor you use for the day state (and check if the else is useful here.

like this:

{% set state = states('sensor.yweather_current') %}

you could leave out the ‘SUN’:‘SØN’ and use
else 'SØN '

@hulkhaugen

(forgive this threadcrashing, i’ll stop now)

just for the fun of it I made some sensors for wind:

54
02

  windkracht:
    friendly_name: Windkracht
    value_template: >
      {% set wind = states('sensor.owm_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 %}

  wind_bft:
    friendly_name_template: >
      Bft: {{states('sensor.wind_bft')}}
    value_template: >
      {% set wind = states('sensor.owm_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}}

little customization according to:

iu-2

sensor.windkracht:
  icon: mdi:weather-windy
  templates:
    icon_color: >
      if (entities['sensor.wind_bft'].state === '0') return 'rgb(239,213,194)';
      if (entities['sensor.wind_bft'].state === '1') return 'rgb(204,163,154)';
      if (entities['sensor.wind_bft'].state === '2') return 'rgb(0,195,255)';
      if (entities['sensor.wind_bft'].state === '3') return 'rgb(47,23,231)';
      if (entities['sensor.wind_bft'].state === '4') return 'rgb(77,255,90)';
      if (entities['sensor.wind_bft'].state === '5') return 'rgb(0,207,36)';
      if (entities['sensor.wind_bft'].state === '6') return 'rgb(245,255,0)';
      if (entities['sensor.wind_bft'].state === '7') return 'rgb(255,186,0)';
      if (entities['sensor.wind_bft'].state === '8') return 'rgb(255,78,98)';
      if (entities['sensor.wind_bft'].state === '9') return 'rgb(255,0,0)';
      if (entities['sensor.wind_bft'].state === '10') return 'rgb(140,60,0)';
      if (entities['sensor.wind_bft'].state === '11') return 'rgb(126, 0, 0)';
      return 'rgb(0,0,0)';

waiting for mdi icons to become available… :wink:
# if (entities[‘sensor.wind_bft’].state === ‘0’) return ‘mdi:weather-windy’;
# if (entities[‘sensor.wind_bft’].state === ‘1’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘2’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘3’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘4’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘5’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘6’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘7’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘8’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘9’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘10’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘11’) return ‘’;
# if (entities[‘sensor.wind_bft’].state === ‘12’) return ‘’;

and images made out of:

feel free:

0 1 2 3 4 5 6 7 8 9 10 11 12

4 Likes

Hey lately I’ve been having trouble with my custom animated weather card not loading the icons/format on mobile (chrome). It works fine on desktop and I’ve cleared my cache in the app, but it just looks all jumbled. The data is there, just all over the place. I can upload a photo if need be

I’ve just updated to 83.2 via hassio and I’m now seeing this error:
Uncaught TypeError: Cannot read property 'state' of undefined.

Anyone else?

Forget that, it appears that yweather is no longer working for me.

tryin the Lovelace card with open weather map returns nothing…

isnt this a supported weather platform for the card?
error in log:

local/lovelace/weather-card.js?v=0.0.1:17:42 TypeError: undefined is not an object (evaluating 'hass.config.core.unit_system')

my config:

cards:
  - type: 'custom:weather-card'
    entity_weather: weather.home_owm
    entity_sun: sun.sun

and

  - url: /local/lovelace/weather-card.js?v=0.0.1
    type: js

and yes, Ive adapted the paths’ both in the custom card, and the location of my images .to the same locations for the custom-card in legacy HA where they show fine, so I know the weather platform and sun are working as they should, and the icons do too

Hi,
where can I see how do you use sun.sun entity to get sunset and sunrise values? Thanks.

It’s a standard component sun. Just add sun: to your config file. Currently I use it only for animated weather card.

Hi, i’ve tried your code but nothing appened. I’d like to convert MON -> LUN, TUE -> MAR, WED -> MER, …
But i’m not sure where put the code.
I’m using code provided for animated lovelace DARKSKY icons with dark-sky-wheater-card.js

I tried it in customize.yaml:

sensor.dark_sky_daily_summary:
  value_template: >
    {% set mapper = 
      { 'Mon'; 'Lun'} %}
    {% set state = 'Mon' %}
    {% set Day = mapper[state] if state in mapper else state %}
      {{Day}}

Use a : not a ;

you know you should also change the line

{% set state = 'Mon' %} to  line using the sensor you use for the days?

{% set state = states('sensor.dark_sky_daily_summary') %}  ?

the line with Mon only was just a test to see if the template works correctly…

btw, if you want to change the display of a sensor, you have to use customize and template the _stateDisplay, that uses javascript, and not Jinja. see https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/templates.md#special-attributes
this wont work with the above template mapper.

You can create a template sensor with this mapper. But you need to give it another name, because it cant change the state display of its own state…

Ops, i’ve not seen ; error. Btw i’ve corrected the code, now in my customize.yaml i’ve:

sensor.dark_sky_daily_summary:
  value_template: >
    {% set mapper = 
      { 'Mon': 'Lun'} %}
    {% set state = states('sensor.dark_sky_daily_summary') %}
    {% set Day = mapper[state] if state in mapper else state %}
      {{Day}}

But still no changes.
In the dark-sky-wheater-card.js this is the part where short day name will show:

  ...
  <div class="forecast clear">
      ${forecast.map(daily => `
          <div class="day">
              <span class="dayname">${(daily.date).toString().split(' ')[0]}</span>
              ...

please see what I wrote above.

youre trying to change the state of the sensor itself. And you only use Mon…but it should give the state as declared in the else…

try this:

sensor.dark_sky_daily_summary_template:
  value_template: >
    {% set mapper = 
      { 'Mon': 'Lun'} %}
    {% set state = states('sensor.dark_sky_daily_summary') %}
    {% set Day = mapper[state] if state in mapper else state %}
      {{Day}}

this wil work for it isn’t monday today (Mon), so it will evaluate the else, and say Sun, or whatever your sensor says for sunday … :wink:

see:

Hi, yes i’ve seen your reply above, my actual code (with all days) now is:

sensor.dark_sky_daily_summary_template:
  value_template: >
    {% set mapper = 
      { 'Mon': 'Lun',
        'Tue': 'Mar',
        'Wed': 'Mer',
        'Thu': 'Gio', 
        'Fri': 'Ven',
        'Sat': 'Sab',
        'Sun': 'Dom'} %}
    {% set state = states('sensor.dark_sky_daily_summary') %}
    {% set Day = mapper[state] if state in mapper else state %}
      {{Day}}

But name still not change. I’ve read your reply about _stateDisplay but i’m new on lovelace and i don’t know how to use and where to use it.
At this point i’m not sure i set the correct sensor … ?

Senza-titolo-1

code seems correct. why does states(‘sensor.dark_sky_daily_summary’) give you in the dev-state?

sensor.translated_weekday:
  value_template: >
    {% set mapper = 
      { 'Mon': 'Lun',
        'Tue': 'Mar',
        'Wed': 'Mer',
        'Thu': 'Gio', 
        'Fri': 'Ven',
        'Sat': 'Sab',
        'Sun': 'Dom'} %}
    {% set state = now().strftime('%a') %}
    {% set Day = mapper[state] if state in mapper else state %}
      {{Day}}

Mh i thinks it is not the correct sensor. It returns: “Nessuna precipitazione durante la settimana, con temperature in aumento fino a 14°C Sabato.”

Btw in the .js code i’ll see:

 var forecastDate1 = new Date();
    forecastDate1.setDate(forecastDate1.getDate()+1);
    var forecastDate2 = new Date();
    forecastDate2.setDate(forecastDate2.getDate()+2);
    ...

then

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 forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];
    ...

then

${forecast.map(daily => `
              <div class="day">
                  <span class="dayname">${(daily.date).toString().split(' ')[0]}</span>

So, maybe the code is only based on javascript? i need to install a locale lang js maybe?

correct, this is not the correct sensor :wink:

try my code and your set to go. only add the entity_id to have HA update correctly (now() doesnt trigger the template so you need an entity_id to change and have it set the template). You need to have the sensor.date in your setup for this of course, but you probably will already.

As you can see I made a dutch variant :wink:

  - platform: template
    sensors:
      translated_weekday:
        friendly_name: Dag
        entity_id: sensor.date
        value_template: >
          {% set mapper = 
            { 'Mon': 'Maandag',
              'Tue': 'Dinsdag',
              'Wed': 'Woensdag',
              'Thu': 'Donderdag', 
              'Fri': 'Vrijdag',
              'Sat': 'Zaterdag',
              'Sun': 'Zondag'} %}
          {% set state = now().strftime('%a') %}
          {% set Dag = mapper[state] if state in mapper else state %}
            {{Dag}}

16