Thanks for that!
1 Like
I got all the darksky sensors showing up in HA, but the card in Lovelace is not coming up. Getting the following error in the log after I select the view or refresh the page which is triggering service: Service system_log/write called
/local/custom_ui/dark-sky-weather-card.js?v=4:17:13 TypeError: hass.config.core is undefined
Anyone an idea what might be causing this error?
ignore, was a FF cache issue.
I’ve been using this card for a few months now and it works great. I’ve never had any issue displaying the card however I noticed for awhile now that whenever I go to the lovelace page that displays this card my cpu shoots up to 80% and stays there until I move to another page. It then drops back down to less than 20%. I temporarily removed this card and went back to the page and the cpu stayed below 20% so I know this card is impacting the cpu usage. I tried it on FF also and it didn’t go quite as high but was still near 60%.
Is anyone else seeing this or have an idea why this is happening? I don’t see any errors in the page.
I really like this card and want to continue using it however I would have to make a change if I can’t figure out why the demand on cpu is so high.
I’ve followed tutorial and all work great! Only 2 questions:
- How can I translate SUN, MON, TUE, … in italian (Lun, Mar, Mer, …) ? I’ve set “language: it” under “- platform: darksky” but, name of days don’t change.
- How can I take old non-lovelace UI function, where when I click on a icon weather, a popup appear with the history of weather?
I was getting load of errors being thrown in the logs with the final being
“dark-sky-weather-card.js?v=9:17:9 TypeError: hass.config.core is undefined”
I found this here.
After making the changes to the JS code using find and replace ( find hass.config.core.unit_system replace hass.config.unit_system [all]) it solved my problems and everything is working as designed.
Running 0.82.1
Hi,
I have a problem with the card.
It only display DIM (Sunday) for every day and I don’t manage to get minTemp:
I justed followed the instructions and didn’t made any change on it.
Hi mtannerauo,
do you use the original js and css? I’m very confused because I’ve tried lot of combinatons from this topic but I allways get the doesn’t exist result.
Hi there,
Does any one have issues after latest update with this card.
I am getting:
local/custom_ui/dark-sky-weather-card.js?v=5:135:85 Uncaught TypeError: Cannot read property 'state' of undefined
I remember I had similar error when I was just adding this card to the HA, but then it resolves itself. I am not sure if this will happen again this time 
The line it’s been complaining about in js file:
<span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>
2 Likes
I’m sure that in all of this, someone has most likely point out the issue on the pressure. m.p.'s reading is most likely in millibar around 1013 not in in of mercury which would be abt 29.92,or be abt 760.mm of mercury. Again sorry if some one already pointed this out.
1 Like
no need to be sorry if I am asking then obviously I haven’t seen this. Is the solution for this ?
I asked this in Discord today, and Arsaboo stated it is updated on his repro: https://github.com/arsaboo/homeassistant-config
The way I ended up fixing this was:
-
Rename the dark-sky-weather-card.js to dark-sky-weather.card.js.old
-
Create a new dark-sky-weather-card.js in www/custom_ui. Contents for the file here
-
In the ui-lovelace.yaml file, replaced the contents for the old weather card with the following:
- id: dark_sky_animated_card type: custom:dark-sky-weather-card entity_sun: sun.sun entity_daily_summary: sensor.dark_sky_daily_summary entity_current_conditions: sensor.dark_sky_icon entity_humidity: sensor.dark_sky_humidity entity_pressure: sensor.dark_sky_pressure entity_temperature: sensor.dark_sky_temperature entity_visibility: sensor.dark_sky_visibility entity_wind_bearing: sensor.dark_sky_wind_bearing entity_wind_speed: sensor.dark_sky_wind_speed entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1 entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2 entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3 entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4 entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5 entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1 entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2 entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3 entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4 entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5 entity_forecast_icon_1: sensor.dark_sky_icon_1 entity_forecast_icon_2: sensor.dark_sky_icon_2 entity_forecast_icon_3: sensor.dark_sky_icon_3 entity_forecast_icon_4: sensor.dark_sky_icon_4 entity_forecast_icon_5: sensor.dark_sky_icon_5 -
In the ui-lovelace.yaml file, upped the v# for the custom resource
EXAMPLE:
Before
resources:
- url: /local/custom_ui/dark-sky-weather-card.js?v=10.1
type: js
After
resources:
- url: /local/custom_ui/dark-sky-weather-card.js?v=10.2
type: js
- Save the ui-lovelace.yaml, clear your browser cache and then try again. It should work.
The only thing I see missing was the description, but I am fine with that honestly.
2 Likes
Thanks a lot. I did as you suggested and card appear back.
my 5 cents:
analyzing the change
there is only ‘inHg’ -> ‘mbar’ on line 20th
some space removing on lines 92 - 122
and the one you mentioned summary of the weather which you can get back by replacing
line 147 in your new js file
</div>';
with
</div>
<br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;
I think the most important is ui-lovelace.yaml change where you add id entity.
Anyway thanks a lot. Cheers.
1 Like
@evrydayzawrkday
@balance82
thank you for sharing your solutions. I copied and works in Safari, but for some reason chrome says it cant get the css.
Any suggestions?
thank you
Edit. never mind. Working now. Thank you.
I have updated lovelace config, js and css files to include apparent temperature under current temperature.
4 Likes
can you share your code?
2 Likes
Here is the code for apparent temperature (feels like temp), I am not a developer but managed to add new entity on the card and it is working perfectly for me
lovelace config:
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_conditions: sensor.dark_sky_icon
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_temperature: sensor.dark_sky_temperature
entity_apparent_temperature: sensor.dark_sky_apparent_temperature
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.dark_sky_wind_speed
entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5
entity_forecast_icon_1: sensor.dark_sky_icon_1
entity_forecast_icon_2: sensor.dark_sky_icon_2
entity_forecast_icon_3: sensor.dark_sky_icon_3
entity_forecast_icon_4: sensor.dark_sky_icon_4
entity_forecast_icon_5: sensor.dark_sky_icon_5
js:
class DarkSkyWeatherCard extends HTMLElement {
set hass(hass) {
if (!this.content) {
const card = document.createElement('ha-card');
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/local/custom_ui/dark-sky-weather-card.css';
card.appendChild(link);
this.content = document.createElement('div');
this.content.className = 'card';
card.appendChild(this.content);
this.appendChild(card);
}
const getUnit = function (measure) {
const lengthUnit = hass.config.unit_system.length;
switch (measure) {
case 'air_pressure':
return lengthUnit === 'km' ? 'hPa' : 'inHg';
case 'length':
return lengthUnit;
case 'precipitation':
return lengthUnit === 'km' ? 'mm' : 'in';
default:
return hass.config.unit_system[measure] || '';
}
};
const transformDayNight = {
"below_horizon": "night",
"above_horizon": "day",
}
const sunLocation = transformDayNight[hass.states[this.config.entity_sun].state];
const weatherIcons = {
'clear-day': 'day',
'clear-night': 'night',
'rain': 'rainy-5',
'snow': 'snowy-6',
'sleet': 'rainy-6',
'wind': 'cloudy',
'fog': 'cloudy',
'cloudy': 'cloudy',
'partly-cloudy-day': 'cloudy-day-3',
'partly-cloudy-night': 'cloudy-night-3',
'hail': 'rainy-7',
'lightning': 'thunder',
'thunderstorm': 'thunder',
'windy-variant': `cloudy-${sunLocation}-3`,
'exceptional': '!!',
}
const windDirections = [
'N',
'NNE',
'NE',
'ENE',
'E',
'ESE',
'SE',
'SSE',
'S',
'SSW',
'SW',
'WSW',
'W',
'WNW',
'NW',
'NNW',
'N'
];
var forecastDate1 = new Date();
forecastDate1.setDate(forecastDate1.getDate()+1);
var forecastDate2 = new Date();
forecastDate2.setDate(forecastDate2.getDate()+2);
var forecastDate3 = new Date();
forecastDate3.setDate(forecastDate3.getDate()+3);
var forecastDate4 = new Date();
forecastDate4.setDate(forecastDate4.getDate()+4);
var forecastDate5 = new Date();
forecastDate5.setDate(forecastDate5.getDate()+5);
const currentConditions = hass.states[this.config.entity_current_conditions].state;
const humidity = hass.states[this.config.entity_humidity].state;
const pressure = Math.round(hass.states[this.config.entity_pressure].state);
const temperature = Math.round(hass.states[this.config.entity_temperature].state);
// const forecast_high_temp = Math.round(hass.states[this.config.entity_forecast_high_temp].state);
// const forecast_low_temp = Math.round(hass.states[this.config.entity_forecast_low_temp].state);
const apparent_temperature = Math.round(hass.states[this.config.entity_apparent_temperature].state);
const visibility = hass.states[this.config.entity_visibility].state;
const windBearing = windDirections[(Math.round((hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
const windSpeed = Math.round(hass.states[this.config.entity_wind_speed].state);
const forecast1 = { date: forecastDate1,
condition: this.config.entity_forecast_icon_1,
temphigh: this.config.entity_forecast_high_temp_1,
templow: this.config.entity_forecast_low_temp_1, };
const forecast2 = { date: forecastDate2,
condition: this.config.entity_forecast_icon_2,
temphigh: this.config.entity_forecast_high_temp_2,
templow: this.config.entity_forecast_low_temp_2, };
const forecast3 = { date: forecastDate3,
condition: this.config.entity_forecast_icon_3,
temphigh: this.config.entity_forecast_high_temp_3,
templow: this.config.entity_forecast_low_temp_3, };
const forecast4 = { date: forecastDate4,
condition: this.config.entity_forecast_icon_4,
temphigh: this.config.entity_forecast_high_temp_4,
templow: this.config.entity_forecast_low_temp_4, };
const forecast5 = { date: forecastDate5,
condition: this.config.entity_forecast_icon_5,
temphigh: this.config.entity_forecast_high_temp_5,
templow: this.config.entity_forecast_low_temp_5, };
const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];
this.content.innerHTML = `
<span>
<span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
<ul style="list-style-type:none">
<li><span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span></li>
<li><span class="tempa">Feels like ${apparent_temperature}</span><span class="unitc"> ${getUnit('temperature')}</span></li>
</ul>
</span>
<span>
<ul class="variations right">
<li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${humidity}<span class="unit"> %</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${pressure}<span class="unit"> ${getUnit('air_pressure')}</span></li>
</ul>
<ul class="variations">
<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${visibility}<span class="unit"> ${getUnit('length')}</span></li>
</ul>
</span>
<div class="forecast clear">
${forecast.map(daily => `
<div class="day">
<span class="dayname">${(daily.date).toString().split(' ')[0]}</span>
<br><i class="icon" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
<br><span class="highTemp">${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}</span>
<br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>
</div>`).join('')}
</div>
<br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;
}
setConfig(config) {
if (!config.entity_current_conditions ||
!config.entity_humidity ||
!config.entity_pressure ||
!config.entity_temperature ||
!config.entity_visibility ||
!config.entity_wind_bearing ||
!config.entity_wind_speed) {
throw new Error('Please define entities');
}
this.config = config;
}
// @TODO: This requires more intelligent logic
getCardSize() {
return 3;
}
}
customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);
css:
.clear {
clear: both;
}
.card {
margin: auto;
padding-top: 2em;
padding-bottom: 1em;
padding-left: 1em;
padding-right:1em;
position: relative;
}
.ha-icon {
height: 18px;
margin-right: 5px;
color: var(--paper-item-icon-color);
}
.temp {
font-weight: 300;
font-size: 4em;
color: var(--primary-text-color);
position: absolute;
right: 1em;
}
.tempa {
position: absolute;
color: var(--primary-text-color);
right: 1em;
font-weight: 300;
margin-left: 0;
margin-right: 2.5em;
margin-top: 2.7em;
font-size: .9em;
}
.unitc {
position: absolute;
color: var(--primary-text-color);
font-weight: 300;
right: .6em;
vertical-align: super;
margin-left: 0;
margin-right: 1.7em;
margin-top: 2.7em;
font-size: .9em;
}
.tempc {
font-weight: 300;
font-size: 1.5em;
vertical-align: super;
color: var(--primary-text-color);
position: absolute;
right: 1em;
margin-top: -14px;
margin-right: 7px;
}
.variations {
display: inline-block;
font-weight: 300;
color: var(--primary-text-color);
list-style: none;
margin-left: -2em;
margin-top: 4.5em;
}
.variations.right {
position: absolute;
right: 1em;
margin-left: 0;
margin-right: 1em;
}
.unit {
font-size: .8em;
}
.forecast {
width: 100%;
margin: 0 auto;
height: 10em;
}
.day {
display: block;
width: 20%;
float: left;
text-align: center;
color: var(--primary-text-color);
border-right: .1em solid #d9d9d9;
line-height: 2;
box-sizing: border-box;
}
.dayname {
text-transform: uppercase;
}
.forecast .day:first-child {
margin-left: 0;
}
.forecast .day:nth-last-child(1) {
border-right: none;
margin-right: 0;
}
.highTemp {
font-weight: bold;
}
.lowTemp {
color: var(--secondary-text-color);
}
.icon.bigger {
width: 10em;
height: 10em;
margin-top: -3em;
position: absolute;
left: 0em;
}
.icon {
width: 50px;
height: 50px;
margin-right: 5px;
display: inline-block;
vertical-align: middle;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
text-indent: -9999px;
}
.weather {
font-weight: 300;
font-size: 1.5em;
color: var(--primary-text-color);
text-align: left;
position: absolute;
top: -0.5em;
left: 6em;
word-wrap: break-word;
width: 30%;
}
2 Likes
OMG, this is exactly what I wanted to add to this card - feels like.
Thanks for sharing
This is great, very happy to have this. Thank you for sharing it!
Is there a post or thread or support area - that would show how to setup the custom dark sky animated weather card - from start to finish? (no other weather card has been setup previously). The confusing part for me is when ppl say they added xyz code to the original weather card. and there’s several changes to that as well…