I can’t get it to show in my Lovelace. Developer tools says /local/custom-weather-card-chart.js:219:37 Uncaught TypeError: Cannot read property ‘attributes’ of null
I don’t doubt this means something quite some but being new to HA I don’t understand what it’s telling me.
Hi everybody !
I’ve got local measures of humidity and pressure (with Netatmo), and I wish to display in this card, like the option for the temperature.
Does it possible to add this function ?
thank you in advance !!
Wanted to see how it looked with met.no icons.
a yes, finally!
the top left icon aligned properly…
have had this for ages, and no effort succeeded yet to get it aligned…
could you please show us the code you use? Would love to get it correct at last…
now looking for these met.no icons they are nice. Where did you get these?
I’ve found this: https://api.met.no/weatherapi/weathericon/1.1/?symbol=2&content_type=image/png on https://api.met.no/weatherapi/weathericon/1.1/documentation#___top but hope you have a link with the full set?
Yes thats where I load them from. Will get back with code later.
thanks, would be really helpful.
I can dl all icons using this https://api.met.no/weatherapi/weathericon/1.1/?symbol=1&is_night=0&content_type=image/svg%2Bxml and change the is_night and the symbol=1 numbers, but that’s not very comfortable…
Mhmm might be an idea to store them locally to not risk getting blocked from the api.
yes, that was what I was planning to do, as with the other weather cards (animated, dark_sky)
most of these files have been directly downloadable, and one didn’t have to change an Api url for that…adding to that, they’re not image files, so one needs to convert each url…
My minor modifications:
I didn’t want the card header but when I set it to blank:
<ha-card header="">
the card padding was off, these changes seemed to help:
.card {
padding: 10px 25px 35px 25px;
Then there was an issue where the tooltip messed up the whole view. I deleted these under main and main div:
margin-top: -10px;
margin-top: -11px;
and then tooltip settings:
tooltips: {
mode: 'neareach',
For icon alignment I think this was all:
.attributes div {
text-align: left;
For the met.no icons I just hardcoded those initially just to see the result. You just need to find the ones you think match the description best.
this.weatherIcons = {
'clear-night': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=1&is_night=1&content_type=image/svg%2Bxml",
'cloudy': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=4&content_type=image/svg%2Bxml",
'fog': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=14&content_type=image/svg%2Bxml",
'hail': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=12&content_type=image/svg%2Bxml",
'lightning': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=6&content_type=image/svg%2Bxml",
'lightning-rainy': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=22&content_type=image/svg%2Bxml",
'partlycloudy': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=3&content_type=image/svg%2Bxml",
'pouring': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=10&content_type=image/svg%2Bxml",
'rainy': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=9&content_type=image/svg%2Bxml",
'snowy': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=13&content_type=image/svg%2Bxml",
'snowy-rainy': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=12&content_type=image/svg%2Bxml",
'sunny': "https://api.met.no/weatherapi/weathericon/1.1/?symbol=1&content_type=image/svg%2Bxml",
'windy': 'hass:weather-windy',
'windy-variant': 'hass:weather-windy-variant'
and then change the html tag:
<img src=[[getWeatherIcon(weatherObj.state)]]>
and
<img src="[[getWeatherIcon(item.condition)]]" width=24px height=24px>
I also wanted the option for decimals in the temperature:
roundNumberD(number, decimals) {
var rounded = Number(Math.round(number+'e'+decimals)+'e-'+decimals);
return rounded;
}
roundNumber(number) {
var rounded = Math.round(number);
return rounded;
}
<div on-click="_tempAttr">[[roundNumberD(tempObj.state,1)]]<sup>[[getUnit('temperature')]]</sup></div>
</template>
<template is="dom-if" if="[[!tempObj]]">
<div on-click="_weatherAttr">[[roundNumberD(weatherObj.attributes.temperature,1)]]<sup>[[getUnit('temperature')]]</sup></div>
Finally I got the graph working with SMHI weather by overriding the time and set it to 12 in:
dateTime.push(new Date(d.datetime).setHours(12));
Probably could be nicer. I was mostly just fumbling my way through ^^
thanks! will update accordingly.
Awesome card. Works great with darksky. Will this be added to HAC’s at all?
yes, that shifted the icons to the correct place, nice!:
this is puzzling me… where is this in you original card?
you’re referencing this:
<ha-card header="[[title]]">
<div class="card">
<div class="main">
<ha-icon icon="[[getWeatherIcon(weatherObj.state)]]"></ha-icon>
<template is="dom-if" if="[[tempObj]]">
<div on-click="_tempAttr">[[roundNumber(tempObj.state)]]<sup>[[getUnit('temperature')]]</sup></div>
</template>
<template is="dom-if" if="[[!tempObj]]">
<div on-click="_weatherAttr">[[roundNumber(weatherObj.attributes.temperature)]]<sup>[[getUnit('temperature')]]</sup></div>
</template>
</div>
<div class="attributes" on-click="_weatherAttr">
<div>
<ha-icon icon="hass:water-percent"></ha-icon> [[roundNumber(weatherObj.attributes.humidity)]] %<br>
<ha-icon icon="hass:gauge"></ha-icon> [[roundNumber(weatherObj.attributes.pressure)]] [[ll('uPress')]]
</div>
<div>
<template is="dom-if" if="[[sunObj]]">
<ha-icon icon="mdi:weather-sunset-up"></ha-icon> [[computeTime(sunObj.attributes.next_rising)]]<br>
<ha-icon icon="mdi:weather-sunset-down"></ha-icon> [[computeTime(sunObj.attributes.next_setting)]]
</template>
</div>
<div>
<ha-icon icon="hass:[[getWindDirIcon(windBearing)]]"></ha-icon> [[getWindDir(windBearing)]]<br>
<ha-icon icon="hass:weather-windy"></ha-icon> [[computeWind(weatherObj.attributes.wind_speed)]] [[ll('uSpeed')]]
</div>
</div>
<ha-chart-base data="[[ChartData]]"></ha-chart-base>
<div class="conditions">
<template is="dom-repeat" items="[[forecast]]">
<div>
<ha-icon icon="[[getWeatherIcon(item.condition)]]"></ha-icon>
</div>
</template>
</div>
</div>
</ha-card>
and you say I need to replace the ha-icon icon with img src ?
well, I guess you did 
forgot the end chevrons… sorry about that.
upped the small icons to 30px which look s just that wee bit better on my displays.
think I’ll try and use the animated icons a try on this card also. Saves some extra api calls and need for an extra online server connection.
new post to keep it clean:
managed the animated icons.
need to find the correct syntax to decide between night and day, as the darksky card does:
'windy-variant': html`cloudy-${this.dayOrNight}-3`,
'exceptional': '!!',
as you can see the icons are not exactly placed, but the they have a different format/size than regular icons, so will require some more fiddling about.
I couldn’t get the large icon to show up large (think it is too small and needs to be blown out of its size, as what happens on the dark sky card also, and getting blurry)
thats why I used yet another (Darksky) icon set for the big icon now just to see if it works.
Don’t think it does, but, well, we can only try 
update
well that wasn’t too nice at all.
for now decided to use the hass icons for the header, and the animated for the forecast:
added an extra set of icon mappings for it (animated) and restored the original ha icon mapping for the header.
Stupid question but what is the green line in the graph since I do not have it? I only have the red temperature line. I use Dark Sky weather.
Is anyone having the problem of a digit missing?
The temperatures in the screenshot below are from 9.5-13.5 degrees, but it’s showing it as 9.5-3.5… At first I thought this was from an upgrade, but I downgraded and still have it. I think it has to do with temps starting at under 10 and going to over 10, but being close enough together to justify the decimal. I don’t see it often, but I’m guessing this is why.
HI, back again…
Since the card displays the incorrect unit for windspeed (m/s while it should be km/h) I’ve tried to change it in the const locale = {} section:
nl: {
tempHi: "Maximum temperatuur",
tempLo: "Minimum temperatuur",
precip: "Neerslag",
uPress: "hPa",
uSpeed: "km/u",
uPrecip: "mm",
cardinalDirections: [
'N', 'N-NO', 'NO', 'O-NO', 'O', 'O-ZO', 'ZO', 'Z-ZO',
'Z', 'Z-ZW', 'ZW', 'W-ZW', 'W', 'W-NW', 'NW', 'N-NW', 'N'
]
}
That doesn’t help though, would you know how to change that?
see this for reference, the native HA card is correct, the local windspeed is about 7 m/s now == 25.2 kn/h
this is using the buienradar platform, which I think had its unit changed recently, since that had the same conversion error.
Now how to get it out of the weather-card-chart…
<div>
<ha-icon icon="hass:[[getWindDirIcon(windBearing)]]"></ha-icon> [[getWindDir(windBearing)]]<br>
<ha-icon icon="hass:weather-windy"></ha-icon> [[computeWind(weatherObj.attributes.wind_speed)]] [[ll('uSpeed')]]
</div>
or could it be the localization doesn’t stick, and it uses the system unit?
this is my main card config:
- type: 'custom:weather-card-chart'
title: Woensdrecht
weather: weather.woensdrecht
locale: nl
before Ive changed this in the card Lovelace: Weather card with chart but even reverting that doesn’t change anything?? now why is this happening…
update
nevermind, please ignore my blackout… forgot to update the version if the custom card in the resources.
simply note the unit might not be correct on windspeed, and be sure to adjust if needed:
computeWind(speed) {
var calcSpeed = speed //Math.round(speed * 1000 / 3600);
return calcSpeed;
}
Missing icons…
Weird issue, since couple of day some of icons in weather card are missing… I found that there is updated version of component available that supposed to fix this issue, but not. Updated version I believe deals with some of materialdesigicons being renamed, so were not displayed. In my case situation is slightly different. For coming week dark sky forecast is consistent - partly cloudy (and precipitation shows rainy). So I’d expect the very same icon to be displayed every day. Yet 4 out of 8 icons are not displayed, so not the icon name issue… I think:
What might be wrong? Any idea?
the mapper in the card is wrong, because the mdi icon is in the for of partly-cloudy, and mapper still uses partlycloudy probably.
constructor() {
super();
this.mode = 'daily';
this.weatherIcons = {
'clear-night': 'hass:weather-night',
'cloudy': 'hass:weather-cloudy',
'fog': 'hass:weather-fog',
'hail': 'hass:weather-hail',
'lightning': 'hass:weather-lightning',
'lightning-rainy': 'hass:weather-lightning-rainy',
'partlycloudy': 'hass:weather-partly-cloudy', ## <--- check here and change if needed
'pouring': 'hass:weather-pouring',
'rainy': 'hass:weather-rainy',
'snowy': 'hass:weather-snowy',
'snowy-rainy': 'hass:weather-snowy-rainy',
'sunny': 'hass:weather-sunny',
'windy': 'hass:weather-windy',
'windy-variant': 'hass:weather-windy-variant'
};
So I changed the line to:
‘partly-cloudy’: ‘hass:weather-partly-cloudy’
But it did not helped, the same result… I do not thing this is the issue, though, since dark sky shows the same icon for all days in forecast:
Clear your web browser’s cache.
