Weather Card | Old + New = Better?

Spent, arguably, too much time today fiddling w/ updating/re-creating my weather card. Wasn’t happy with the new update and how different screen widths showed either 3 or 5 days, lost the rain amt, wind direction etc. Anyhow, hacked this together with the help of a bunch of new sensors and some custom-cards (primarily stack-in and card-mod):

image
Still, like anything, a work in progress. Not thrilled w/ the wind speed / direction and such for the forecast and would love to find a way to ‘hide’ the rain amt and wind rows and click to display if/when I want to see them. Anyhow, figured I’d throw it out there and get anyone else’s opinion and see where I could improve.

5 Likes

v2:
image
Reduced the height by combining some sensor values.

7 Likes

:+1:
Going similar route - started with combining of WeatherBit (fore3cast) and Netatmo (current conditions) into something new, using only standard HA elements:

image

5 Likes

v3:
image
Added a break under today’s forecast and changed the coloring of temp/rain for future days. Think I’m done for a bit. :joy:

3 Likes

Looking good @Markus99 and @mirekmal. Would you mind posting or linking your configs?

Sure thing. Definitely a TON of extra sensors and some to format/combine and such. I’m still fiddling w/ it - so could certainly reduce a bunch of these, put in a package, etc. - just haven’t done it. Crazy that the ‘old’ card is 95% the same as this one and how many sensors and such it took to rebuild what was already existing up until a few versions ago…

configuration.yaml

weather:
  - platform: darksky
    api_key: !secret darksky_api
    mode: daily

sensor: !include sensors.yaml

sensor.yaml

