Custom Dark Sky Animated Weather Card

cgtobi · July 19, 2018, 12:45pm

Did you just start with lovelace and did you just create www/custom_ui? If so, did you restart HA?

cgtobi · July 19, 2018, 12:46pm

I’m still on iOS 10 and an old iPhone, maybe that’s the reason, but from what I read on the web iOS 9 and later should support es6. I’ll check later when I get home.

maurizio53 · July 19, 2018, 2:07pm

i always get this error:

2018-07-19 16:02:10 ERROR (MainThread) [frontend.js.latest.201807080] /local/custom_ui/dark-sky-weather-card.js?v=4:89:67 Uncaught TypeError: Cannot read property ‘state’ of undefined

What does it means?

m.p.frankland · July 19, 2018, 2:18pm

That Error typically indicates that one (or more) of your entities is not configured properly. Can you show how you have setup the Dark Sky Sensor platform and the card’s configuration in your ui-lovelace.yaml?

maurizio53 · July 19, 2018, 2:27pm

sensor:
  - platform: darksky
    api_key: !secret darksky_api_key
    longitude: !secret longitude_casa # mettete le vostre coordinate
    latitude: !secret latitude_casa
    language: it
    forecast:
      - 1
      - 2
      - 3
      - 4
      - 5
      - 6
      - 7
    monitored_conditions:
      - summary
      - icon
      - temperature
      - temperature_low
      - temperature_high
      - apparent_temperature
      - humidity
      - hourly_summary
      - daily_summary
      - precip_probability
      - precip_intensity
      - wind_bearing
      - wind_speed
      - pressure

  - 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

Schmidij_ch · July 19, 2018, 2:37pm

yes, i create the folder www/custom_ui (can you see on the screenshot) and now i reboot the host but this wasn’t the solution… any ideas?

m.p.frankland · July 19, 2018, 3:02pm

You are missing - visibility from your sensor config

m.p.frankland · July 19, 2018, 3:07pm

Can you show your dark-sky-weather-card.js code ?

maurizio53 · July 19, 2018, 3:08pm

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' : 'inHg';
    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>
  <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);

m.p.frankland · July 19, 2018, 3:18pm

hmmm… That looks OK… not sure what the issue is.

Just to be safe, can you increment the version# in your ui-lovelace.yaml, save it then clear your browser cache and refresh the page.

The only time I had this issue was when I had the card spelled wrong but yours looks correct.

maurizio53 · July 19, 2018, 3:19pm

which number i must put in the version?

m.p.frankland · July 19, 2018, 4:16pm

Doesn’t matter as long as it is higher that the current value… It looks like you have v=4. The value you change is in your ui-lovelace file not in the .js file. I mis-stated that above.

Change:

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

to

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

m.p.frankland · July 19, 2018, 4:22pm

@maurizio53 I think we may be talking about two different things. The issue you were having should have been solved by adding the visibility sensor setting. See the post above replying to your original message. The issue I was describing above was for a different issue where the card wasn’t even showing up…

Schmidij_ch · July 19, 2018, 4:56pm

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' : 'inHg';
    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>
  <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);

this is the JS

m.p.frankland · July 19, 2018, 5:29pm

@Schmidij_ch the only thing I can see that is different (not necessarily wrong), is that you still have the definition for weather-card.js in your resources section of ui-lovelace.yaml. It doesn’t look like the file still exists in your custom-ui directory. Like I mentioned I don’t know if it is an issue or not but try commenting it out. I am wondering whether if one of the files in the resources section can’t be found then perhaps it doesn’t load any of the resources… It’s a stretch I know but I don’t see anything else that looks wrong and as long as you have restarted your host after creating the www and custom-ui directories it should work…

As always, just to be safe make sure you have cleared your browser cache and / or incremented the version number in ui-lovelace to ensure any new card.js definition gets loaded.

maurizio53 · July 19, 2018, 6:10pm

Ok, thanks… i’ll add that sensor and see what’s going on…

Schmidij_ch · July 20, 2018, 8:02am

So i take a restart.

What i did:

1. Activate the Darksky with the sensors

sensor:
  - platform: darksky
    api_key: XXXX
    language: de
    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

and this work:

2. Create the folder with the files

config \www\custom_ui | \www\icons\weather_icons
Copy the icons and create the .js & .css files

**3. Copy the code from this post and add the ui-lovelace.yaml

Clean the cache and voila… same error
but in the logs ar this:

2018-07-20 08:01:06 ERROR (MainThread) [frontend.js.latest.201807080] http://10.10.100.225:8123/local/custom_ui/dark-sky-weather-card.js?v=5:4:36 SyntaxError: illegal character

shire210 · July 20, 2018, 12:52pm

Try removing the quotes from :

  - type: "custom:dark-sky-weather-card"

in the lovelace-ui file

m.p.frankland · July 20, 2018, 12:54pm

Ok, so it looks like there is an issue with your .js file. The error points to Line 4 position 36. The image below is from my .js file. Take a look at line 4. the value ha-card is inside singe quotes and is identified as a string (yellow).

The following image is from the code you posted earlier… note the character being used for single quote is different and the value is not identified as a string.

there are a couple of other places in the file where this is the case as well…

Schmidij_ch · July 20, 2018, 1:31pm

ahh OK, i replace the ’ - now it’s a string
Restart and have a next Error:

http://10.10.100.225:8123/local/custom_ui/dark-sky-weather-card.js?v=5:133:102 TypeError: hass.states[daily.condition] is undefined