sorry If I miscommunicated here.
I thought it would be nice it the day was only shown when the event takes place on the next day. which would mean that at this time ( 18.12 hours and sun already set) both next sunrise and sunset needed the day to be displayed.
Ya, I wasnât sure what that weather entity was going to display. Glad you figured it out.
No idea what that error is. I donât have it on my end. The only thing I notice is that your line is different than mine in that you have {currentCondition} and I have {currentConditions} in two locations. But that might be a result of you using different code somewhere else than me. I donât think that would cause that error though.
oh, ya that makes sense, to only display the day name when itâs not today. try this, it doesnât pop an error for me, but since Iâm before sunset here, I canât check that the logic is working properly.
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 ( 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";
}
damn. still learning this JS stuff⌠tested this, it doesnât throw an error at least.
// find this line
if ( Date.getDate() != sunSetOrRiseB.getDate() ) {
// and replace with this
if ( new Date().getDate() != sunSetOrRiseB.getDate() ) {
updating my original post above to reflect this as well. Custom Dark Sky Animated Weather Card
will do. And looking good, now wait till tomorrow 
ive found this to be an issue:
Looking for the entityâs state I think it gets buried under the icon. If I take that out and only use:
this.content.innerHTML = `
<span >${currentCondition}</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>
this is displayed:
now how to display that like this or example:
I think that the text isnât being hidden under, but rather itâs like the imageâs Alt text. When you take away the image the JS displays the text.
Youâd probably have to just display the text somewhere else on the card. And based on what youâre looking to do, looks like you want to get into some heavier card editing than Iâm interested in.
I started poking around with the CSS style page, and figuring out what the different style options did, and experimented with moving stuff around and resizing stuff. Then I added stuff, and saw what happened. This page was a great resource for both CSS and JS. https://www.w3schools.com/
Sorry I canât help more, and good luck!
you have been a major help⌠(understatement)
thanks!
Ill check in with the dedicated thread and see if thereâs an answer to this question.
realize now weâve been spamming the Dark Sky thread, my apologies.
Hi Justin
Using the new code for the last three rows in the card
${forecast[0].date}: ${hass.states[this.config.entity_forecast_sum_1].state}<br>
I get this, a full date. In this case, I have not applied the translation
Instead, using my previous changes to the code to get translated the weekday of the last three rows I found the way how to capitalize the first letter looking here
<span class="threedaysum">
${(forecast[0].date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' }).replace(/^\w/, c => c.toUpperCase())}: ${hass.states[this.config.entity_forecast_sum_1].state}<br>
${(forecast[1].date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' }).replace(/^\w/, c => c.toUpperCase())}: ${hass.states[this.config.entity_forecast_sum_2].state}<br>
${(forecast[2].date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' }).replace(/^\w/, c => c.toUpperCase())}: ${hass.states[this.config.entity_forecast_sum_3].state}<br>
</span>
I have just added .replace(/^\w/, c => c.toUpperCase()) after the first variable
Now it looks really nice.
Thanks!!!
canât you use the css style?:
.dayname {
text-transform: uppercase;
}
or
.dayname {
text-transform: capitalize;
}
depending on your needs
Thanks.
In css style is possible to capitalize inly the first letter?
this is what I do:
.weather {
font-weight: 400;
font-size: 2em;
color: var(--secondary-text-color);
text-align: left;
position: absolute;
top: -1.5em;
right: 0em;
text-transform: capitalize;
word-wrap: break-word;
width: 30%;
}
use in .js:
<li><span class="weather">${currentCondition}</span></li>
display:
while state = cloudy, this transforms to Cloudy.
Probably Iâve choosen this way because Iâve added also the translation of the weekday based on Hassio language and was easier that way.
This is the css code that manage the three rows where I have added the capitalization.
.threedaysum {
display: block;
font-size: .8em;
position: relative;
}
I will consider your code anyway, even if I donât know css codingâŚ
Thanks
I have problems regarding translation of weekdays and with missing text under the 5 days forecastâŚ
Does anybody know how to fix it?
My code (ui-lovelace.yaml):
- type: custom:dark-sky-weather-card id: PREGLED_Vreme 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
My code (configuration.yaml):
- platform: darksky api_key: [secret] latitude: [secret] longitude: [secret] forecast: - 1 - 2 - 3 - 4 - 5 language: sl monitored_conditions: - icon - summary - nearest_storm_distance - nearest_storm_bearing - humidity - temperature - temperature_high - temperature_low - apparent_temperature - apparent_temperature_high - apparent_temperature_low - wind_speed - wind_bearing - precip_type - precip_probability - precip_accumulation - precip_intensity - precip_intensity_max - uv_index - daily_summary - pressure - visibility update_interval: minutes: 5
How to achieve that everything will be shown in Slovenian languageâŚ
Hi @kslb
You should look at the dark-sky-weather-card.js and look for
<div class="forecast clear">
${forecast.map(daily => `
<div class="day">
<span class="dayname">${(daily.date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' })}</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>
<br><span class="highTemp">${Math.round(hass.states[daily.pop].state)}%</span>
</div>`).join('')}
</div>
the dayname row is the one starting with
<span class="dayname">
You can change it as the one above.
Regarding the âmissing textâ you should also refer to the js file
1 Like
Donât know what helps me this? Is it possible and how? Iâm not so well with yaml code⌠probably need some example where and what to copy / add âŚ
Are you using lovelace as user interface?
you should look in the folder config/www/custom-ui for files dark-sky-weather-card.js and dark-sky-weather-card.css
and then look at the code I wrote before in the dark-sky-weather-card.js file
Try:
.threedaysum {
display: block;
font-size: .8em;
position: relative;
text-transform: capitalize;
}
take out the other way of capitalizing the first characters, and see what happens.
This is what CSS is for, creating a style you can use by calling it in the html part, so that you donât have to code it there all the time. You are already using the .css file, so best adapt that to your needs, and keep the .js file as simple as can be.
Hi @woody4165, great work. Can you post your latest working js and css files? Iâd like to insert first 2 lines for today and tomorrow, and 3 lines for next days at the end. Thanks
Thanks @Mariusthvdb
All is working fine, I will use your way of capitalizing!
This is my actual card
and this the code I have used for it thanks to @jusdwy and @Mariusthvdb contribution (hope to havenât forgot anyone)
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.unit_system.length;
switch (measure) {
case 'air_pressure':
return lengthUnit === 'km' ? 'hPa' : 'mbar';
case 'length':
return lengthUnit;
case 'precipitation':
return lengthUnit === 'km' ? 'mm' : 'in';
case 'visibility':
return lengthUnit === 'km' ? 'm' : '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 feelstemperature = Math.round(hass.states[this.config.entity_feelstemp].state);
const visibility = hass.states[this.config.entity_visibility].state*1000;
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);
var sunSetOrRiseA = hass.states[this.config.entity_sun].attributes.next_setting;
sunSetOrRiseA = new Date(sunSetOrRiseA);
var sunSetOrRiseIconA = "mdi:weather-sunset-down";
var sunSetOrRiseB = hass.states[this.config.entity_sun].attributes.next_rising;
sunSetOrRiseB = new Date(sunSetOrRiseB);
var sunSetOrRiseIconB = "mdi:weather-sunset-up";
// A == sunset B == sunrise
if ( hass.states[this.config.entity_sun].state == "above_horizon" ) {
// next is sunset == A
sunSetOrRiseA = sunSetOrRiseA.toLocaleTimeString();
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
sunSetOrRiseB = (sunSetOrRiseB.toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' }).slice(0,3)) + " " + sunSetOrRiseB.toLocaleTimeString();
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
} else {
// next is sunrise == B
var ss = sunSetOrRiseA;
sunSetOrRiseA = sunSetOrRiseB.toLocaleTimeString();
var ssrI = sunSetOrRiseA.lastIndexOf(":");
sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
sunSetOrRiseB = (ss.toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' }).slice(0,3)) + " " + ss.toLocaleTimeString();
ssrI = sunSetOrRiseB.lastIndexOf(":");
sunSetOrRiseB = sunSetOrRiseB.substr(0,ssrI) + sunSetOrRiseB.substr(ssrI+4);
sunSetOrRiseIconA = "mdi:weather-sunset-up";
sunSetOrRiseIconB = "mdi:weather-sunset-down";
}
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,
pop: this.config.entity_forecast_pop_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,
pop: this.config.entity_forecast_pop_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,
pop: this.config.entity_forecast_pop_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,
pop: this.config.entity_forecast_pop_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,
pop: this.config.entity_forecast_pop_5, };
const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];
this.content.innerHTML = `
<div>
<span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
<div class="divtemp">
<span class="temp">${temperature}<span class="tempc"> ${getUnit('temperature')}</span></span>
<span class="feelslike">Percepita<span class="feelstemp">${feelstemperature}<span class="feelstempc">${getUnit('temperature')}</span></span></span>
</div>
</div>
<span class="tdaysum">Oggi: ${hass.states[this.config.entity_today_summary].state} <br>Previsione: ${hass.states[this.config.entity_daily_summary].state}</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>
<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>${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:eye"></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">${(daily.date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' })}</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>
<br><span class="highTemp">${Math.round(hass.states[daily.pop].state)}%</span>
</div>`).join('')}
</div>
<span class="threedaysum">
${(forecast[0].date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' })}: ${hass.states[this.config.entity_forecast_sum_1].state}<br>
${(forecast[1].date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' })}: ${hass.states[this.config.entity_forecast_sum_2].state}<br>
${(forecast[2].date).toLocaleDateString(hass.selectedLanguage || hass.language, { weekday: 'short' })}: ${hass.states[this.config.entity_forecast_sum_3].state}<br>
</span>
<br></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);
and 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;
max-width: 600px;
/* min-width: 200px; */
}
.ha-icon {
height: 18px;
margin-right: 5px;
color: var(--paper-item-icon-color);
}
.divtemp {
position: absolute;
}
.temp {
font-weight: 300;
font-size: 4em;
color: var(--primary-text-color);
}
.tempc {
font-weight: 300;
font-size: .5em;
vertical-align: super;
color: var(--primary-text-color);
position: relative;
top: -1px;
left: -5px;
}
.feelslike {
font-weight: 300;
font-size: 1em;
position: relative;
top: -32px;
left: 5px;
}
.feelstemp {
font-size: 2em;
font-weight: 300;
position: relative;
top: 32px;
left: -58px;
}
.feelstempc {
font-size: .6em;
font-weight: 300;
vertical-align: super;
}
.tdaysum {
display: block;
font-size: .8em;
position: relative;
top: 55px;
}
.threedaysum {
display: block;
font-size: .8em;
position: relative;
text-transform: capitalize;
}
.variations {
display: inline-block;
font-weight: 300;
color: var(--primary-text-color);
list-style: none;
position: relative;
margin-left: -2em;
margin-top: 4em;
text-transform: capitalize;
}
.variations.right {
position: absolute;
right: 1em;
margin-left: 0;
margin-right: 1em;
text-transform: capitalize;
}
.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;
right: -20px;
}
.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%;
}