Custom Dark Sky Animated Weather Card

thanks! that works, though Id rather have the station name as header, so tried this,

card.header = hass.states[this.config.entity_weather].attributes.friendly_name;
which does the job :+1:

the state should already appear (as stated in line 118, but doesn’t yet…)

does this ring any bells, I am seeing this frequently in the log and inspector:

line 118 is

this.content.innerHTML = `

followed in 119 by

  <span class="icon bigger" style="background: none, url(/local/weather/animated/${weatherIcons[currentCondition]}.svg) no-repeat; background-size: contain;">${currentCondition}</span>`

I don’t know an easy way to just capitalize the first letter, sorry.

It’s gonna be something like this, but I don’t have time right now to play with it.

var d = new Date();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
days[d.getDay()];

You could probably apply something like that to cover all the days in the card instead of doing the hass.language stuff each time.

And the sunrise not showing the day name was based on @Mariusthvdb request, and I liked the look. Here’s the code to make it display day name for both, of course you’ll need to update for the language settings.

    if ( hass.states[this.config.entity_sun].state == "above_horizon" ) {
        // next is sunset == A
        sunSetOrRiseA = sunSetOrRiseA.toDateString().substr(0,3) + " " + 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;
        sunSetOrRiseA = sunSetOrRiseB.toDateString().substr(0,3) + " " + sunSetOrRiseB.toLocaleTimeString();
        var ssrI = sunSetOrRiseA.lastIndexOf(":");
        sunSetOrRiseA = sunSetOrRiseA.substr(0,ssrI) + sunSetOrRiseA.substr(ssrI+4);
        sunSetOrRiseB = ss.toDateString().substr(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";     
    }

Hope that helps.

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 :wink:

58

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:
21

now how to display that like this or example:

48

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

06

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.

30

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:

33

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…

Image2

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.