Lovelace: Weather card with chart

Well, after a closer read, I was wrong (apologies to @MatthewFlamm). The issue was not a lack of an icon; there are already icons for clear night (weather-night) and partially-cloudy night (weather-night-partly-cloudy). The issue was when to use them. The proposal was to create a new state(s) for the backend, versus determining day vs night independently in the frontend (i.e. no dependency on the sun integration).

FYI, much of my interest in the topic is the impending decommissioning of the DarkSky API. Iā€™m sure Iā€™m not alone. Iā€™d like to use NWS, but OpenWeatherMap is an option. Personally, I have no reluctance with using the sun integration.

This looks promising as a replacement. Not sure what icons it uses.

1 Like

Icons are more a function of the weather card being used rather than the API. That said, a good match is certainly useful, but the cards designed specifically for DarkSky do have a certain amount of curb appeal.

So, thanks for the link. Itā€™s something to consider if I donā€™t get NWS working with my preferred lovelace card. Itā€™s mostly working with my own templates, but there are several variables yet to go (still learning). If I can get things sorted out, Iā€™ll move to a chart or two. Itā€™ll also be nice to feel like Iā€™m getting something for my tax dollars.

Well if you canā€™t get something for your tax dollar, the other one is based on US tax dollars, so at least get something for ours :wink:

1 Like

Hi, already detected this component. Itā€™s exactly I was looking for.
All what Iā€™d like to have as an option is a longer time range (7 days instead of 5, 24 hours instead of 9)
Does that makes sense for an enhencement?

1 Like

Hello Yevgeniy,

Really love this card, especially after I have figured out how to use it with the animated icons.

However, IMHO the number of hours packed into the card is too many. It is almost impossible to read the temperatures without going really very close to the screen. You have figured out a very cool way to read the screen width and adopt how many hours are displayed in which font size.

Is there a way to show less via a parameter? In below example it shows 17 and it would be cool if I could tell the card ā€œshow only 75% of standardā€. This would allow to display the data ā€œbiggerā€ and make it more readable.

Or maybe other users would like it to be even more packed and want"125%" ā€¦

Thanks,
Truwolf

Hello. Reducing the number of forecasts on a card will not make the values more readable. I think itā€™s better to make it possible to change the font size on the chart.

Yeah, whatever works :grin:

The number of forecasts depends on how many of them the integration provides and on the width of the screen on which the card is displayed. More forecasts can cause icons to shift away from column centers

And to be able to choose the time period of each slice to be able to group multiple hours together into a slice and show as many hours as you want with however many slices you want and the right font size you like.

@scstraus +1

Hi guys, does anyone manages to make the weather icons bigger using the icons_size parameter?

I am going absolutely nuts about it. I just simply want to make the icons a lot bigger, but no matter what I do, it always displays as 25px.

So I even tried modifying the code of the card and hardcoding all potential icons size everywhere, but it still is 25px no matter what I do. Even worse, the chrome debugger shows that the size property is still --mdc-icon-size, 25px. But i donā€™t see anywhere in the card file this --mdc-icon-size :neutral_face:

1 Like

Which icon set are you using? Keep in mind that the icons_size parameter only applies to custom svg icons.

Oooooooohhhhh i feel stupid. I am using the default icon set!

Although I still donā€™t understand how I did not achieve to make the default icons bigger, I will try with custom icons thank you!

I try to use this card with dwd weather, but i always get an Please, define entity in the card config

type: custom:weather-chart-card
weather: weather.dwd_weather_xxxxx

What am i doing wrong?

The weather variable has been removed, use entity instead. You can see an example in the documentation.

Thank you! Now it works.
I found a very nice icon set: GitHub - manifestinteractive/weather-underground-icons: Weather Underground Icons ( PNG & SVG )

Hi, thanks for the link:
Could you describe the way to implement these icons.
Sorry but I could not manage so far. There is something, I made wrong but I donā€™t know what.

adapt the file names like this https://user-images.githubusercontent.com/33804747/130360372-76d70c42-986c-46e3-b9b5-810f0317f94f.png
Then put the icons f.e. into /config/www/icon/ā€¦ and add this to the card config:
icons: /local/icon/weather/underground/white/
btw, there is no icon for wind

1 Like

It worked, thank you