- platform: template
  sensors:
    date_1d:
      value_template: "{{ (as_timestamp(strptime(states('sensor.date_time'),'%Y-%m-%d, %H:%M')) + (1*86400)) | timestamp_custom('%a') }}"
      icon_template: >
        {% set farray = { 'clear-day':'mdi:weather-sunny',
                          'clear-night':'mdi:weather-night',
                          'partly-cloudy-day':'mdi:weather-partly-cloudy',
                          'partly-cloudy-night':'mdi:weather-night-partly-cloudy',
                          'cloudy':'mdi:weather-cloudy',
                          'wind':'mdi:weather-windy',
                          'fog':'mdi:weather-fog',
                          'rain':'mdi:weather-rainy',
                          'snow':'mdi:weather-snowy',
                          'sleet':'mdi:weather-snowy-rainy'} %}
        {{ farray[states('sensor.darksky_weather_icon_1d')] }}
    date_2d:
      value_template: "{{ (as_timestamp(strptime(states('sensor.date_time'),'%Y-%m-%d, %H:%M')) + (2*86400)) | timestamp_custom('%a') }}"
      icon_template: >
        {% set farray = { 'clear-day':'mdi:weather-sunny',
                          'clear-night':'mdi:weather-night',
                          'partly-cloudy-day':'mdi:weather-partly-cloudy',
                          'partly-cloudy-night':'mdi:weather-night-partly-cloudy',
                          'cloudy':'mdi:weather-cloudy',
                          'wind':'mdi:weather-windy',
                          'fog':'mdi:weather-fog',
                          'rain':'mdi:weather-rainy',
                          'snow':'mdi:weather-snowy',
                          'sleet':'mdi:weather-snowy-rainy'} %}
        {{ farray[states('sensor.darksky_weather_icon_2d')] }}
    date_3d:
      value_template: "{{ (as_timestamp(strptime(states('sensor.date_time'),'%Y-%m-%d, %H:%M')) + (3*86400)) | timestamp_custom('%a') }}"
      icon_template: >
        {% set farray = { 'clear-day':'mdi:weather-sunny',
                          'clear-night':'mdi:weather-night',
                          'partly-cloudy-day':'mdi:weather-partly-cloudy',
                          'partly-cloudy-night':'mdi:weather-night-partly-cloudy',
                          'cloudy':'mdi:weather-cloudy',
                          'wind':'mdi:weather-windy',
                          'fog':'mdi:weather-fog',
                          'rain':'mdi:weather-rainy',
                          'snow':'mdi:weather-snowy',
                          'sleet':'mdi:weather-snowy-rainy'} %}
        {{ farray[states('sensor.darksky_weather_icon_3d')] }}
    date_4d:
      value_template: "{{ (as_timestamp(strptime(states('sensor.date_time'),'%Y-%m-%d, %H:%M')) + (4*86400)) | timestamp_custom('%a') }}"
      icon_template: >
        {% set farray = { 'clear-day':'mdi:weather-sunny',
                          'clear-night':'mdi:weather-night',
                          'partly-cloudy-day':'mdi:weather-partly-cloudy',
                          'partly-cloudy-night':'mdi:weather-night-partly-cloudy',
                          'cloudy':'mdi:weather-cloudy',
                          'wind':'mdi:weather-windy',
                          'fog':'mdi:weather-fog',
                          'rain':'mdi:weather-rainy',
                          'snow':'mdi:weather-snowy',
                          'sleet':'mdi:weather-snowy-rainy'} %}
        {{ farray[states('sensor.darksky_weather_icon_4d')] }}
    date_5d:
      value_template: "{{ (as_timestamp(strptime(states('sensor.date_time'),'%Y-%m-%d, %H:%M')) + (5*86400)) | timestamp_custom('%a') }}"
      icon_template: >
        {% set farray = { 'clear-day':'mdi:weather-sunny',
                          'clear-night':'mdi:weather-night',
                          'partly-cloudy-day':'mdi:weather-partly-cloudy',
                          'partly-cloudy-night':'mdi:weather-night-partly-cloudy',
                          'cloudy':'mdi:weather-cloudy',
                          'wind':'mdi:weather-windy',
                          'fog':'mdi:weather-fog',
                          'rain':'mdi:weather-rainy',
                          'snow':'mdi:weather-snowy',
                          'sleet':'mdi:weather-snowy-rainy'} %}
        {{ farray[states('sensor.darksky_weather_icon_5d')] }}
    date_6d:
      value_template: "{{ (as_timestamp(strptime(states('sensor.date_time'),'%Y-%m-%d, %H:%M')) + (6*86400)) | timestamp_custom('%a') }}"
      icon_template: >
        {% set farray = { 'clear-day':'mdi:weather-sunny',
                          'clear-night':'mdi:weather-night',
                          'partly-cloudy-day':'mdi:weather-partly-cloudy',
                          'partly-cloudy-night':'mdi:weather-night-partly-cloudy',
                          'cloudy':'mdi:weather-cloudy',
                          'wind':'mdi:weather-windy',
                          'fog':'mdi:weather-fog',
                          'rain':'mdi:weather-rainy',
                          'snow':'mdi:weather-snowy',
                          'sleet':'mdi:weather-snowy-rainy'} %}
        {{ farray[states('sensor.darksky_weather_icon_6d')] }}
    date_7d:
      value_template: "{{ (as_timestamp(strptime(states('sensor.date_time'),'%Y-%m-%d, %H:%M')) + (7*86400)) | timestamp_custom('%a') }}"
      icon_template: >
        {% set farray = { 'clear-day':'mdi:weather-sunny',
                          'clear-night':'mdi:weather-night',
                          'partly-cloudy-day':'mdi:weather-partly-cloudy',
                          'partly-cloudy-night':'mdi:weather-night-partly-cloudy',
                          'cloudy':'mdi:weather-cloudy',
                          'wind':'mdi:weather-windy',
                          'fog':'mdi:weather-fog',
                          'rain':'mdi:weather-rainy',
                          'snow':'mdi:weather-snowy',
                          'sleet':'mdi:weather-snowy-rainy'} %}
        {{ farray[states('sensor.darksky_weather_icon_7d')] }}

    weather_high_temp_1d:
      value_template: "{{ states('sensor.darksky_weather_daytime_high_temperature_1d') | round(0) }}"
    weather_high_temp_2d:
      value_template: "{{ states('sensor.darksky_weather_daytime_high_temperature_2d') | round(0) }}"
    weather_high_temp_3d:
      value_template: "{{ states('sensor.darksky_weather_daytime_high_temperature_3d') | round(0) }}"
    weather_high_temp_4d:
      value_template: "{{ states('sensor.darksky_weather_daytime_high_temperature_4d') | round(0) }}"
    weather_high_temp_5d:
      value_template: "{{ states('sensor.darksky_weather_daytime_high_temperature_5d') | round(0) }}"
      
    weather_low_temp_1d:
      value_template: "{{ states('sensor.darksky_weather_overnight_low_temperature_1d') | round(0) }}"
    weather_low_temp_2d:
      value_template: "{{ states('sensor.darksky_weather_overnight_low_temperature_2d') | round(0) }}"
    weather_low_temp_3d:
      value_template: "{{ states('sensor.darksky_weather_overnight_low_temperature_3d') | round(0) }}"
    weather_low_temp_4d:
      value_template: "{{ states('sensor.darksky_weather_overnight_low_temperature_4d') | round(0) }}"
    weather_low_temp_5d:
      value_template: "{{ states('sensor.darksky_weather_overnight_low_temperature_5d') | round(0) }}"

    weather_both_temp_1d:
      value_template: "{{ states('sensor.weather_high_temp_1d') }}{{'/'}}{{ states('sensor.weather_low_temp_1d') }}"
    weather_both_temp_2d:
      value_template: "{{ states('sensor.weather_high_temp_2d') }}{{'/'}}{{ states('sensor.weather_low_temp_2d') }}"
    weather_both_temp_3d:
      value_template: "{{ states('sensor.weather_high_temp_3d') }}{{'/'}}{{ states('sensor.weather_low_temp_3d') }}"
    weather_both_temp_4d:
      value_template: "{{ states('sensor.weather_high_temp_4d') }}{{'/'}}{{ states('sensor.weather_low_temp_4d') }}"
    weather_both_temp_5d:
      value_template: "{{ states('sensor.weather_high_temp_5d') }}{{'/'}}{{ states('sensor.weather_low_temp_5d') }}"

    weather_wind_0d:
      value_template: "{{ states('sensor.darksky_weather_wind_speed_0d') | float | round(1) }}"
      unit_of_measurement: 'mph'
    weather_wind_1d:
      value_template: "{{ states('sensor.darksky_weather_wind_speed_1d') | float | round(1) }}"
    weather_wind_2d:
      value_template: "{{ states('sensor.darksky_weather_wind_speed_2d') | float | round(1) }}"
    weather_wind_3d:
      value_template: "{{ states('sensor.darksky_weather_wind_speed_3d') | float | round(1) }}"
    weather_wind_4d:
      value_template: "{{ states('sensor.darksky_weather_wind_speed_4d') | float | round(1) }}"
    weather_wind_5d:
      value_template: "{{ states('sensor.darksky_weather_wind_speed_5d') | float | round(1) }}"

    weather_wind_dir_0d:
      value_template: >
        {% set dir = states('sensor.darksky_weather_wind_bearing')|float %}
        {% if 11.25 < dir <= 33.75 %} NNE
        {% elif 33.75 < dir <= 56.25 %} NE
        {% elif 56.25 < dir <= 78.75 %} ENE
        {% elif 78.75 < dir <= 101.25 %} E
        {% elif 101.25 < dir <= 123.75 %} ESE
        {% elif 123.75 < dir <= 146.25 %} SE
        {% elif 146.25 < dir <= 168.75 %} SSE
        {% elif 168.75 < dir <= 191.25 %} S
        {% elif 191.25 < dir <= 213.75 %} SSW
        {% elif 213.75 < dir <= 236.25 %} SW
        {% elif 236.25 < dir <= 258.75 %} WSW
        {% elif 258.75 < dir <= 281.25 %} W
        {% elif 281.25 < dir <= 303.75 %} WNW
        {% elif 303.75 < dir <= 326.25 %} NW
        {% elif 326.25 < dir <= 348.75 %} NNW
        {% else %} N
        {% endif %}
    weather_wind_dir_1d:
      value_template: >
        {% set dir = states('sensor.darksky_weather_wind_bearing_1d')|float %}
        {% if 11.25 < dir <= 33.75 %} NNE
        {% elif 33.75 < dir <= 56.25 %} NE
        {% elif 56.25 < dir <= 78.75 %} ENE
        {% elif 78.75 < dir <= 101.25 %} E
        {% elif 101.25 < dir <= 123.75 %} ESE
        {% elif 123.75 < dir <= 146.25 %} SE
        {% elif 146.25 < dir <= 168.75 %} SSE
        {% elif 168.75 < dir <= 191.25 %} S
        {% elif 191.25 < dir <= 213.75 %} SSW
        {% elif 213.75 < dir <= 236.25 %} SW
        {% elif 236.25 < dir <= 258.75 %} WSW
        {% elif 258.75 < dir <= 281.25 %} W
        {% elif 281.25 < dir <= 303.75 %} WNW
        {% elif 303.75 < dir <= 326.25 %} NW
        {% elif 326.25 < dir <= 348.75 %} NNW
        {% else %} N
        {% endif %}
    weather_wind_dir_2d:
      value_template: >
        {% set dir = states('sensor.darksky_weather_wind_bearing_2d')|float %}
        {% if 11.25 < dir <= 33.75 %} NNE
        {% elif 33.75 < dir <= 56.25 %} NE
        {% elif 56.25 < dir <= 78.75 %} ENE
        {% elif 78.75 < dir <= 101.25 %} E
        {% elif 101.25 < dir <= 123.75 %} ESE
        {% elif 123.75 < dir <= 146.25 %} SE
        {% elif 146.25 < dir <= 168.75 %} SSE
        {% elif 168.75 < dir <= 191.25 %} S
        {% elif 191.25 < dir <= 213.75 %} SSW
        {% elif 213.75 < dir <= 236.25 %} SW
        {% elif 236.25 < dir <= 258.75 %} WSW
        {% elif 258.75 < dir <= 281.25 %} W
        {% elif 281.25 < dir <= 303.75 %} WNW
        {% elif 303.75 < dir <= 326.25 %} NW
        {% elif 326.25 < dir <= 348.75 %} NNW
        {% else %} N
        {% endif %}
    weather_wind_dir_3d:
      value_template: >
        {% set dir = states('sensor.darksky_weather_wind_bearing_3d')|float %}
        {% if 11.25 < dir <= 33.75 %} NNE
        {% elif 33.75 < dir <= 56.25 %} NE
        {% elif 56.25 < dir <= 78.75 %} ENE
        {% elif 78.75 < dir <= 101.25 %} E
        {% elif 101.25 < dir <= 123.75 %} ESE
        {% elif 123.75 < dir <= 146.25 %} SE
        {% elif 146.25 < dir <= 168.75 %} SSE
        {% elif 168.75 < dir <= 191.25 %} S
        {% elif 191.25 < dir <= 213.75 %} SSW
        {% elif 213.75 < dir <= 236.25 %} SW
        {% elif 236.25 < dir <= 258.75 %} WSW
        {% elif 258.75 < dir <= 281.25 %} W
        {% elif 281.25 < dir <= 303.75 %} WNW
        {% elif 303.75 < dir <= 326.25 %} NW
        {% elif 326.25 < dir <= 348.75 %} NNW
        {% else %} N
        {% endif %}
    weather_wind_dir_4d:
      value_template: >
        {% set dir = states('sensor.darksky_weather_wind_bearing_4d')|float %}
        {% if 11.25 < dir <= 33.75 %} NNE
        {% elif 33.75 < dir <= 56.25 %} NE
        {% elif 56.25 < dir <= 78.75 %} ENE
        {% elif 78.75 < dir <= 101.25 %} E
        {% elif 101.25 < dir <= 123.75 %} ESE
        {% elif 123.75 < dir <= 146.25 %} SE
        {% elif 146.25 < dir <= 168.75 %} SSE
        {% elif 168.75 < dir <= 191.25 %} S
        {% elif 191.25 < dir <= 213.75 %} SSW
        {% elif 213.75 < dir <= 236.25 %} SW
        {% elif 236.25 < dir <= 258.75 %} WSW
        {% elif 258.75 < dir <= 281.25 %} W
        {% elif 281.25 < dir <= 303.75 %} WNW
        {% elif 303.75 < dir <= 326.25 %} NW
        {% elif 326.25 < dir <= 348.75 %} NNW
        {% else %} N
        {% endif %}
    weather_wind_dir_5d:
      value_template: >
        {% set dir = states('sensor.darksky_weather_wind_bearing_5d')|float %}
        {% if 11.25 < dir <= 33.75 %} NNE
        {% elif 33.75 < dir <= 56.25 %} NE
        {% elif 56.25 < dir <= 78.75 %} ENE
        {% elif 78.75 < dir <= 101.25 %} E
        {% elif 101.25 < dir <= 123.75 %} ESE
        {% elif 123.75 < dir <= 146.25 %} SE
        {% elif 146.25 < dir <= 168.75 %} SSE
        {% elif 168.75 < dir <= 191.25 %} S
        {% elif 191.25 < dir <= 213.75 %} SSW
        {% elif 213.75 < dir <= 236.25 %} SW
        {% elif 236.25 < dir <= 258.75 %} WSW
        {% elif 258.75 < dir <= 281.25 %} W
        {% elif 281.25 < dir <= 303.75 %} WNW
        {% elif 303.75 < dir <= 326.25 %} NW
        {% elif 326.25 < dir <= 348.75 %} NNW
        {% else %} N
        {% endif %}

    weather_wind_both_0d:
      value_template: "{{ states('sensor.weather_wind_0d')|round(0) }}{{' '}}{{ states('sensor.weather_wind_dir_0d') }}"
    weather_wind_both_1d:
      value_template: "{{ states('sensor.weather_wind_1d')|round(0) }}{{' '}}{{ states('sensor.weather_wind_dir_1d') }}"
    weather_wind_both_2d:
      value_template: "{{ states('sensor.weather_wind_2d')|round(0) }}{{' '}}{{ states('sensor.weather_wind_dir_2d') }}"
    weather_wind_both_3d:
      value_template: "{{ states('sensor.weather_wind_3d')|round(0) }}{{' '}}{{ states('sensor.weather_wind_dir_3d') }}"
    weather_wind_both_4d:
      value_template: "{{ states('sensor.weather_wind_4d')|round(0) }}{{' '}}{{ states('sensor.weather_wind_dir_4d') }}"
    weather_wind_both_5d:
      value_template: "{{ states('sensor.weather_wind_5d')|round(0) }}{{' '}}{{ states('sensor.weather_wind_dir_5d') }}"

    darksky_precipiation_0d:
      friendly_name: Precipitation 0d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[0].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}
    darksky_precipiation_1d:
      friendly_name: Precipitation 1d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[1].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}
    darksky_precipiation_2d:
      friendly_name: Precipitation 2d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[2].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}
    darksky_precipiation_3d:
      friendly_name: Precipitation 3d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[3].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}
    darksky_precipiation_4d:
      friendly_name: Precipitation 4d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[4].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}
    darksky_precipiation_5d:
      friendly_name: Precipitation 5d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[5].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}
    darksky_precipiation_6d:
      friendly_name: Precipitation 6d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[6].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}
    darksky_precipiation_7d:
      friendly_name: Precipitation 7d
      value_template: >
        {% set rain = state_attr('weather.dark_sky','forecast')[7].precipitation %}
        {% if rain | float == 0 %}
          {{ '' }}
        {% elif (rain | float) >= 1 %}
          {{rain}}{{ '"' }}
        {% else %}
          {{ "." }}{{ ((rain * 10) | round(0)) }}{{ '"' }}
        {% endif %}

