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…
this appears to be broken with the latest update 0.83.2
Works fine in 0.83.2 you need to modify the sensors due to a breaking change:
- 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
Nice! Thanks for sharing!
I’ve got a problem with that: the “Feels like” doesn’t go where it should.
Any suggestion?
1 Like
Hope you have loaded all three files, by looking at your screenshot I can say this is something to do with your .css file
I did a test with removing changes I made in css file and got same error so I believe you might have missed loading .css file
Hope this helps!
I have the same problem in my web browser.
On my mobile device it looks fine.
Checked twice: got the right css.
Which are your changes? I’ll try to understand what’s going wrong.