Custom Dark Sky Animated Weather Card

Share your Projects! Dashboards & Frontend
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.

2 Likes