ui-lovelace.yaml

## Weather Forecast Card
- type: custom:stack-in-card
  mode: vertical
  cards:
  - type: weather-forecast
    entity: weather.dark_sky
    name: "Colleyville, TX"
    show_forecast: false
    style: |
      .header {
        padding-top: 12px !important;
      }
      .content {
        padding-bottom: 12px !important;
      }
  - type: glance
    columns: 1
    show_icon: false
    show_name: false
    style: |
      ha-card {
        margin-top: -35px !important;
        margin-bottom: 5px !important;
      }
    entities:
      - entity: sensor.darksky_weather_summary_0d

  ## Today Weather Details - Names
  - type: glance
    columns: 4
    show_icon: false
    show_state: false
    style: |
      ha-card {
        margin-top: -30px !important;
        margin-bottom: -5px !important;
        font-size: 10px;
        color: #9da5b4;
      }
    entities:
      - entity: sensor.darksky_weather_humidity
        name: Humiditiy
      - entity: sensor.weather_wind_0d
        name: Wind
      - entity: sensor.weather_wind_dir_0d
        name: Direction
      - entity: sensor.darksky_precipiation_0d
        name: Precip.
  ## Today Weather Details - Values
  - type: glance
    columns: 4
    show_icon: false
    show_name: false
    style: |
      ha-card {
        margin-top: -30px !important;
        margin-bottom: 0px !important;
      }
    entities:
      - entity: sensor.darksky_weather_humidity
      - entity: sensor.weather_wind_0d
      - entity: sensor.weather_wind_dir_0d
      - entity: sensor.darksky_precipiation_0d

  ## Forecast ##
  ## Weather Days
  - type: glance
    columns: 5
    show_icon: false
    show_name: false
    style: |
      ha-card {
        margin-top: -5px !important;
        margin-bottom: -5px !important;
        padding-top: -15px;
        border-top: 5px solid #222;
      }
      .entities { padding-top: 10px !important; }
      div {
        /* color: #9da5b4; */
      }
    entities:
      - entity: sensor.date_1d
      - entity: sensor.date_2d
      - entity: sensor.date_3d
      - entity: sensor.date_4d
      - entity: sensor.date_5d
  ## Weather Icons
  - type: glance
    columns: 5
    show_name: false
    show_state: false
    style: |
      ha-card {
        margin-top: -40px !important;
        margin-bottom: 0px !important;
      }
    entities:
      - entity: sensor.date_1d
      - entity: sensor.date_2d
      - entity: sensor.date_3d
      - entity: sensor.date_4d
      - entity: sensor.date_5d
  ## Weather Both Temp
  - type: glance
    columns: 5
    show_name: false
    show_icon: false
    style: |
      ha-card {
        margin-top: -38px !important;
        margin-bottom: 0px !important;
      }
      div {
        color: #9da5b4 !important;
        font-size: 14px;
      }
    entities:
      - entity: sensor.weather_both_temp_1d
      - entity: sensor.weather_both_temp_2d
      - entity: sensor.weather_both_temp_3d
      - entity: sensor.weather_both_temp_4d
      - entity: sensor.weather_both_temp_5d
  ## Weather Rain
  - type: glance
    columns: 5
    show_name: false
    show_icon: false
    style: |
      ha-card {
        margin-top: -32px !important;
        margin-bottom: 0px !important;
      }
      div {
        color: #4c709d !important;
        font-size: 14px;
      }
    entities:
      - entity: sensor.darksky_precipiation_1d
      - entity: sensor.darksky_precipiation_2d
      - entity: sensor.darksky_precipiation_3d
      - entity: sensor.darksky_precipiation_4d
      - entity: sensor.darksky_precipiation_5d
  ## Weather Wind Both
  - type: glance
    columns: 5
    show_name: false
    show_icon: false
    style: |
      ha-card {
        margin-top: -33px !important;
        margin-bottom: -5px !important;
      }
      div {
        color: #777 !important;
        font-size: 12px;
      }
    entities:
      - entity: sensor.weather_wind_both_1d
      - entity: sensor.weather_wind_both_2d
      - entity: sensor.weather_wind_both_3d
      - entity: sensor.weather_wind_both_4d
      - entity: sensor.weather_wind_both_5d
4 Likes

And here it is for my config…

All the sensors to extract data from WeatherBit component:

### sensors to extract data from WeatheBit integrations

sensor:
  - platform: template
    sensors:
      condition_0:
        friendly_name: 'Current Condition'
        value_template: >
          {% if is_state('weather.weatherbit_zielonka', 'clear-night') %} Clear Night
          {% elif is_state('weather.weatherbit_zielonka', 'cloudy') %} Cloudy
          {% elif is_state('weather.weatherbit_zielonka', 'exceptional') %} Sunny
          {% elif is_state('weather.weatherbit_zielonka', 'fog') %} Fog
          {% elif is_state('weather.weatherbit_zielonka', 'hail') %} Hail
          {% elif is_state('weather.weatherbit_zielonka', 'lightning') %} Thunderstorms
          {% elif is_state('weather.weatherbit_zielonka', 'lightning-rainy') %} Rain with thunders
          {% elif is_state('weather.weatherbit_zielonka', 'partlycloudy') %} Partly Cloudy
          {% elif is_state('weather.weatherbit_zielonka', 'pouring') %} Heavy Rain
          {% elif is_state('weather.weatherbit_zielonka', 'rainy') %} Rainy
          {% elif is_state('weather.weatherbit_zielonka', 'snowy') %} Snowy
          {% elif is_state('weather.weatherbit_zielonka', 'snowy-rainy') %} Snow with Rain
          {% elif is_state('weather.weatherbit_zielonka', 'sunny') %} Sunny
          {% elif is_state('weather.weatherbit_zielonka', 'windy') %} Windy
          {% elif is_state('weather.weatherbit_zielonka', 'windy-variant') %} Windy
          {% else %} Unknown
          {% endif %}
        icon_template: >
          {% if is_state('weather.weatherbit_zielonka', 'clear-night') %} mdi:weather-night
          {% elif is_state('weather.weatherbit_zielonka', 'cloudy') %} mdi:weather-cloudy
          {% elif is_state('weather.weatherbit_zielonka', 'exceptional') %} mdi:weather-sunny-alert
          {% elif is_state('weather.weatherbit_zielonka', 'fog') %} mdi:weather-fog
          {% elif is_state('weather.weatherbit_zielonka', 'hail') %} mdi:weather-hail
          {% elif is_state('weather.weatherbit_zielonka', 'lightning') %} mdi:weather-lightning
          {% elif is_state('weather.weatherbit_zielonka', 'lightning-rainy') %} mdi:weather-lightning-rainy
          {% elif is_state('weather.weatherbit_zielonka', 'partlycloudy') and states('sensor.sun_elevation') < '0' %} mdi:weather-night-partly-cloudy
          {% elif is_state('weather.weatherbit_zielonka', 'partlycloudy') and states('sensor.sun_elevation') > '0' %} mdi:weather-partly-cloudy
          {% elif is_state('weather.weatherbit_zielonka', 'pouring') %} mdi:weather-pouring
          {% elif is_state('weather.weatherbit_zielonka', 'rainy') %} mdi:weather-rainy
          {% elif is_state('weather.weatherbit_zielonka', 'snowy') %} mdi:weather-snowy
          {% elif is_state('weather.weatherbit_zielonka', 'snowy-rainy') %} mdi:weather-snowy-rainy
          {% elif is_state('weather.weatherbit_zielonka', 'sunny') %} mdi:weather-sunny
          {% elif is_state('weather.weatherbit_zielonka', 'windy') %} mdi:weather-windy
          {% elif is_state('weather.weatherbit_zielonka', 'windy-variant') %} mdi:weather-windy-variant
          {% else %} mdi:cloud-question
          {% endif %}

      precip_0:
        friendly_name: 'Current Precipitation'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'precipitation') }}"
        unit_of_measurement: 'mm'
      temp_0:
        friendly_name: 'Current Temperature'
        value_template: "{{ states('sensor.netatmo_pogodynka_ogrod_temperature') }}"
        unit_of_measurement: '°C'
      pressure_0:
        friendly_name: 'Current Pressure'
        value_template: "{{ states('sensor.netatmo_pogodynka_parter_pressure') }}"
        unit_of_measurement: 'mbar'
      humidity_0:
        friendly_name: 'Current Humidity'
        value_template: "{{ states('sensor.netatmo_pogodynka_ogrod_humidity') }}"
        unit_of_measurement: '%'
      wind_speed_0:
        friendly_name: 'Wind Speed'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'wind_speed') }}"
        unit_of_measurement: 'm/s'
      wind_bearing_0:
        friendly_name: 'Wind Bearing'
        value_template: >
          {% set dir = state_attr('weather.weatherbit_zielonka', 'wind_bearing')|float %}
          {% if dir < 22.5 %} N
          {% elif dir < 67.5 %} NE
          {% elif dir < 112.5 %} E
          {% elif dir < 157.5 %} SE
          {% elif dir < 202.5 %} S
          {% elif dir < 247.5 %} SW
          {% elif dir < 292.5 %} W
          {% elif dir < 337.5 %} NW
          {% else %} N
          {% endif %}
        icon_template: >
          {% set dir = state_attr('weather.weatherbit_zielonka', 'wind_bearing')|float %}
          {% if dir < 22.5 %} mdi:arrow-down
          {% elif dir < 67.5 %} mdi:arrow-bottom-left
          {% elif dir < 112.5 %} mdi:arrow-left
          {% elif dir < 157.5 %} mdi:arrow-top-left
          {% elif dir < 202.5 %} mdi:arrow-up
          {% elif dir < 247.5 %} mdi:arrow-top-right
          {% elif dir < 292.5 %} mdi:arrow-right
          {% elif dir < 337.5 %} mdi:arrow-bottom-right
          {% else %} mdi:arrow-down
          {% endif %}


      temp_max_1:
        friendly_name: 'Temerature Forecast max 1'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[0].temperature }}"
        unit_of_measurement: '°C'
      temp_min_1:
        friendly_name: 'Temerature Forecast min 1'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[0].templow }}"
        unit_of_measurement: '°C'
      condition_1:
        friendly_name: 'Condition Forecast 1'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[0].condition }}"
        icon_template: >
          {% set stat = state_attr('weather.weatherbit_zielonka', 'forecast')[0].condition %}
          {% if stat == 'clear-night' %} mdi:weather-night
          {% elif stat == 'cloudy' %} mdi:weather-cloudy
          {% elif stat == 'exceptional' %} mdi:weather-sunny-alert
          {% elif stat == 'fog' %} mdi:weather-fog
          {% elif stat == 'hail' %} mdi:weather-hail
          {% elif stat == 'lightning' %} mdi:weather-lightning
          {% elif stat == 'lightning-rainy' %} mdi:weather-lightning-rainy
          {% elif stat == 'partlycloudy' %} mdi:weather-partly-cloudy
          {% elif stat == 'pouring' %} mdi:weather-pouring
          {% elif stat == 'rainy' %} mdi:weather-rainy
          {% elif stat == 'snowy' %} mdi:weather-snowy
          {% elif stat == 'snowy-rainy' %} mdi:weather-snowy-rainy
          {% elif stat == 'sunny' %} mdi:weather-sunny
          {% elif stat == 'windy' %} mdi:weather-windy
          {% elif stat == 'windy-variant' %} mdi:weather-windy-variant
          {% else %} mdi:cloud-question
          {% endif %}
      precip_1:
        friendly_name: 'Precipitation Forecast 1'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[0].precipitation }}"
        unit_of_measurement: 'mm'

      temp_max_2:
        friendly_name: 'Temerature Forecast max 2'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[1].temperature }}"
        unit_of_measurement: '°C'
      temp_min_2:
        friendly_name: 'Temerature Forecast min 2'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[1].templow }}"
        unit_of_measurement: '°C'
      condition_2:
        friendly_name: 'Condition Forecast 2'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[1].condition }}"
        icon_template: >
          {% set stat = state_attr('weather.weatherbit_zielonka', 'forecast')[1].condition %}
          {% if stat == 'clear-night' %} mdi:weather-night
          {% elif stat == 'cloudy' %} mdi:weather-cloudy
          {% elif stat == 'exceptional' %} mdi:weather-sunny-alert
          {% elif stat == 'fog' %} mdi:weather-fog
          {% elif stat == 'hail' %} mdi:weather-hail
          {% elif stat == 'lightning' %} mdi:weather-lightning
          {% elif stat == 'lightning-rainy' %} mdi:weather-lightning-rainy
          {% elif stat == 'partlycloudy' %} mdi:weather-partly-cloudy
          {% elif stat == 'pouring' %} mdi:weather-pouring
          {% elif stat == 'rainy' %} mdi:weather-rainy
          {% elif stat == 'snowy' %} mdi:weather-snowy
          {% elif stat == 'snowy-rainy' %} mdi:weather-snowy-rainy
          {% elif stat == 'sunny' %} mdi:weather-sunny
          {% elif stat == 'windy' %} mdi:weather-windy
          {% elif stat == 'windy-variant' %} mdi:weather-windy-variant
          {% else %} mdi:cloud-question
          {% endif %}    
      precip_2:
        friendly_name: 'Precipitation Forecast 2'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[1].precipitation }}"
        unit_of_measurement: 'mm'

      temp_max_3:
        friendly_name: 'Temerature Forecast max 3'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[2].temperature }}"
        unit_of_measurement: '°C'
      temp_min_3:
        friendly_name: 'Temerature Forecast min 3'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[2].templow }}"
        unit_of_measurement: '°C'
      condition_3:
        friendly_name: 'Condition Forecast 3'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[2].condition }}"
        icon_template: >
          {% set stat = state_attr('weather.weatherbit_zielonka', 'forecast')[2].condition %}
          {% if stat == 'clear-night' %} mdi:weather-night
          {% elif stat == 'cloudy' %} mdi:weather-cloudy
          {% elif stat == 'exceptional' %} mdi:weather-sunny-alert
          {% elif stat == 'fog' %} mdi:weather-fog
          {% elif stat == 'hail' %} mdi:weather-hail
          {% elif stat == 'lightning' %} mdi:weather-lightning
          {% elif stat == 'lightning-rainy' %} mdi:weather-lightning-rainy
          {% elif stat == 'partlycloudy' %} mdi:weather-partly-cloudy
          {% elif stat == 'pouring' %} mdi:weather-pouring
          {% elif stat == 'rainy' %} mdi:weather-rainy
          {% elif stat == 'snowy' %} mdi:weather-snowy
          {% elif stat == 'snowy-rainy' %} mdi:weather-snowy-rainy
          {% elif stat == 'sunny' %} mdi:weather-sunny
          {% elif stat == 'windy' %} mdi:weather-windy
          {% elif stat == 'windy-variant' %} mdi:weather-windy-variant
          {% else %} mdi:cloud-question
          {% endif %}
      precip_3:
        friendly_name: 'Precipitation Forecast 3'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[2].precipitation }}"
        unit_of_measurement: 'mm'

      temp_max_4:
        friendly_name: 'Temerature Forecast max 4'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[3].temperature }}"
        unit_of_measurement: '°C'
      temp_min_4:
        friendly_name: 'Temerature Forecast min 4'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[4].templow }}"
        unit_of_measurement: '°C'
      condition_4:
        friendly_name: 'Condition Forecast 4'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[3].condition }}"
        icon_template: >
          {% set stat = state_attr('weather.weatherbit_zielonka', 'forecast')[3].condition %}
          {% if stat == 'clear-night' %} mdi:weather-night
          {% elif stat == 'cloudy' %} mdi:weather-cloudy
          {% elif stat == 'exceptional' %} mdi:weather-sunny-alert
          {% elif stat == 'fog' %} mdi:weather-fog
          {% elif stat == 'hail' %} mdi:weather-hail
          {% elif stat == 'lightning' %} mdi:weather-lightning
          {% elif stat == 'lightning-rainy' %} mdi:weather-lightning-rainy
          {% elif stat == 'partlycloudy' %} mdi:weather-partly-cloudy
          {% elif stat == 'pouring' %} mdi:weather-pouring
          {% elif stat == 'rainy' %} mdi:weather-rainy
          {% elif stat == 'snowy' %} mdi:weather-snowy
          {% elif stat == 'snowy-rainy' %} mdi:weather-snowy-rainy
          {% elif stat == 'sunny' %} mdi:weather-sunny
          {% elif stat == 'windy' %} mdi:weather-windy
          {% elif stat == 'windy-variant' %} mdi:weather-windy-variant
          {% else %} mdi:cloud-question
          {% endif %}
      precip_4:
        friendly_name: 'Precipitation Forecast 4'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[3].precipitation }}"
        unit_of_measurement: 'mm'

      temp_max_5:
        friendly_name: 'Temerature Forecast max 5'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[4].temperature }}"
        unit_of_measurement: '°C'
      temp_min_5:
        friendly_name: 'Temerature Forecast min 5'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[4].templow }}"
        unit_of_measurement: '°C'
      condition_5:
        friendly_name: 'Condition Forecast 5'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[4].condition }}"
        icon_template: >
          {% set stat = state_attr('weather.weatherbit_zielonka', 'forecast')[4].condition %}
          {% if stat == 'clear-night' %} mdi:weather-night
          {% elif stat == 'cloudy' %} mdi:weather-cloudy
          {% elif stat == 'exceptional' %} mdi:weather-sunny-alert
          {% elif stat == 'fog' %} mdi:weather-fog
          {% elif stat == 'hail' %} mdi:weather-hail
          {% elif stat == 'lightning' %} mdi:weather-lightning
          {% elif stat == 'lightning-rainy' %} mdi:weather-lightning-rainy
          {% elif stat == 'partlycloudy' %} mdi:weather-partly-cloudy
          {% elif stat == 'pouring' %} mdi:weather-pouring
          {% elif stat == 'rainy' %} mdi:weather-rainy
          {% elif stat == 'snowy' %} mdi:weather-snowy
          {% elif stat == 'snowy-rainy' %} mdi:weather-snowy-rainy
          {% elif stat == 'sunny' %} mdi:weather-sunny
          {% elif stat == 'windy' %} mdi:weather-windy
          {% elif stat == 'windy-variant' %} mdi:weather-windy-variant
          {% else %} mdi:cloud-question
          {% endif %}
      precip_5:
        friendly_name: 'Precipitation Forecast 5'
        value_template: "{{ state_attr('weather.weatherbit_zielonka', 'forecast')[4].precipitation }}"
        unit_of_measurement: 'mm'

