Custom Dark Sky Animated Weather Card


#164

I’m sure that in all of this, someone has most likely point out the issue on the pressure. m.p.'s reading is most likely in millibar around 1013 not in in of mercury which would be abt 29.92,or be abt 760.mm of mercury. Again sorry if some one already pointed this out.


#165

no need to be sorry :slight_smile: if I am asking then obviously I haven’t seen this. Is the solution for this ?


#166

@balance82

I asked this in Discord today, and Arsaboo stated it is updated on his repro: https://github.com/arsaboo/homeassistant-config

The way I ended up fixing this was:

  1. Rename the dark-sky-weather-card.js to dark-sky-weather.card.js.old

  2. Create a new dark-sky-weather-card.js in www/custom_ui. Contents for the file here

  3. In the ui-lovelace.yaml file, replaced the contents for the old weather card with the following:

    - id: dark_sky_animated_card
      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_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
    
  4. In the ui-lovelace.yaml file, upped the v# for the custom resource

EXAMPLE:
Before

resources:
   - url: /local/custom_ui/dark-sky-weather-card.js?v=10.1
     type: js

After

resources:
   - url: /local/custom_ui/dark-sky-weather-card.js?v=10.2
     type: js
  1. Save the ui-lovelace.yaml, clear your browser cache and then try again. It should work.

The only thing I see missing was the description, but I am fine with that honestly.


0.83: Fibaro Home Center Hubs, locks via voice, Traccar
#167

Thanks a lot. I did as you suggested and card appear back.

my 5 cents:
analyzing the change
there is only ‘inHg’ -> ‘mbar’ on line 20th
some space removing on lines 92 - 122
and the one you mentioned summary of the weather which you can get back by replacing
line 147 in your new js file
</div>';
with

    </div>
          <br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;

I think the most important is ui-lovelace.yaml change where you add id entity.
Anyway thanks a lot. Cheers.


#168

@evrydayzawrkday
@balance82
thank you for sharing your solutions. I copied and works in Safari, but for some reason chrome says it cant get the css.
Any suggestions?
thank you

Edit. never mind. Working now. Thank you.


#169

I have updated lovelace config, js and css files to include apparent temperature under current temperature.

image


#170

can you share your code?


#171

Here is the code for apparent temperature (feels like temp), I am not a developer but managed to add new entity on the card and it is working perfectly for me :slight_smile:

lovelace 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_apparent_temperature: sensor.dark_sky_apparent_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

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' : 'inHg';
        case 'length':
          return lengthUnit;
        case 'precipitation':
          return lengthUnit === 'km' ? 'mm' : '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 forecast_high_temp = Math.round(hass.states[this.config.entity_forecast_high_temp].state);
  //  const forecast_low_temp = Math.round(hass.states[this.config.entity_forecast_low_temp].state);
    const apparent_temperature = Math.round(hass.states[this.config.entity_apparent_temperature].state);
    const visibility = hass.states[this.config.entity_visibility].state;
    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);
    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, };
    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, };
    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, };
    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, };
    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, };
    const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];
    this.content.innerHTML = `
      <span>
        <span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</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>
      <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>
        </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:weather-fog"></ha-icon></span>${visibility}<span class="unit"> ${getUnit('length')}</span></li>
        </ul>
      </span>
      <div class="forecast clear">
          ${forecast.map(daily => `
              <div class="day">
                  <span class="dayname">${(daily.date).toString().split(' ')[0]}</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>
              </div>`).join('')}
      </div>
      <br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></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);

css:

.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;
  }

  .tempa {
    position: absolute;
    color: var(--primary-text-color);
    right: 1em;
    font-weight: 300;
    margin-left: 0;
    margin-right: 2.5em;
    margin-top: 2.7em;
    font-size: .9em;
  }

  .unitc {
    position: absolute;
    color: var(--primary-text-color);
    font-weight: 300;
    right: .6em;
    vertical-align: super;
    margin-left: 0;
    margin-right: 1.7em;
    margin-top: 2.7em;
    font-size: .9em;
  }


  .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: 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;
    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%;
  }

#172

OMG, this is exactly what I wanted to add to this card - feels like.
Thanks for sharing


#173

This is great, very happy to have this. Thank you for sharing it!


#174

Is there a post or thread or support area - that would show how to setup the custom dark sky animated weather card - from start to finish? (no other weather card has been setup previously). The confusing part for me is when ppl say they added xyz code to the original weather card. and there’s several changes to that as well…


#175

this appears to be broken with the latest update 0.83.2


#176

Works fine in 0.83.2 you need to modify the sensors due to a breaking change:

      - 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_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

#177

Nice! Thanks for sharing!

I’ve got a problem with that: the “Feels like” doesn’t go where it should.
Any suggestion?

Cattura


#178

Hope you have loaded all three files, by looking at your screenshot I can say this is something to do with your .css file

I did a test with removing changes I made in css file and got same error so I believe you might have missed loading .css file

Hope this helps!


#179

I have the same problem in my web browser.

On my mobile device it looks fine.


#180

Checked twice: got the right css.
Which are your changes? I’ll try to understand what’s going wrong.


#181

these are changes gsksim has made to .css file:

  .tempa {
    position: absolute;
    color: var(--primary-text-color);
    right: 1em;
    font-weight: 300;
    margin-left: 0;
    margin-right: 2.5em;
    margin-top: 2.7em;
    font-size: .9em;
  }

  .unitc {
    position: absolute;
    color: var(--primary-text-color);
    font-weight: 300;
    right: .6em;
    vertical-align: super;
    margin-left: 0;
    margin-right: 1.7em;
    margin-top: 2.7em;
    font-size: .9em;
  }

but I would say check you .js file first, these two lines:

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

#182

If you’re using Chrome hit F12 on your computer, then right click the refresh button and select “Empty Cache and Hard Reload” this will refresh all data from the UI.


#183

That’s exactly what I was going to write. It worked.
Damn it, Chrome!

Thank you all.