Custom Dark Sky Animated Weather Card


#122

Hi!

I have tried to get this dark sky weather card to work and i managed to get passed some errors but im stucked getting this error in home assistant lovelace gui:

Please define entities

{
“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”
}


#123

I am so very new at this and I’m suffering from newbieitist, it’s a thing now…

I am getting this vague error in my home-assistant.log file

2018-10-23 14:42:15 ERROR (MainThread) [frontend.js.latest.201810120] http://TLD.com:8123/local/custom_ui/dark-sky-weather-card.js?v=6:85:82 Uncaught TypeError: Cannot read property ‘state’ of undefined

I’ve updated the js to remove the .core, I’ve incremented the version in ui-lovelace for the JS and cleared the cache, cookies, and other site data.
I can’t seem to get passed this error…

Update:

So I resolved this, fresh eyes this morning while trying to figure out another issue noticed that there was an error in my sensors.yaml file. I was lacking a single space in front of ‘- platform’

Put the space in and now I have a beautiful animated weather card!


#124

I know it’s been a while since you posted this but how did you get the picture at the top of the weather card?


#125

I have had this card working for 2 months now, I updated to 0.81.0 today and everything was ok but I was just playing around with some cards on the same page as this weather card (didn’t touch its config) and now I’m getting this

here is my console

image


#126

Jim! Tsk tsk!!! There are maybe 10 threads about this! It’s a known bug and we are awaiting 0.81.1 hot fix soon…


#127

ok thanks I assumed it wasn’t related to update as it had been working prior to this on 0.81.0


#128

Yeah they made an error after 0.81.0b2 and it went straight to release instead of b3.


#129

Issue still exists in 0.81.1


#130

do you have 0.81.1 or does the dev tools show 0.81.0dev or something like that?


#131

image


#132

well that is odd. Peeps on discord say it fixed it for them


#133

Same. I’m going to try to get it figured, I’ll let you know if I do.


#134

@Kaostral - I found the solution here: Custom animated weather card for Lovelace

Basically, if the SVG used for the large icon is also used for the small icon, in Safari, that causes blurring. A bit silly to do, but I duplicated the /animated/ folder and named them /animated.small/ and /animated.large/ and updated the JS to use the appropriate resources.

    this.content.innerHTML = `
  <span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated.large/${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.small/${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>`;

I should note that Safari (and by extension, mobile safari) still renders the icons slightly blurred, but it’s much better.


#135

I think I’ve got a new one here:

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

I looked up the Dark Sky API and they’ve got an API call units = [units]

I went through the .js file and hard-coded all the unit functions I could find so they’d return “us”. My configuration.yaml also has the unit system at the top set to Imperial.

Any guess what’s going on? It doesn’t render a single thing. In the traditional UI, I’ve got seven zillion Dark Sky sensors now, so I must be querying Dark Sky correctly. Therefore, I’ve got to guess something’s jacked up in the display code.
`


#136

Open up your dark-sky-weather-card.js file and remove .core
hass.config.core.unit_system
to read
hass.config.unit_system
(lines 17 and 26)

This string occurs twice in the same function. There was a breaking change in Home Assistant and the source code for this card has not yet been updated.


#137

I’ve spent 4 hours with these awful instructions on how to get this damn thing running and I’m no closer to actually figuring it out. Does anybody have an actual well-written write-up on how to get ANYTHING to run properly?


#138

@Yakker part of that problem is that Home-Assistant is still in a developmental stage and the updates sometimes have changes that break the code we have already. It’s annoying but part of the beta life.

Where are you stuck?


#141

There is something wrong in my config because when I add it in the lovelace config the page does not load and I get a white screen like this after seeing it for half a second.

My configs are:

sensors.yaml

  - platform: darksky
    api_key: !secret darksky_api_key
    forecast:
      - 1
      - 2
      - 3
      - 4
      - 5
    update_interval:
      minutes: 5
    monitored_conditions:
      - summary
      - icon
      - nearest_storm_distance
      - nearest_storm_bearing
      - apparent_temperature
      - pressure
      - precip_intensity
      - precip_probability
      - precip_accumulation
      - precip_intensity_max
      - humidity
      - wind_speed
      - visibility
      - wind_bearing
      - temperature
      - cloud_cover
      - precip_type
      - daily_summary
      - uv_index
      - temperature_high
      - temperature_low
      - apparent_temperature_high
      - apparent_temperature_low

ui-lovelace.yaml

  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js
...
          - 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

config/www/custom_ui/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;
  }

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

config/www/custom_ui/dark-sky-weather-card.js as in the first post

Hassio is on version 0.81.5

What can I check?

Thanks


#142

@woody4165 Can you post your entire .js code and check your log for errors?


#143

Mine did this also, Add ?v=5 and hit ctr shift and R to refresh.