And the weather card itself (including some referrences to Netatmo sensors):

cards:
  - cards:
      - content: |-
          ## <font color="#ffffff">{{ states('sensor.condition_0') }}</font>
          <font color="#9193ab"><ha-icon
          icon="mdi:map"></ha-icon></font> Zielonka
        type: markdown
      - aspect_ration: 1/1
        entity: sensor.condition_0
        show_name: false
        show_state: false
        size: 80px
        tap_action:
          action: none
        type: 'custom:button-card'
      - content: >-
          # {{ states('sensor.temp_0') }} °C

          <font color="#9193ab"><ha-icon
          icon="mdi:water-percent"></ha-icon></font>{{ states('sensor.precip_0')
          }} mm
        style: |
          ha-card {
            text-align: right;
          }
        type: markdown
    horizontal: true
    type: 'custom:vertical-stack-in-card'
  - type: divider
  - cards:
      - content: >
          <font color="#9193ab"><ha-icon
          icon="mdi:water-percent"></ha-icon></font> {{     
          states('sensor.netatmo_pogodynka_ogrod_humidity') }} %

          <font color="#9193ab"><ha-icon icon="mdi:gauge"></ha-icon></font>
          {{      states('sensor.netatmo_pogodynka_parter_pressure') }} mbar
        style: |
          ha-card {
          padding-left: 10px;
          }
        type: markdown
      - content: >
          <font color="#9193ab"><ha-icon
          icon="mdi:weather-sunset-up"></ha-icon></font> {{
          as_timestamp(strptime(states('sensor.dark_sky_sunrise_0d'),
          '%Y-%m-%d')) | timestamp_custom('%H:%M') }}

          <font color="#9193ab"><ha-icon
          icon="mdi:weather-sunset-down"></ha-icon></font> {{
          as_timestamp(strptime(states('sensor.dark_sky_sunset_0d'),
          '%Y-%m-%d')) | timestamp_custom('%H:%M') }}
        style: |
          ha-card {
          padding-left: 35px;
          }
        type: markdown
      - content: >
          <font color="#9193ab"><ha-icon icon=" {% set dir =
          states('sensor.dark_sky_wind_bearing') | float %} {% if dir < 22.5 %}
          mdi:arrow-down {% elif dir < 67.5 %} mdi:arrow-bottom-left {% elif dir
          < 112.5 %} mdi:arrow-left {% elif dir < 157.5 %} mdi:arrow-top-left {%
          elif dir < 202.5 %} mdi:arrow-up {% elif dir < 247.5 %}
          mdi:arrow-top-right {% elif dir < 292.5 %} mdi:arrow-right {% elif dir
          < 337.5 %} mdi:arrow-bottom-right {% else %} mdi:arrow-down {% endif
          %} "></ha-icon></font> {{      states('sensor.wind_direction') }}

          <font color="#9193ab"><ha-icon icon="mdi:gauge"></ha-icon></font>
          {{      states('sensor.dark_sky_wind_gust') }} m/s
        style: |
          ha-card {
          padding-left: 35px;
          }
        type: markdown
    horizontal: true
    type: 'custom:vertical-stack-in-card'
  - type: divider
  - cards:
      - cards:
          - cards:
              - content: >-
                  ### <center>{{ (as_timestamp(now()) + 1*86400) |
                  timestamp_custom('%a') }}</center>
                style: |
                  ha-card {
                  height: 50px;
                  }
                type: markdown
              - entity: sensor.condition_1
                show_name: false
                show_state: false
                size: 50px
                style: |
                  ha-card {
                  height: 50px;
                  }
                tap_action:
                  action: none
                type: 'custom:button-card'
              - content: >-
                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-high"></ha-icon><font color="#ffaa2e">{{
                  states('sensor.temp_max_1') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-low"></ha-icon><font color="#ffffff">{{
                  states('sensor.temp_min_1') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:water-outline"></ha-icon><font color="#1bbfff">{{
                  states('sensor.precip_1') }}&nbsp;mm</font>
                style: |
                  ha-card {
                  height: 100px;
                  width: 120px
                  }
                type: markdown
            type: 'custom:vertical-stack-in-card'
          - cards:
              - content: >-
                  ### <center>{{ (as_timestamp(now()) + 2*86400) |
                  timestamp_custom('%a') }}</center>
                style: |
                  ha-card {
                  height: 50px;
                  }
                type: markdown
              - entity: sensor.condition_2
                show_name: false
                show_state: false
                size: 50px
                style: |
                  ha-card {
                  height: 50px;
                  }
                tap_action:
                  action: none
                type: 'custom:button-card'
              - content: >-
                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-high"></ha-icon><font color="#ffaa2e">{{
                  states('sensor.temp_max_2') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-low"></ha-icon><font color="#ffffff">{{
                  states('sensor.temp_min_2') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:water-outline"></ha-icon><font color="#1bbfff">{{
                  states('sensor.precip_2') }}&nbsp;mm</font>
                style: |
                  ha-card {
                  height: 100px;
                  width: 120px
                  }
                type: markdown
            type: 'custom:vertical-stack-in-card'
          - cards:
              - content: >-
                  ### <center>{{ (as_timestamp(now()) + 3*86400) |
                  timestamp_custom('%a') }}</center>
                style: |
                  ha-card {
                  height: 50px;
                  }
                type: markdown
              - entity: sensor.condition_3
                show_name: false
                show_state: false
                size: 50px
                style: |
                  ha-card {
                  height: 50px;
                  }
                tap_action:
                  action: none
                type: 'custom:button-card'
              - content: >-
                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-high"></ha-icon><font color="#ffaa2e">{{
                  states('sensor.temp_max_3') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-low"></ha-icon><font color="#ffffff">{{
                  states('sensor.temp_min_3') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:water-outline"></ha-icon><font color="#1bbfff">{{
                  states('sensor.precip_3') }}&nbsp;mm</font>
                style: |
                  ha-card {
                  height: 100px;
                  width: 120px
                  }
                type: markdown
            type: 'custom:vertical-stack-in-card'
          - cards:
              - content: >-
                  ### <center>{{ (as_timestamp(now()) + 4*86400) |
                  timestamp_custom('%a') }}</center>
                style: |
                  ha-card {
                  height: 50px;
                  }
                type: markdown
              - entity: sensor.condition_4
                show_name: false
                show_state: false
                size: 50px
                style: |
                  ha-card {
                  height: 50px;
                  }
                tap_action:
                  action: none
                type: 'custom:button-card'
              - content: >-
                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-high"></ha-icon><font color="#ffaa2e">{{
                  states('sensor.temp_max_4') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-low"></ha-icon><font color="#ffffff">{{
                  states('sensor.temp_min_4') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:water-outline"></ha-icon><font color="#1bbfff">{{
                  states('sensor.precip_4') }}&nbsp;mm</font>
                style: |
                  ha-card {
                  height: 100px;
                  width: 120px
                  }
                type: markdown
            type: 'custom:vertical-stack-in-card'
          - cards:
              - content: >-
                  ### <center>{{ (as_timestamp(now()) + 5*86400) |
                  timestamp_custom('%a') }}</center>
                style: |
                  ha-card {
                  height: 50px;
                  }
                type: markdown
              - entity: sensor.condition_5
                show_name: false
                show_state: false
                size: 50px
                style: |
                  ha-card {
                  height: 50px;
                  }
                tap_action:
                  action: none
                type: 'custom:button-card'
              - content: >-
                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-high"></ha-icon><font color="#ffaa2e">{{
                  states('sensor.temp_max_5') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:thermometer-low"></ha-icon><font color="#ffffff">{{
                  states('sensor.temp_min_5') }} °C</font>

                  <font color="#9193ab"><ha-icon
                  icon="mdi:water-outline"></ha-icon><font color="#1bbfff">{{
                  states('sensor.precip_5') }}&nbsp;mm</font>
                style: |
                  ha-card {
                  height: 100px;
                  width: 120px
                  }
                type: markdown
            type: 'custom:vertical-stack-in-card'
        horizontal: true
        type: 'custom:vertical-stack-in-card'
    horizontal: true
    type: 'custom:vertical-stack-in-card'
