New weather card - Weather-Forecast-Extended

Sorry for not replying the last week.
Was sick and I’m also out for holidays in a week.
So will take some time until the next fixes / new features.

But seasonal images are already on the todo list and there’s also a Github issue about it.
ChatGPT is sadly still not able to build a whole new set of the same conditions in one request and also not in the needed resolution / aspect ratio.
So this is quite some donkey work, where I need some spare time and motivation for. :face_with_peeking_eye::upside_down_face:

Custom images have also been requested before and there’s also an open Github issue.
I liked the idea there, to use an image entity instead of a fixed condition → image mapping.
That way, even more complex ideas would be possible.
Like handing the current condition and your outdoor camera picture to an AI task and generate a comic style weather scene from it.

1 Like

Hi All - I have been using the card on one of my Dashboards. I like it, but ran into an issue. I have not officially reported it, but think I figured out the problem… My primary weather source is NWS (Nation Weather Service). The location I look at is local to my house at ACY airport. THat NOAA/NWS location has Twice Daily and Hourly available. Due to the Twice Daily rather than Daily, the card will not display the daily forecast. See the clips below and I will post this as a feature request. First Shot is using Google Weather as the source and second is NWS. Third shot is using NWS with the Clock Weather Card.

Do you know how the Clock Weather Card handles this?
Are the daily and the nightly forecast displayed as a combined item for the whole day?

Currently thinking about how this coiuld be implemented the best way.
As the daily forecast uses the bars for min/max temperature, seperated day and night items might not make that much sense.

So combining them might be a good way.
Just not sure how that should be done.

A few thoughts:

  • Weather condition / icon of the day
  • Summed rain ammount
  • How to calculate the chance of rain (larger value?)
  • Custom attributes might be an even larger problem

Any feedback is welcome. :wink:

Hi, love the card but I’d prefer a more compact version for my main dashboard. Something like this:

I tried hiding the temp bars and precipitation info with CSS but it didn’t affect the total card height. Couldn’t get the card to shrink down without going outside of hui-card and setting height: auto for .card.fit-rows. Which I’m assuming is a bad idea, and anyway not achievable through card-mod afaik. I’m a noob to HA and haven’t used CSS since way before flexbox was a thing though, so maybe I’m missing something obvious.

Still, would it be possible to add options to hide temp bars and precipitation?

Edit: Sorry, I’m stupid. I just needed rows: auto in the YAML. It works fine now.

type: custom:weather-forecast-extended-card
entity: weather.forecast_hem
hourly_forecast: false
daily_forecast: true
orientation: vertical
use_night_header_backgrounds: true
grid_options:
  rows: auto
card_mod:
  style: |
    .temperature-bar {
      display: none !important;
    }

    .precipitation {
      display: none !important;
    }

2 Likes

Hi @Thyraz, I’ve raised a PR a few days ago that should fix the issue I’d reported in Jan earlier this year on Shelly Wall Displays

I’d be great if you can take a look and approve it :slight_smile:

1 Like

Sorry for the late reply. I was on a ski holiday.
Thanks for the investigation and the fix. :slight_smile:
Will be included in the next release.

1 Like

No worries and thanks!

Sorry for the long delay.
Spring is coming in Europe and we started some larger renovation projects in the house.
So, I don’t have that much spare time for home automation projects at the moment. :wink:

I just released version 1.2.0:

Changelog:

  • Added missing header background images for ‘cloudy’ weather condition
  • Tap actions can now use a different entity as target
  • Fix semi-transparent pill backgrounds on Android 11 WebView by @grovolis
2 Likes

Very nice card.
:pray: Thanks

Is it in the last version possible to adjust the header size. I mean afjusting the size of the upper picture?
If so i can allign it with the card next to it… I like symmetry :blush:

@Thyraz a few weeks back, I raised another PR that fixes pill backgrounds for Shelly devices (and certain Android WebViews in general). My previous workaround was working as well in certain cases, this PR fixes it for good.

Take a look when you get a moment, it been working well for me for a few weeks now.

Merged. :slight_smile:
Will be included in the next release.

1 Like

Legend, thank you! Btw if you ever need help or got any ideas you're looking to implement but might not have time to do so, I'd be willing to help out or contribute in any way.

1 Like
  • Missing a clock and calendar.
  • I like your temperature bars.
  • Precipitation bars could use some work.

The current card I use Weather Chart Card

Love the card !
I'm using the NLweather intergration to fetch the KNMI weather and forecasts.
The latest release now also can do the rain forecast graphs using nowcast whcih should be easily displayed using the card. However I can't seem to get it to work and in the forum here it is not mentioned at all.

Relevant link to the docs of NLweather nowcast section:

Anybody any hints/tips?

Hi all.
This is a great card, love this. Please can you help with me the header font size? Despite setting it up with Card-mod, it doesn't work. I am looking for a way to make the main temperature and description smaller:

type: custom:weather-forecast-extended-card
name: Previsão Indaiatuba
show_current: false
show_forecast: false
show_attributes: true
forecast_days: 5
icons: true
orientation: vertical
nowcast_layout: pager
nowcast_always_show: false
show_header: true
hourly_forecast: false
daily_forecast: false
header_chips:

  • type: template
    template: "{{ now().strftime('%H:%M') }}"
    icon: mdi:clock
  • type: template
    template: "{{ states('sensor.gw2000b_wind_speed') }} Km/h"
    icon: mdi:weather-windy
  • type: template
    template: "{{ states('sensor.gw2000b_rain_rate_piezo') }} mm"
    icon: mdi:weather-pouring
    header_attributes:
    grid_options:
    columns: 12
    rows: 2
    solar_forecast_entries:
    use_night_header_backgrounds: true
    entity: sensor.clima_traduzido
    header_temperature_entity: sensor.gw2000b_outdoor_temperature
    nowcast_entity: weather.forecast_home
    card_mod:
    style:
    .: |
    .ha-card {
    font-size: 8px;
    }

I appreciate any inputs. Thanks in advance.