New weather card - Weather-Forecast-Extended

Legend! Thank you that worked great

Hi, the card is really cool. I’m using it with the Pirate Weather API, but I really need a ‘feels like’ temperature, like in the iPhone app. Are you planning to add that? Thank you. :slight_smile:

Firs,t thank you for this post. :slightly_smiling_face:
It made me aware of a bug in the editor, which caused the additional attribute dropdowns to always use a internal fallback list instead of the real ones of your selected weather entity.

I haven’t released the fix yet, but I can now select the apparent_temperature (which is the name HA uses for feels-like temp in the forecast) for daily or hourly forecast entries.

But not exactly sure how you would like to have it displayed.

For a daily forecast, this single value doesn’t really make sense to me compared to the temperature values that are supplied as a min an a max value.
Is it a mean value of the feel-like temperatures of the day? Or a fell-like alternative to the max value?
Is the current way to display it as seperate row below the other values enough for you here?

For the hourly forecast it’s more clear, as there’s only one temperature (and once I release a fixed version this can already be used as the additional row in the forecast).
But I’m not sure if you would rather like to use the feel-like temp values INSTEAD of the real temp values in the hourly forecast.

edit: Just noticed that as you talked about the Pirate Weather integration:
That one doesn’t provide any apparent_temperature / feels-like temp entries for the daily forecasts. So most likely you’re only talking about that one?

Here’s how it would look like as the additional attribute row:

Good observation, maybe I should use a different integration instead of Pirate Weather.
I think it would be enough to have just the current “feels like” temperature. It is quite important to me, because for example right now it is -11 here, but the feels like temperature is -21, which is much more important when going outside :slightly_smiling_face:

I released the bug fix (v0.8.3), so you should at least be able to use the feels-like temperature as additional attribute like shown in my screenshot above for the time being.

Everything works great, thank you very much.

1 Like

New release (0.9.0):

  • Added possibility to show daily / hourly solar forecast values
  • Extra attributes can now use a custom color
  • Extra attributes can now use an option to dim the text in case the numeric value is below a configured threshold
  • Fix for wrong background color in the editor with the dark default HA theme

Example screenshot with solar forecast using the new options listed above:

1 Like

Hey thanks for the update, I’ve got a quick question. On my Shelly Displays (running Android 11), it looks like the background shade for Temperature, conditions etc doesn’t load properly. I guess there is some error in the background, can’t really check on that device.

Also any settings around interactivity don’t seem to work either, i.e. tapping on temperature doesn’t bring up the more info pop up.

Is there any way I can provide logs and possibly get it fixed? See screenshot below for your reference.

Hm… that’s a really good question.
My first thought was, that I might use a CSS var from the HA theme that isn’t set in your case.

But the div (which is the outer div around the text itself that is visible in your case, so it can’t be a layout problem with the element not sized properly) has a quite simple styling:

    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 100px;

Edit: ok you also wrote about taps not working.
So it might be some sizing problem.
But not sure why the text is visible then.
Should be truncated in case the elements are too small.

The flex layouts in the lower part of the card are also more complicated, in case the browser engine is too old, I would have thought that this isn’t the first thing that would fail.

Not really sure where to start, but will take a closer look later.

1 Like

Yeah I agree it’s a bit odd that more complex styles work fine, but this tiny bit isn’t. Let me know if I can help in any way!

New release 1.0.0:

This is a first release adding support for nowcasts.
Currently I know about 2 compatible integrations which can provide this data: ‘OpenWeatherMap’ using the v3.0 API and ‘DWD Nowcast’.

You can choose to place the nowcast on a second header “page” using pagination / swipe gestures, or to place it inline below the other content.

In case your card also shows daily and or hourly forecast, the additional header height in ‘inline’ mode will result in less height for the other sections below.
Size your card accordingly. There might be layout issues otherwise.
I will adjust the minimal size for the card configurations containing a nowcast in the next releases.

Here’s an example screenshot:


If the current weather condition is indicating snow, the bars are colored white instead of blue.

Other changes:

  • Restructured the editor as it was a mess after adding more and more features

Full Changelog: Comparing 0.9.0...1.0.0 · Thyraz/weather-forecast-extended · GitHub

4 Likes

I just installed the card. In chromium and in firefox i can see the nowcast on the header page, but the inline nowcast is empty (day and night).

Hi vajdum,

you’re the first one giving feedback on the feature, so maybe you’re also the only user of the nowcast beside of me so far. :stuck_out_tongue:

Can you maybe post your configuration as code snippet here and a screenshot of it in the header page and once with inline mode?

Great card! Is it possible to increase the height of the header image? I’m trying to fit more information (chips/sensors) in there, but it’s getting a bit cluttered. I have plenty of vertical space on my dashboard, so a larger ‘hero’ area would be amazing.

type: custom:weather-forecast-extended-card
entity: weather.home
header_attributes:
  - cloud_coverage
show_header: true
hourly_forecast: false
daily_forecast: false
orientation: vertical
use_night_header_backgrounds: true
nowcast_layout: inline
nowcast_always_show: false
header_chips:
  - type: attribute
    attribute: cloud_coverage
    icon: mdi:cloud
  - type: attribute
    attribute: ""
  - type: attribute
    attribute: ""
hourly_extra_attribute_color: "#9a9996"
hourly_extra_attribute: cloud_coverage
hourly_extra_attribute_dim_below: 30
show_sun_times: true
hourly_min_gap: "16"
header_temperature_entity: sensor.temperatur
nowcast_entity: weather.dwd_nowcast
daily_extra_attribute: solar_forecast
daily_extra_attribute_unit: kW


Ok, so it’s not the card configuration.

My next thought was, that you maybe use it in a different dashboard type than section layout and a min-height for the nowcast might be missing.

So I tried that too, and indeed I get the same result as in your screenshots
But a short test with increasing the card-height with card-mod didn’t help.
The nowcast grows vertically, but the bars itself stay on a mininmal, not visible size.

Will take a closer look later, what might cause this.
I just use section based dashboards these days, so didn’t notice it.
Thanks for reporting. :slightly_smiling_face:

edit: fixed in version 1.1.0 below.

Ok, here’s a new release (version 1.1.0).

Biggest change are custom icons.
You can map any icon available in your HA installation to a weather condition.
This is also possible in the UI editor of the card.

If you want to use your own SVG files, add them to the HA icon library using Thomas Loven’s lovely Custom Icons Integration.

The other new feature in this release, is that the card returns proper sizing values in masonry views.
So far I only took care of section dashboards.

There’s also a (YAML only) option to override the row height in these views instead of using auto-sizing.
Take a look at the README on Github for details.

1 Like

Hi @Thyraz , thanks for this great weather card. I think I was having the same issue as @vajdum but I’m not sure.

I was on 1.0.0 until a few moments ago. Keep in mind that, when on 1.0.0, I was only using inline version, and had never tried to see if header version was working as intended.

Two days ago (I was on 1.0.0) it was a sunny day where I live. So, since I had no bar, I thought it was because of the sunny forecast. Still, the empty, inline nowcast section kept on showing no matter if “Always show nocast” was turned off. I thought this was anormal but I was unsure on how that option worked.

Yesterday it was a rainy day but still I saw no bar showing in the nowcast section. I haven’t tried to switch to header to see if it was working, since I’ve found this topic only today.

Back to today. I found the 1.1.0 update and I upgraded. Now, I can’t tell if the nowcast works properly because, for the next hour, there is no predicted rain. Both header and inline version are showing an empty nowcast. “Always show nocast” is toggled off.

OpenWeather 3.0 API is working as intended. Please notice that atm the weather provider is PWeather as I find it more precise (so I’ll use OpenWeather only for the nowcast section). Switching to OpenWeather didn’t solve the issue (at least, the nowcast bar is always showing even if empty). Putting the card outside the vertical-stack-in-card had no effect.

Pasting the yaml here (I was trying to use OpenWeather; temperature is provided by personal meteo station):

type: custom:vertical-stack-in-card
cards:
  - type: custom:weather-forecast-extended-card
    entity: weather.openweathermap
    header_attributes: []
    show_header: true
    hourly_forecast: false
    daily_forecast: false
    orientation: vertical
    use_night_header_backgrounds: true
    header_temperature_entity: sensor.ws2900_v2_02_03_outdoor_temperature
    show_sun_times: true
    sun_use_home_coordinates: true
    header_tap_action_temperature:
      action: more-info
    header_tap_action_condition:
      action: navigate
      navigation_path: /dashboard-home/meteo
    nowcast_layout: inline
    nowcast_always_show: false
    nowcast_entity: weather.openweathermap

Precipitation bars are ok now.

Regarding the card image - its wrong, there are no lovely green lawns and Trees outside currently :wink:

The night image fits much better to the weather.
You should think about seasonal images :herb: :sunflower: :maple_leaf: :snowflake:

3 Likes

@Thyraz Just started using your card, its really nice! Similar to the above ask, I’d like to be able to set custom images for at least Night, Day, Dusk, Dawn, and weather specific

The current day image is ‘too bright’, do not go with the theme I use, and also makes the chips (which I love) hard to see…

using static versions of these animated images would be really nice for my theme…

weather-forecast-card-effects

1 Like