type: 'custom:vertical-stack-in-card'
5 Likes

This is great - thanks for sharing.

I’ve spotted a typo in ‘Humidity’ though!

Its now Jan 2022 and I wanted to add a weather card to my wall panel. However still seems limited information available on the HA forum with up to date integrations. I came across this thread but on trying to sing up to Dark Sky see that they closed their API subscription and plan to end all support at the end of 2022. (https://blog.darksky.net/) so I was hoping someone could share an up to date weather card and the required yaml code to share?

Thank you for any guidance.

I am not sure if this belongs here, but it is surely related…

I have those two weather cards referring to the same entity but displaying differently. Furthermore, while the pop-up code is the same however also the result is different. Or am I missing something?

type: grid
columns: 1
square: false
cards:
  - type: custom:weather-card
    number_of_forecasts: '5'
    hourly_forecast: false
    details: true
    entity: weather.home
    forecast: true
    current: true
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          style: '--popup-background-color: black;'
          content:
            type: custom:weather-card
            entity: weather.home
            number_of_forecasts: '5'
            name: Home
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.home
    name: Home
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          style: '--popup-background-color: black;'
          content:
            type: custom:weather-card
            entity: weather.home
            number_of_forecasts: '5'
    secondary_info_attribute: humidity

Any chance to get the latest version of these sensors? I’m trying to fix them but not having much luck. For instance on this one

"{{ (as_timestamp(strptime(states('sensor.date_time_iso'),'%Y-%m-%d, %H:%M')) + (2*86400)) | timestamp_custom('%a') }}"

I get

ValueError: Template error: strptime got invalid input '2023-03-16T21:10:00' when rendering template '"{{ (as_timestamp(strptime(states('sensor.date_time_iso'),'%Y-%m-%d, %H:%M')) + (2*86400)) | timestamp_custom('%a') }}"' but no default was specified

Actually having pretty good luck replacing that section with platinum weather card, and will be much easier to transition with dark sky goes kaput. Loving the results! Thanks for the inspiration!!

Will you share the code please?
Which weather provider do you use?

Latest iteration.

3 Likes

This looks great. I guess you know what I’m going to ask… :blush:
Would you mind sharing the code?

Here’s how I did it

I’m using a combination of Weatherflow weather station and weather forecase and pirateweather for my weather forecaster.

1 Like