Custom Dark Sky Animated Weather Card

folrewef · September 17, 2018, 9:27pm

Increased the version number (in ui.yaml) and cleared the cache. Now it works.

koenhaemels · September 17, 2018, 11:54pm

Also have the same problem and can’t find a solution?

folrewef · September 18, 2018, 7:30am

I made the changes to the .js suggested above, i.e.

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] || ‘’;
I increased the version number in ui-lovelace.yaml.
I took away all history/cookies related to home assistant.

This was enough to solve the problem in Safari on Mac, iPhone and iPad.

Schmidij_ch · September 24, 2018, 10:56am

after a update i receive this error:

http://10.10.100.225:8123/local/custom_ui/dark-sky-weather-card.js?v=5:17:43 Uncaught TypeError: Cannot read property 'unit_system' of undefined

anybody have a idea?

Schmidij_ch · September 24, 2018, 11:00am

make the change from:

and update the version im lovelace.yaml
now it’s work, thx!

JFerreira · September 25, 2018, 2:37pm

Hi all,

I’ve been trying to get this card work but seams that is a quite difficult.
I already created all files like in the tutorial:

dark-sky-weather-card.css

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

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

ui-lovelace.yaml code:

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

title: Home

views:
  - 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
      entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
      entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
      entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
      entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
      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

sensors.yaml code

   platform: darksky
api_key: <MY_API_CODE>
forecast:
  - 1
  - 2
  - 3
  - 4
  - 5
language: pt
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

After i restart HA appears like this:

Can any one help me pls?

swifty · September 25, 2018, 3:23pm

You need to use the CSS from here: Custom animated weather card for Lovelace with the adjustment from the first post of this topic.

It looks like you are only using the CSS posted in this topic ?

JFerreira · September 26, 2018, 9:55am

Forget, just a noob problem.
I’m not using Lovelace…i must study more from how i can transform what i have now into new code for lovelace.
Just other question, can i have iframes without using lovelace? meaning, i want to include windy.com into my dashboard.

Regards

wilhelmsen · September 30, 2018, 8:38pm

Sorry last reply, didn’t read without since I’m all into lovelace now

Stefos · October 2, 2018, 3:51pm

My problem is that it doesn’t show the icons. I have them under /local/www/weather_icons/animated

any help?

dark

forget it, just noticed the “icons” that i didn’t have in my path!

folrewef · October 13, 2018, 9:51am

Hi,

I realize a lot of the dark sky sensors are not used in the card. Is there any reason not to remove those sensors if I do not intend to use them?

Dixey · October 13, 2018, 6:29pm

Go to windy.com and select the area, zoom and preferences of what you want as your initial view: capture that url. In your configuration.yaml put something like this into your frontend stuff:

panel_iframe:
  windy:
    title: Radar
    icon: mdi:weather-cloudy
    url: https://www.windy.com/-Radar-lightning-radar?radar,29.621,-97.622,8

(the stuff at the end of the url is my own zooming, area and preferences… your results may vary)

Kaostral · October 13, 2018, 8:01pm

Hi,

I don’t have any problem, card is working fine. Great job.

I just have a quick question, is there any way to modify the language used to show the day of the forecast ?

Edit: Just found out i have blurry images on iOS, does anyone else have it ? From the app and Chrome.

Dixey · October 13, 2018, 10:00pm

This looks like Darksky. If so, it’s not documented in the //darksky but is in the //darksky sensor… try adding the configuration variable “language: (your language code)” in your configuration.yaml

Kaostral · October 13, 2018, 10:20pm

Unfortunately i already set the language option in my sensor, but it didn’t change anything.

Edit: Found my answer in another post, replaced

<span class="dayname">${(daily.date).toString().split(' ')[0]}</span>

with
<span class="dayname">${(new Date(daily.date).toLocaleDateString("fr-FR", {weekday: 'short'})).toString().split(' ')[0]}</span>

karma · October 17, 2018, 9:33am

Hi my friend,
It’s working for you? i tried change to “pt-PT” but still in English…

Kaostral · October 17, 2018, 10:05am

Hey,
Working fine for me :

Did you clear your cache ?

karma · October 17, 2018, 10:32am

Yes i did. But wont change… I try with “fr-FR” but still the same.
This is parte of my dark-sky-weather-card.js:

</span>
  <div class="forecast clear">
      ${forecast.map(daily => `
          <div class="day">
              <span class="dayname">${(new Date(daily.date).toLocaleDateString("fr-FR", {weekday: 'short'})).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>

Kaostral · October 17, 2018, 10:45am

Did you reboot or incremented the version of your js file in the ressources ?

karma · October 17, 2018, 11:19pm

Thanks @Kaostral. I already did clear cache but on the pc in chrome it has not changed. but in chrome by iphone is already pt-pt