Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
41

You should include forecast in the darksky component

platform: darksky
api_key: !secret darksky_api
name: "Dark Sky"
forecast:
  - 1
  - 2
  - 3
  - 4
  - 5
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
1 Like
42

thanks, now it’s work :slight_smile:

1 Like
43

I am getting exactly the same, but in Chome and on IOS, Safari seems to work.

I am using javascript: latest, and tried to emed the css to no avail.

edit, nvm reinstall IOS app and clearing browser stuff on chrome fixed it.

44

@docbobo
can you please share your entire JS. thank you. I dont know how to embed css.

45

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

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

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

.forecast {
  width: 100%;
  margin: 0 auto;
  height: 9em;
}

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

this is 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.core.unit_system.length;
      switch (measure) {
        case 'air_pressure':
          return lengthUnit === 'km' ? 'hPa' : 'mbar';
        case 'length':
          return lengthUnit;
        case 'precipitation':
          return lengthUnit === 'km' ? 'mm' : 'in';
        default:
          return hass.config.core.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 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 class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
      <span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</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>`;
  }

  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);
46

thank you.
I still get the card with the content everthing in one side

edited: had a wrong path for css. now it’s centered but missing the icons

47

Finish step 1 : This is original post with how to and where files located and what file needed.

Step 2: This post custom dark sky animated weather card.

48

@Sunonline
id done another path mistake. Now all working.
thank you very much for your help.

49

Nice card. Works great. Thanks.

50

For some reason it appears to not be working since the 77.2 update - any known issues?

51

Change the reference in the js code from

hass.config.core.unit_system

to

hass.config.unit_system
2 Likes
52

Thanks - only found two references in the .js code and no change unfortunately

53

thanks- sorted… had “v” number in the lovelace file that is now removed. Cheers

54

Good day, can you tell me which “v”?, which line?
thank you

55
  • url: /local/custom_ui/dark-sky-weather-card.js?
    type: js
  • url: /local/alarm_control_panel-card.js?v=0.3.2
    type: js

In the ui.lovelace.yaml file at the top under resources. The alarm card is an example of what I removed

56

thank you. so in the jss i modified this block

}

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] || '';
  }
};

and removed the version in resources.
no luck.
Anything else you did?

57

That was it for me - removed to references of core from that block of code and the change in the ui.yaml file. Might be a browser version? I am using chrome…

58

never, mind. My mistake.
I was modifying the js of the wrong card :wink:
apologies.

thank you for your help.

59

Log Details (ERROR)

Sun Sep 02 2018 11:49:18 GMT+1000 (Australian Eastern Standard Time)

https://my-domain.duckdns.org:30443/local/custom_ui/dark-sky-weather-card.js:17:43 Uncaught TypeError: Cannot read property ‘unit_system’ of undefined

So I had edited the dark-sky-weather-card.js as per your post. What do you mean by you were editing the wrong card???

I also never had the version number in the lovelace yaml file:

- url: /local/custom_ui/dark-sky-weather-card.js
  type: js
60

You must use a version number in lovelace.yaml. Each time the .js file changes the version number needs to change in lovelace.yaml. That’s how it knows to load the new code. Without a version number change Lovelace is not loading your changes and using the old code…

Also remember to clear your browser cache after making the changes (close any windows with HA open in them first) and then reopen HA