Lovelace: Weather card with chart

Hi, I am getting the message: “custom element doesn’t exist: weather card-chart” on my iMac and iPhone but on my iPad the card works without any problem. All three use Safari. Can anyone help me with this issue as I don’t understand why the card doesn’t work on two devices but works
perfectly on the third device?

OK, so seems that is deeper… It seems that weather-card takes its icons from set of sensor.dark_sky_icon_xx entities (at least when I last checked these sensors were corresponding to what card showed:


So as you can see names of states are even more different. Now the problem is that there is no such mapping, as one I highlighted in component script. So I guess script should be changed from:

‘partlycloudy’: ‘hass:weather-partly-cloudy’,

to:

‘partly-cloudy-day’: ‘hass:weather-partly-cloudy’,

Which I did and it did not worked…
More over, yesterday I noticed that dark_sky icon can take another undefined state: partly-cloudy-night, which has no corresponding entry in mapping table. I tried to add this one too, but again nothing shows in card. I’m assuming that left part is what dark_sky reports and right side is what mdi icon should be used to display status in hassio. Is my understanding of mapping correct? What am I doing wrong that it does not work?
One more question; why hass:icons are used here? Shouldn’t it point mdi:icon?

be sure to have the chart card use a weather entity. the sensors you show are not from the weather component but from the sensor component. they use other states and sensors for the condition.

the mapping I suggested earlier works, or should work, with the small change I made for the partly-clouded. Unfortunately these westher component dont (yet) support some desired conditions natively (like differentiate between day and night)

Hi, this is a great card! I am using hourly-mode (darksky) and I’m wondering if there is a way to get more hours in the chart? I would love to get a forecast of the “full day” in the morning - something like 16 hours instead of 8. Would it be possible to “pull” every second hour instead of each hour? I have looked at the code, but I have no idea how it can be done. Any help is appreciated!

Hi,

So i was looking at this great card and at the one from https://github.com/bramkragten/weather-card
And i was wondering if it was possible to merge both of them to get nice graph and gif icon.

And so i got this :
image
(yeah i now weather is not terrible for us)

I just finished this and it’s my first time with this kind of stuff, so be kind please.
anyway, I will push that into github soon hoping you’ll like it

edit: here is the link https://github.com/bobzer/weather-card

@bobzer

Unfortunatelly after installation I have error
image

How did you install it ?

There is a ui editor by the way

By HACS + 2 lines in Lovelace UI. I can see 4 files in …/weather-card/

That’s strange, can you show exactly?
Did you check against typo or small mistake?

Above is the whole code and its product at the same time.

In Locelace UI
image

in community folder
image

Very short code but I checked it few times

the url you passed is wrong
if you installed from hacs, hacs give the url to you and it should look like :
/community_plugin/weather-card/weather-card.js

on your screenshot i dont see an icons folder do you have it ?

1 Like

Thank You, sorry, I was reading Readme.
I have nothing more in that folder (and I can not find folder icons anywhere) but they do work.

glad it’s working :+1:

This is the best I’ve found so far! I have a number of feature request I would like to discuss but perhaps you should create your own topic for this card so we do not kidnap the current thread?

You’re right I don’t wanna hijack this thread.
You can open an issue in Github like that anyone can see it easily

I am looking forward to getting this to work. I am new and have Home Assistant 0.104.3 on Hassio 3.8 on rpi4 and I read the configuration instructions at https://github.com/sgttrs/lovelace-weather-card-chart and don’t understand where I am supposed to copy custom-weather-card-chart.js to since I don’t see a www directory under the config directory. Secondly, I have learned how to open the Lovelace UI Raw config editor but I don’t know where in Lovelace to paste the following

# Example Lovelace UI config entry
resources:
- type: module
  url: /local/custom-weather-card-chart.js

and

# Example Lovelace UI config entry
  - type: 'custom:weather-card-chart'
    title: Weather
    weather: weather.dark_sky

I have 7 different views with one of them named Weather which is where I want to place the weather card but when I add the weather card I can’t find a way to get the above information into a card in the Weather view. I have tried editing a Manual Card and a Weather Forecast card but I have been unsuccessful.

I had the same problem until I did “reload resources” in the top-right 3-dots menu in the main UI overview page.
Used HACS with custom repo (stored in config/www/community/weather-card) and uses this yaml:

resources:
  - url: /hacsfiles/weather-card/weather-card.js
    type: module
 - type: custom:weather-card
   name: SMHI
   entity: weather.smhi_home
   graph: true

BTW, anyone knows if it’s possible to get the wind speed in m/s instead of in km/h? If I understand things correctly, the weather component uses km/h.

I need help with a small modification of the card.
I want to change the line color on the graph.

How can I do it?

1 Like