It’s in the theme section on the forum, under the share your project section. There’s a collection of different themes. Have a look in there for the Midnight theme.
got the theme working.
i had a typo in one of my includes, so the theme wasnt activating.
1 Like
New version of the card is available in this post: Custom Dark Sky Animated Weather Card.
Major breaking changes:
- The card has been refactored using LitElement instead of HTMLElement.
- The code has been moved around and cleaned up alot.
- The CSS code has been incorporated into the card which allows for configuration of CSS classes from the card configuration. The old .css file is no longer used.
- The following new configuration flags have been added:
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 3
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100
Special note: If you use this version and beyond you must change the resource type for the card to module from js. Failure to do so will result in the card not loading and an error thrown stating there is an invalid token on line 1.
resources:
- type: module
url: /local/custom_ui/dark-sky-weather-card.js?v=7.2
2 Likes
Thank you.
A question: what is benefit about changing to
LitElement?
ok sorry, had a wring version, so deleted my issue on the error log. Only thing i can’t get the icons to display…
/local/weather/animated/
/local/weather/animated/forecast
are the 2 paths I use, and I’ve change to this in the card:
<span class="icon bigger" style="background: none, url(/local/weather/animated/${this.weatherIcons[this.current.conditions]}.svg) no-repeat; background-size: contain;">${this.current.conditions}</span>
and
<br><i class="icon" style="background: none, url(/local/weather/animated/forecast/${this.weatherIcons[this.hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
isn’t that correct?
btw here’s -nl:
const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW','N'];const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW','N'];
too man ‘N’ defined.
Try:
const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW'];
you mean the first and the last? That is correct though for the first 11.25 and last 11.25 degrees to round to N
Shoot you’re right, ignore me 
the /local directory maps to the www directory on disk so assuming you have a www/weather/animated directory with the appropriate icons in it you should be good.
LitElement is much more light weight than HTMLElement. From what I have seen in code from other custom card developers it appears that the Lovelace UI is moving away from HTMLElement to LitElement.
I have noticed that when using HTMLElement the card was using about 20% cpu with animated icons… now that it is using LitElement, CPU usage is down to 8 - 10% with animated icons.
yes, I know, and I use that since forever, and have another custom card use the icons too, so I know all is well:
note is doesn’t take the WZW either…
though I changed this in the card too:
case "nl" :
return windDirections_nl;
and have the 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_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_forecast_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_forecast_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_forecast_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_forecast_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_forecast_daytime_high_temperature_5
entity_forecast_low_temp_1: sensor.dark_sky_forecast_overnight_low_temperature_0
entity_forecast_low_temp_2: sensor.dark_sky_forecast_overnight_low_temperature_1
entity_forecast_low_temp_3: sensor.dark_sky_forecast_overnight_low_temperature_2
entity_forecast_low_temp_4: sensor.dark_sky_forecast_overnight_low_temperature_3
entity_forecast_low_temp_5: sensor.dark_sky_forecast_overnight_low_temperature_4
entity_forecast_icon_1: sensor.dark_sky_forecast_icon_1
entity_forecast_icon_2: sensor.dark_sky_forecast_icon_2
entity_forecast_icon_3: sensor.dark_sky_forecast_icon_3
entity_forecast_icon_4: sensor.dark_sky_forecast_icon_4
entity_forecast_icon_5: sensor.dark_sky_forecast_icon_5
entity_summary_1: sensor.dark_sky_forecast_summary_1
entity_summary_2: sensor.dark_sky_forecast_summary_2
entity_summary_3: sensor.dark_sky_forecast_summary_3
entity_summary_4: sensor.dark_sky_forecast_summary_4
entity_summary_5: sensor.dark_sky_forecast_summary_5
tooltips: true
static_icons: false
sunset: true
locale: nl
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 1
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100The nl locale is working for me… (Note: this is not in the github version yet).
get windDirections() {
const windDirections_en = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'];
const windDirections_fr = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSO','SO','OSO','O','ONO','NO','NNO','N'];
const windDirections_de = ['N','NNO','NO','ONO','O','OSO','SO','SSO','S','SSW','SW','WSW','W','WNW','NW','NNW','N'];
const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW','N'];
switch (this.config.locale) {
case "it" :
case "fr" :
return windDirections_fr;
case "de" :
return windDirections_de;
case "nl" :
return windDirections_nl;
default :
return windDirections_en;
}
}
Config from Raw Editor (Storage Mode)
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_current_conditions: sensor.dark_sky_icon
entity_daily_summary: sensor.dark_sky_daily_summary
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_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
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_summary_1: sensor.dark_sky_summary_1
entity_summary_2: sensor.dark_sky_summary_2
entity_summary_3: sensor.dark_sky_summary_3
entity_summary_4: sensor.dark_sky_summary_4
entity_summary_5: sensor.dark_sky_summary_5
entity_sun: sun.sun
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
id: c99289011d0a46c6a6fd184915ab0515
locale: nl
static_icons: false
sunset: true
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 3
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100
tooltips: true
type: 'custom:dark-sky-weather-card'
what exactly do you mean here, I dl’d the card half an hour ago…? Was that not the correct one?
The nl locale addition is not on Github yet
ah, ok, I made that adjustment as posted above. I take it only that line is necessary?
still puzzled why all is working, tooltips, forecast etc, and only the icons are gone…your previous card showed them perfectly, in the same path.
3 lines are added:
const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW','N'];
and
case "nl" :
return windDirections_nl;
I can only think of two reasons why the icons won’t show
- It can’t find the icon in the path specified
- it can’t resolve the css class
Can you post your entire .js file for me to look at ?
sure, thanks for your time!
import { LitElement, html, } from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';
// Create your custom component
class DarkSkyWeatherCard extends LitElement {
// Declare properties
static get properties() {
return { hass: Object, config: Object, };
}
// #####
// ##### Define Render Template
// #####
_render( {hass, config }) {
// Handle Configuration Flags
var icons = this.config.static_icons ? "static" : "animated";
var sunLeft = this.config.sunset ? this.sunSet.left : "";
var sunRight = this.config.sunset ? this.sunSet.right : "";
// Build HTML
return html`
<style>
${this.style}
</style>
<ha-card class = "card">
<span class="icon bigger" style="background: none, url(/local/weather/animated/${this.weatherIcons[this.current.conditions]}.svg) no-repeat; background-size: contain;">${this.current.conditions}</span>
<span class="temp">${this.current.temperature}</span><span class="tempc">${this.getUOM('temperature')}</span>
<span>
<ul class="variations right">
<li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${this.current.humidity}<span class="unit"> %</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${this.current.pressure}<span class="unit"> ${this.getUOM('air_pressure')}</span></li>
${sunRight}
</ul>
<ul class="variations">
<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${this.current.windBearing} ${this.current.windSpeed}<span class="unit"> ${this.getUOM('length')}/h</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${this.current.visibility}<span class="unit"> ${this.getUOM('length')}</span></li>
${sunLeft}
</ul>
</span>
<div class="forecast clear">
${this.forecast.map(daily => html`
<div class="day fcasttooltip">
<span class="dayname">${(daily.date).toLocaleDateString(this.config.locale,{weekday: 'short'})}</span>
<br><i class="icon" style="background: none, url(/local/weather/animated/forecast/${this.weatherIcons[this.hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
<br><span class="highTemp">${Math.round(this.hass.states[daily.temphigh].state)}${this.getUOM('temperature')}</span>
<br><span class="lowTemp">${Math.round(this.hass.states[daily.templow].state)}${this.getUOM('temperature')}</span>
<div class="fcasttooltiptext">${ this.config.tooltips ? this.hass.states[daily.summary].state : ""}</div>
</div>`)}
</div>
<br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>
</ha-card>
`;
}
// #####
// ##### windDirections" returns set of possible wind directions by specified language
// #####
get windDirections() {
const windDirections_en = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N'];
const windDirections_fr = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSO','SO','OSO','O','ONO','NO','NNO','N'];
const windDirections_de = ['N','NNO','NO','ONO','O','OSO','SO','SSO','S','SSW','SW','WSW','W','WNW','NW','NNW','N'];
const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW','N'];
switch (this.config.locale) {
case "fr" :
return windDirections_fr;
case "de" :
return windDirections_de;
case "nl" :
return windDirections_nl;
default :
return windDirections_en;
}
}
// #####
// ##### dayOrNight : returns day or night depending opn the position of the sun.
// #####
get dayOrNight() {
const transformDayNight = { "below_horizon": "night", "above_horizon": "day", }
return transformDayNight[this.hass.states[this.config.entity_sun].state];
}
// #####
// ##### weatherIcons: returns icon names based on current conditions text
// #####
get weatherIcons() {
return {
'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-${this.dayOrNight}-3`,
'exceptional': '!!',
}
}
// #####
// ##### forecast : returns forcasted weather information for the next 5 days
// #####
get forecast() {
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 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,
summary: this.config.entity_summary_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,
summary: this.config.entity_summary_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,
summary: this.config.entity_summary_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,
summary: this.config.entity_summary_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,
summary: this.config.entity_summary_5, };
return [forecast1, forecast2, forecast3, forecast4, forecast5];
}
// #####
// ##### current : Returns current weather information
// #####
get current() {
var conditions = this.hass.states[this.config.entity_current_conditions].state;
var humidity = this.hass.states[this.config.entity_humidity].state;
var pressure = Math.round(this.hass.states[this.config.entity_pressure].state);
var temperature = Math.round(this.hass.states[this.config.entity_temperature].state);
var visibility = this.hass.states[this.config.entity_visibility].state;
var windBearing = this.windDirections[(Math.round((this.hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
var windSpeed = Math.round(this.hass.states[this.config.entity_wind_speed].state);
return {
'conditions': conditions,
'humidity': humidity,
'pressure': pressure,
'temperature': temperature,
'visibility': visibility,
'windBearing': windBearing,
'windSpeed': windSpeed,
}
}
// #####
// ##### sunSetAndRise: returns set and rise information
// #####
get sunSet() {
var nextSunSet = new Date(this.hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit'});
var nextSunRise = new Date(this.hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit'});
var sunLeft;
var sunRight;
var nextDate = new Date();
nextDate.setDate(nextDate.getDate() + 1);
if (this.hass.states[this.config.entity_sun].state == "above_horizon" ) {
nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise;
return {
'left': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span>${nextSunSet}</li>`,
'right': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span>${nextSunRise}</li>`,
};
} else {
if (new Date().getDate() != new Date(this.hass.states[this.config.entity_sun].attributes.next_rising).getDate()) {
nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise;
nextSunSet = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunSet;
}
return {
'left': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span>${nextSunRise}</li>`,
'right': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span>${nextSunSet}</li>`,
};
}
}
// #####
// ##### style: returns the CSS style classes for the card
// ####
get style() {
// Get config flags or set defaults if not configured
var tooltipBGColor = this.config.tooltip_bg_color || "rgb( 75,155,239)";
var tooltipFGColor = this.config.tooltip_fg_color || "#fff";
var tooltipBorderColor = this.config.tooltip_border_color || "rgb(255,161,0)";
var tooltipBorderWidth = this.config.tooltip_border_width || "1";
var tooltipCaretSize = this.config.tooltip_caret_size || "5";
var tooltipWidth = this.config.tooltip_width || "110"
var tooltipLeftOffset = this.config.tooltip_left_offset || "-12"
var tooltipVisible = this.config.tooltips ? "visible" : "hidden"
return html`
.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;
}
.unit {
font-size: .8em;
}
.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: 20;
}
.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%;
}
.fcasttooltip {
position: relative;
display: inline-block;
}
.fcasttooltip .fcasttooltiptext {
visibility: hidden;
width: ${tooltipWidth}px;
background-color: ${tooltipBGColor};
color: ${tooltipFGColor};
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: ${tooltipBorderColor};
border-width: ${tooltipBorderWidth}px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 50%;
left: 0%;
margin-left: ${tooltipLeftOffset}px;
}
.fcasttooltip .fcasttooltiptext:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -${tooltipCaretSize}px;
border-width: ${tooltipCaretSize}px;
border-style: solid;
border-color: ${tooltipBorderColor} transparent transparent transparent;
}
.fcasttooltip:hover .fcasttooltiptext {
visibility: ${tooltipVisible};
}
}
// #####
// ##### getUOM: gets UOM for specified measure in either metric or imperial
// #####
getUOM(measure) {
const lengthUnit = this.hass.config.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 this.hass.config.unit_system[measure] || '';
}
}
setConfig(config) {
// if (!config.entity) {
// throw new Error('You need to define an entity');
// }
this.config = config;
}
// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
getCardSize() {
return 3 //this.config.entities.length + 1;
}
}
customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);
config:
# https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
- 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_apparent_temp: sensor.dark_sky_apparent_temperature
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_forecast_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_forecast_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_forecast_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_forecast_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_forecast_daytime_high_temperature_5
entity_forecast_low_temp_1: sensor.dark_sky_forecast_overnight_low_temperature_0
entity_forecast_low_temp_2: sensor.dark_sky_forecast_overnight_low_temperature_1
entity_forecast_low_temp_3: sensor.dark_sky_forecast_overnight_low_temperature_2
entity_forecast_low_temp_4: sensor.dark_sky_forecast_overnight_low_temperature_3
entity_forecast_low_temp_5: sensor.dark_sky_forecast_overnight_low_temperature_4
entity_forecast_icon_1: sensor.dark_sky_forecast_icon_1
entity_forecast_icon_2: sensor.dark_sky_forecast_icon_2
entity_forecast_icon_3: sensor.dark_sky_forecast_icon_3
entity_forecast_icon_4: sensor.dark_sky_forecast_icon_4
entity_forecast_icon_5: sensor.dark_sky_forecast_icon_5
entity_summary_1: sensor.dark_sky_forecast_summary_1
entity_summary_2: sensor.dark_sky_forecast_summary_2
entity_summary_3: sensor.dark_sky_forecast_summary_3
entity_summary_4: sensor.dark_sky_forecast_summary_4
entity_summary_5: sensor.dark_sky_forecast_summary_5
tooltips: true
static_icons: false
sunset: true
locale: nl
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 1
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100
resource:
- url: /local/lovelace/resources/dark-sky-weather-card.js?v=7.2
type: module
image files:
hmmm… nothing’s jumping out at me…
can you try removing the template code for the icon and hard code the file name just to see if its anything to do with template resolution. Change ${this.weatherIcons[this.current.conditions]} to one of the Icon file names.
Also what are the values of the sensor.dark_sky_icon, sensor.dark_sky-forecast_icon_1, etc
just to be sure, i simply replace the older card again, with immediate result:
this is in the old card:
url(/local/weather/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}
while te new card uses this.weatherIcons
url(/local/weather/animated/${this.weatherIcons[this.current.conditions]}.svg) and in the other places.
the values are to be seen in the screenshot, all there.
and tooltip also:
sure that is correct?
Yes,
In this version weatherIcons is a property of the class being accessed by a getter. It needs this. to resolve the object the properties are part of.
get weatherIcons() {
return {
'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-${this.dayOrNight}-3`,
'exceptional': '!!',
}
}
Did you try hard coding the Icon name without the template. That will tell you whether it is a template issue or not…
Can you post a screenshot of the card without the icons ?