followed all your install instructions with the latest (dlād today) and this is what shows:
no tempā¦and no station name or location?
suggestion/feature request: please add sun up/sun down to your card? I use this in my other custom crd, and it really is a nice addition as is the feels like below the temp:
code:
const windBft = hass.states[this.config.entity_wind_force].state;
const forecast = entity.attributes.forecast.slice(0, 5);
const apparent_temperature = hass.states[this.config.entity_apparent_temperature].state;
var sunSetOrRiseA = new Date(hass.states[this.config.entity_sun].attributes.next_setting);
var sunSetOrRiseIconA = "mdi:weather-sunset-down";
var sunSetOrRiseB = new Date(hass.states[this.config.entity_sun].attributes.next_rising);
var sunSetOrRiseIconB = "mdi:weather-sunset-up";
// A == sunset B == sunrise
if ( hass.states[this.config.entity_sun].state == "above_horizon" ) {
// sun has risen, but hasn't set
// sunset is today (no date displayed). sunrise is tomorrow (display date)
// next is sunset == A
sunSetOrRiseA = sunSetOrRiseA.toLocaleTimeString();
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
sunSetOrRiseB = sunSetOrRiseB.toDateString().substr(0,3) + " " + sunSetOrRiseB.toLocaleTimeString();
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
} else {
// next is sunrise == B
var ss = sunSetOrRiseA;
if ( new Date().getDate() != sunSetOrRiseB.getDate() ) {
// sun hasn't risen, and it's not same day
// so display dates for both
sunSetOrRiseA = sunSetOrRiseB.toDateString().substr(0,3) + " " + sunSetOrRiseB.toLocaleTimeString();
sunSetOrRiseB = ss.toDateString().substr(0,3) + " " + ss.toLocaleTimeString();
} else {
// sun hasn't risen, but it's the same day
// since rise and set are today, no dates displayed
sunSetOrRiseA = sunSetOrRiseB.toLocaleTimeString();
sunSetOrRiseB = ss.toLocaleTimeString();
}
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
sunSetOrRiseIconA = "mdi:weather-sunset-up";
sunSetOrRiseIconB = "mdi:weather-sunset-down";
}
this.content.innerHTML = `
<span class="header" >${currentCondition}</span><span class="weather">${station}</span>
<span class="icon bigger" style="background: none, url(/local/weather/animated/${weatherIcons[currentCondition]}.svg) no-repeat; background-size: contain;"> </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>
<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>
<li><span class="ha-icon"><ha-icon icon=${sunSetOrRiseIconB}></ha-icon></span>${sunSetOrRiseB}</li>
</ul>
<ul class="variations">
<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>Bft: ${windBft} - ${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('visibility')}</span></li>
<li><span class="ha-icon"><ha-icon icon=${sunSetOrRiseIconA}></ha-icon></span>${sunSetOrRiseA}</li>
</ul>
</span>
<div class="forecast clear">
${forecast.map(daily => `
<div class="day">
<span class="dayname">${(new Date(daily.datetime)).toLocaleDateString((navigator.language) ? navigator.language : navigator.userLanguage, {weekday: 'short'}).split(' ')[0]}</span>
<br><i class="icon" style="background: none, url(/local/weather/animated/forecast/${weatherIcons[daily.condition]}.svg);"></i>
<br><span class="highTemp">${daily.temperature}${getUnit('temperature')}</span>
<br><span class="lowTemp">${daily.templow}${getUnit('temperature')}</span>
</div>`).join('')}
</div>`;
}
I have mixed experiences with changing the code of the custom card myself, so would like to ask if you could have a look, and update yours (if you would) yourself to keep it all in working orderā¦
never mind the big -1 in the screen shot, it is a remnant of the transition to HA 0.84.1 and issues with the weather cardsā¦ --UPDATEā(fixed that for now, a and the temp in your card also. I had another cuts weather card in the yaml and it was listed in succession. Apparently the css didnāt like that? dont know if that is even possible, but now that Iāve split this view up, have 1 at the top and the other further down the view, the cards she alright.??):
@Mariusthvdb] The value of currentConditions is actually displayedā¦ Itās just hidden behind the icon. The purpose is to show a value if something bad happens to the icon or if Dark Sky adds a condition that isnāt mapped to an icon.
Not quite sure what your āStationā is. You are referencing an object called entity. What is that object? Where does it come from ?
Okā¦ looks like a bugā¦ The sun was above the horizon when I wrote the code so this code path didnāt get thoroughly testedā¦ will put out an update soon
I figured as much. Still, I want it to show always, sort of a header for the cardā¦ I might rethink the options then, and think of some default icon to show if the weather component goes wrongā¦
Great work! Like it!
Would be nice if the locale setting also changes the wind direction letters.
So āEā (East) would be āOā (Ost) in my language.
