Lovelace: Weather card with chart

Marco_Lupieri · August 24, 2021, 6:55pm

For me not working. No card displayed. A try with delete cache browser, but not working.

gdreelin · August 24, 2021, 8:21pm

I got the SVG files download from the link and renamed them to what is on the card page. I put them in path icon: /local/www/weather-icons but they are not showing up. Did you have to resize them or something?

Nick4 · August 24, 2021, 10:49pm

@Yevgeniy: nice, thank you!

Yevgeniy · August 25, 2021, 2:19am

What integration are you using? There are currently issues with Dark sky integration that are not fixed yet.

Have you set the path to the icons in the card settings? For example:
icons: /local/weather-icons-met.no/

I think it is possible to add this option. But at the moment, this is not a priority task.

Marco_Lupieri · August 25, 2021, 2:13pm

I try with Openweathermap and AccuWeather.

gdreelin · August 25, 2021, 2:20pm

@Yevgeniy I had put the path in the card that is what I had posted the location on where the SVG files are located. All I get is blank squares like it is trying to load them up. Maybe I need to make them PNG files instead?

Sand · August 25, 2021, 6:57pm

I don’t quite remember. I think I put the svg files in www folder and then modified the weather-card-chart.js file as below. But this might be totally obsolete since I haven’t used the card in a long time…

constructor() {
    super();
    this.mode = 'daily';
    this.weatherIcons = {
      'clear-night': "/local/01n.svg",
      'cloudy': "/local/04.svg",
      'fog': "/local/15.svg",
      'hail': "/local/12.svg",
...

gdreelin · August 26, 2021, 5:23pm

Ah I see where I went wrong. Thanks

pigeldi · November 2, 2021, 4:19pm

Where in HACS do I find this? If I search for “weather card” I cannot find this one here?!

scstraus · November 3, 2021, 5:23pm

You will need to add the github page as a custom repo into HACS. Then the card will show up as one you can add.

pigeldi · November 4, 2021, 12:11pm

Thanks, that worked.
Now I notice that I would like to have the combination of GitHub - bramkragten/weather-card: Weather Card with animated icons for Home Assistant Lovelace with the animated icons and the graph together with the graph and rain bars of this one here.
In the first one the icons give a better (and nicer looking) direct view on the weather, this one here shows better temperature changes and if there will be a lot of rain.
First world problems

scstraus · November 4, 2021, 1:21pm

If you search the thread, there are some people that did this based on the old version of the card.

Blue · November 6, 2021, 9:52am

Great card, I’m loving using this to display hourly weather data.

A couple of questions

Is it possible to hide the icons at the bottom?
I would love to replace this with chance of rain ( which I also have hourly data for). Has anyone ever done something similar to this?

Yevgeniy · November 7, 2021, 12:40pm

There is no such option at the moment, but I can add that.
What integration are you using? Could you provide attributes for an example?

Blue · November 8, 2021, 3:07am

thanks!

I’m using this integration: GitHub - bremor/bureau_of_meteorology: Custom component for retrieving weather information from the Bureau of Meteorology.

it produces attributes like this in homeassistant:
‘’’

datetime: ‘2021-11-08T02:00:00Z’
temperature: 16
condition: cloudy
precipitation: 0
precipitation_probability: 0
wind_bearing: SSW
wind_speed: 15
‘’’

Truwolf · November 29, 2021, 5:44pm

Hi there,

As you can see in the screenshot weather-card-chart is using the icon ‘clear-day’ all the time, no matter what time of the day. Shouldn’t that be ‘clear-night’ for the night time?

Anything I’ve done wrong?

(Yes, it’s sunny all the time here, I live in Florida )

Thanks,
Truwolf

Truwolf · November 30, 2021, 6:06pm

Answering to my own post in case somebody has the same problem …

I installed the NWS integration and I am now using the kfin_hourly entity and I now see the moon when it’s a clear night .

Still need to figure out the icons for “cloudy night” but it’s definitely progress.

MatthewFlamm · November 30, 2021, 11:27pm

I suggested this distinction, but the Home Assistant devs prefer to not distinguish between day and night for weather. See Add support for partlycloudy-night in weather component · Issue #322 · home-assistant/architecture · GitHub

pocket · December 3, 2021, 12:08am

Reading the issue, the decision seems tied to being short an icon or two. Having once suggested an icon, those in the MDI community came up with two custom icons the same day (virus and virus-outline). It took about a month to get released in an update, and another month to be committed to an HA release. HA has recently been incorporating MDI icon releases more often.

scstraus · December 5, 2021, 10:19am

Same experience for me. It took a bit longer but it got done. And mine was “kite” which is a bit niche. Which ones are missing? Let’s just do it.