Great stuff here. I am just about to move over to using Lovelace and this is the second custom card I have played around with. I currently have Lovelace: Group card working, yet I cannot get this custom card to work.
I have copy/pasted all the configs (.js, .css, darksy sensor, card) from above and also added
@m.p.frankland would an option to have either static or animated icons be possible? I utilise the animated icons and static icons in other places so it doesn’t make sense to just replace the animated with static.
@cjsimmons No need to actually replace the icons… Assuming you have both sets of icons in a directory structure like weather_icons/animated and weather_icons/static, simply replace the references in the dark-sky-weather-card.js file. There are two places that need to be updated. Replace the word animated with the word static in the following two lines of code.
<span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</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>
On a related note I am looking at how to pass flags into the card from the ui-lovelace.yaml file. If I can figure that out It would be possible to conditionaly have either set based on a setting.
It sounds like you are using the dark-sky-weather-card.js code from the original post. Unfortunately, there was a breaking change in Lovelace a few revisions ago that broke that code. As I can no longer edit that original post, I can’t update the code listed there. Please use the card source referenced in this post Custom Dark Sky Animated Weather Card. It has corrections that fix that error.
You will also need to add a version to your ui-lovelace.yaml file to get the new version to load. For example:
Note the v=6.8 Everytime you change the card source code you must use a different v= number in order for Lovelace to realize that the card has changed. It doesn’t matter what the number is, it just needs to be different than the previous number. You can start at 1.0 as you don’t currently have a v= number specified.
Yah, The language stuff you added does seem pretty helpful. It is definitely one of the updates I would like to make to the base code of the card. Any issue with me “borrowing” your code ?
As far as the forecast goes, The way to think about it is:
Day 0 Forecast High = Today’s forecasted high temp
Day 0 Overnight Low = Tonight into tomorrow morning low temp
Day 1 Forecast High = Tomorrow’s forecasted high temp
Day 1 Overnight Low = Tomorrow night into Day 2’s morning low temp
etc …
The confusion is because the overnight low spans two distinct days. In reality it is really up to the individual if they want the low to be the morning low or night low. The DarySky site uses morning low so I tried to match that.
To add to the confusion the card shows the high temp first (on top). If the temps were displayed side by side from low to high it might make more intuitive sense… (hmmm… maybe a change to the card there)
Perfect! I had previously used the code from the original post, however I did switch to the new code and it still was not working. I had no idea about the version number and I was wondering why it was showing up in different people’s code. I also had my darksky sensor configured with a “name” which was causing some troubles. It now works great! Many thanks!
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 ?
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…
