thanks, now it’s work 
1 Like
I am getting exactly the same, but in Chome and on IOS, Safari seems to work.
I am using javascript: latest, and tried to emed the css to no avail.
edit, nvm reinstall IOS app and clearing browser stuff on chrome fixed it.
this is dark-sky-weather-card.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;
}
.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;
}
.forecast {
width: 100%;
margin: 0 auto;
height: 9em;
}
.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: -4em;
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%;
}
this is dark-sky-weather-card.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.core.unit_system.length;
switch (measure) {
case 'air_pressure':
return lengthUnit === 'km' ? 'hPa' : 'mbar';
case 'length':
return lengthUnit;
case 'precipitation':
return lengthUnit === 'km' ? 'mm' : 'in';
default:
return hass.config.core.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 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 class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
<span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</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>`;
}
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);thank you.
I still get the card with the content everthing in one side
edited: had a wrong path for css. now it’s centered but missing the icons
Finish step 1 : This is original post with how to and where files located and what file needed.
Step 2: This post custom dark sky animated weather card.
Nice card. Works great. Thanks.
For some reason it appears to not be working since the 77.2 update - any known issues?
Change the reference in the js code from
hass.config.core.unit_system
to
hass.config.unit_system
2 Likes
Thanks - only found two references in the .js code and no change unfortunately
thanks- sorted… had “v” number in the lovelace file that is now removed. Cheers
Good day, can you tell me which “v”?, which line?
thank you
- url: /local/custom_ui/dark-sky-weather-card.js?
type: js - url: /local/alarm_control_panel-card.js?v=0.3.2
type: js
In the ui.lovelace.yaml file at the top under resources. The alarm card is an example of what I removed
thank you. so in the jss i modified this block
} 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] || ''; } };
and removed the version in resources.
no luck.
Anything else you did?
That was it for me - removed to references of core from that block of code and the change in the ui.yaml file. Might be a browser version? I am using chrome…
never, mind. My mistake.
I was modifying the js of the wrong card 
apologies.
thank you for your help.
Log Details (ERROR)
Sun Sep 02 2018 11:49:18 GMT+1000 (Australian Eastern Standard Time)
https://my-domain.duckdns.org:30443/local/custom_ui/dark-sky-weather-card.js:17:43 Uncaught TypeError: Cannot read property ‘unit_system’ of undefined
So I had edited the dark-sky-weather-card.js as per your post. What do you mean by you were editing the wrong card???
I also never had the version number in the lovelace yaml file:
- url: /local/custom_ui/dark-sky-weather-card.js
type: js
You must use a version number in lovelace.yaml. Each time the .js file changes the version number needs to change in lovelace.yaml. That’s how it knows to load the new code. Without a version number change Lovelace is not loading your changes and using the old code…
Also remember to clear your browser cache after making the changes (close any windows with HA open in them first) and then reopen HA
funny it was working… so url: /local/custom_ui/dark-sky-weather-card.js?v=5 ?