Weather Forecast Summary

Configuration Frontend
1

Hi All,

I’m looking for some suggestions for displaying this entity so that it shows the full text of the weather forecast summary. Using simply a standard entity card, seems to cut off the (very large) text and you need to open a sub-window to read it (see below).

The integration is the “Environment Canada” integration which has a large number of sensors for the city/weather station you select when configured.
The entity in question is the sensor.<location_name>_summary that shows a text summary of the forecast for the day.

For example:

Halton Hills Summary
Today. Cloudy with 40 percent chance of showers or drizzle. Wind northwest 30 km/h. Temperature steady near plus 5. UV index 1 or low.

If I use a regular entity card I see the top card in the first screenshot, with extra large text and cut off.
If I use a tile card, it seems to be normal size text, and fits in the window when it spans the screen (second card in first screenshot) but not if I were to use a stacked layout of any sort, then it gets cut off instead of wrapping the text. (see third stacked tile screenshot)

image
image1135×185 12.5 KB

image

For reference, below is the entity pop out window when you click on any of the above cards.

image

2

Does it have to be an entity card? I too use the environment Canada weather with a markdown card as it does multiline.

Screenshot_20231122_142212_Home Assistant
Screenshot_20231122_142212_Home Assistant1080×1874 205 KB

3

I was thinking of Markdown, but wasn’t sure of the proper code to make it look nice. Can you share your code for the above?

Thanks,

4

I was able to work out the markdown portion but now I’m curious on your daily forecast card you show above. Is that all done in a markdown card also or is it a custom card of some sort?

image
image920×957 112 KB

5

Sorry I just saw this now. Here is my dashboard yaml for assistant.

 - type: custom:vertical-stack-in-card
        cards:
          - type: markdown
            title: Forecast
            content: >
              ### <font color='#EEA056'> {{ states('sensor.forecast')}} </font>
              <font color='#FF0000'>   {% if (states('sensor.warnings') ==
              '1')-%}
                 {{state_attr('sensor.warnings','alert_1')}}
              {% elif (states('sensor.warnings') == '2')-%}
                 {{state_attr('sensor.warnings','alert_1')}}
                 {{state_attr('sensor.warnings','alert_2')}}
              {% elif (states('sensor.warnings') == '3')-%}
                 {{state_attr('sensor.warnings','alert_1')}}
                 {{state_attr('sensor.warnings','alert_2')}}
                 {{state_attr('sensor.warnings','alert_3')}}
              {%- else -%} 
                 {{''}}
              {%- endif %} </font>
          - type: custom:weather-card
            entity: weather.kitchener_waterloo
            name: K-W
          - type: custom:mini-graph-card
            hours_to_show: 72
            show:
              labels: true
              labels_secondary: true
              icon: false
              name: false
              state: false
              align_state: right
              font_size: 50
            color_thresholds:
              - value: -5
                color: '#6499f7'
              - value: 10
                color: '#8ff95d'
              - value: 22
                color: '#e89e4b'
              - value: 28
                color: '#df4b3e'
            entities:
              - sensor.temperature
6

For those that find this post, my original findings to display the forecast summary in markdown, this is the code:

- type: markdown
  content: |-
    {% set summary = states.sensor.halton_hills_summary.state %}

    **Forecast:** {{ summary }}
7

With that said, I really like @pcwii 's solution, and am implementing a variation if it.

Thanks for your suggestion @pcwii

1 Like
8

@pcwii, Any idea if we can adjust the size of the City/Current Temperature shown here?
I know we can adjust the name text (as you have K-W), but hoping we can actually decrease the size shown. Depending on the screen width, they overlap each other.

image
image441×614 32.5 KB
image

9

There may be a way using card mod or something, but honestly I am not certain.
Your dashboard is look good, and familiar too!
:rofl:

1 Like
10

I’m just waiting to see what the “warnings” look like. :stuck_out_tongue:

11

I updated my dashboard to include the warnings, advisories, and statements.

- type: markdown
            title: Forecast
            content: >
              ### <font color='#EEA056'> 
                ### {{ states('sensor.forecast')}} 
              </font> <font color='#FF0000'> {% for d in
              states('sensor.warnings') %}
                {% if (states('sensor.warnings') != '0')-%}
                  {% set my_string = 'alert_' ~ d %}
                  {{state_attr('sensor.warnings', my_string)}}
                {%- else -%} 
                  {{''}}
                {%- endif %}
              {% endfor %} </font> <font color='#FFFF00'> {% for d in
              states('sensor.advisories') %}
                {% if (states('sensor.advisories') != '0')-%}
                  {% set my_string = 'alert_' ~ d %}
                  {{state_attr('sensor.advisories', my_string)}}
                {%- else -%} 
                  {{''}}
                {%- endif %}
              {% endfor %} </font> <font color='#0000ff'> {% for d in
              states('sensor.statements') %}
                {% if (states('sensor.statements') != '0')-%}
                  {% set my_string = 'alert_' ~ d %}
                  {{state_attr('sensor.statements', my_string)}}
                {%- else -%} 
                  {{''}}
                {%- endif %}
              {% endfor %} </font>
12

question moved to main thread: