☀️ Slightly improved Weather Forecast Card for Home Assistant

Hi troinine. Thanks for this beautiful card ! Could you possibly integrate an optional display for the duration of sunshine in hours per day ?

1 Like

I just wanted to say that this is by far the best looking and useful weather card out there. Great work man.

1 Like

Thank you for all your work on this weather card. One helpful feature for precipitation for those of us who live in the freezing climates would be able to show precipitation amounts for snow separate from rain.

I installed this card from HACS, but it’s not visible in my custom-cards selection.
And the js-file is visible in the directory: www/community/ha-weather-forecast-card/

I have also added the location in my configuration.yaml
url: /hacsfiles/ha-weather-forecast-card/weather-forecast-card.js

What am I doing wrong ?

Hey there! It’s possible and I would think the best place for this information is the current attributes section. Feel free to create a Github issue for this feature request!

Hey there! Unfortunately, I don’t think the Home Assistant weather component has built-in concept for this yet. You’d essentially have to calculate it yourself by mapping current conditions against the precipitation rate to estimate the “snow-to-water” ratio.

I’m definitely interested in this too, but I’m lacking the details on how different integrations work.

I might be wrong here so hopefully someone can correct me.

Hey! Make sure you restart Home Assistant after your first install of this card. You can see from the browser console if the card is loaded or not. Check if the console prints:

WEATHER-FORECAST-CARD 1.0.0

It looks like this fantastic custom card stopped working with today’s release of Home Assistant 26.4.0. :frowning:

Nope, working perfectly fine. Must be something other wrong with your setup… What are the symptoms?

The symptom is a spinning circle instead of the actual card right after updating to 26.4.0.

With Home Assistant 26.4.1 it all works again.

Hey there.
This card is the best one I have spotted so far and I tried so many!!

Question: when increasing the font size weather-forecast-card-chart-font-size via the theme as described in the documentation, that works, however it is cutting off the highest temperature by a few pixels.
I tried all sorts of things with different paddings/margins with card-mod in the chart container and its nested containers, but I cant figure it out. Can someone give me a hint what I need to add with card-mod (or something else) so that the forecast chart / canvas is rendered with a bigger height?

Thank you!

Very helpful card. Many thanks!
Quick question: I am somewhat struggling with the condition effect. Initially nothing was shown (my system language was not set to English) but when I switched to English it started to show the effects. When changing the language selection again it works often correctly at least in the short term.
Therefore the question: Could it be that the selection of condition effects is being based on the English terms rather than the condition codes - or am I having a different problem?

Thanks for helping out.

Something’s off… The forecast is either showing way too much wind or way too much rain.

Three different weather services give completely different results for the exact same dates.

smhi:

smhi homepage:

yr.no:

yr homepage:

tomorrow.io:

@fair_dinkum , this is now fixed in 1.1.0!

1 Like

Hi all! :waving_hand:

Thanks for the support! As mentioned earlier, I have been a bit occupied with other projects. However, I did dedicate some time to address few of the pressing issues plus added some new features.

:sun: Release v1.1.0 Highlights

This release is all about atmosphere. The weather condition effects get two big upgrades: soft clouds that drift across the sky and a photorealistic moon that mirrors the real lunar phase. On top of that, current weather attributes are now fully customizable and the card behaves better inside Home Assistant’s Sections view.

Hope you will enjoy it! :tada:

1.1.0

:cloud: Drifting cloud effect

The cloud effect brings your sky to life for cloudy and partlycloudy conditions. Soft, realistic clouds drift across the card, their speed influenced by the current wind, and dim automatically at night. cloudy renders a fuller grey deck over an overcast sky, while partlycloudy shows a few lighter clouds alongside the sun or moon.

To keep things readable, the current state and temperature now carry a subtle legibility shadow so they stay crisp over the moving clouds (tune or disable it with the weather-forecast-card-effects-text-shadow CSS variable).

:crescent_moon: Photorealistic moon with lunar phase

The moon effect got a major upgrade. It now uses a NASA lunar surface image, glowing above twinkling stars, and is shaded to match the current lunar phase for your Home Assistant location, with the glow following the sunlit limb. Prefer a classic full moon? Set show_moon_phase: false.

You can even swap in your own moon image via the weather-forecast-card-effects-moon-image CSS variable.

:control_knobs: Custom current weather attributes

show_attributes now accepts objects, not just attribute names. You can override an attribute’s value entity, label and icon, or point it at an arbitrary entity entirely, so the current section shows exactly the data you care about. See Custom Attributes in the README.

:triangular_ruler: Respects HA Sections grid row height

When placed in a Sections dashboard, the card now honors the grid row height you set, so it fits your layout cleanly instead of forcing its own height.

1 Like

very cool thank you!
However, in v.1.10 now, if you have too many attributes showing (I have 7 attributes) plus the forecast itself, the card “wrapper” is actually smaller than the actual size of the weather card, meaning the text is overflowing the card itself.
If you remove a few attributes, its OK…

Are you using the card in Sections view? You may need to increase your row height or set it as automatic as the height is otherwise constrained by the parent view.

I did test this in sections view and with constrained row height I can reproduce the issue but of course in that case there is not much the card itself can do.

Oh right, sorry I missed that with the sections view - your are right, that did the trick, fixed!

1 Like

Is there a plan to resolve the rainfall reporting issue? The values are still far too high, roughly ten times what they should be.