Custom Animated Weather Icons Card - How U2 can have one

Share your Projects! Dashboards & Frontend
1

Created following card after uploading Animated Weather Icons to fi. themes folder.

card:
  entity: weather.eindhoven
  name_template: '{{ states.weather.eindhoven.state }}'
  show_name: false
  show_state: false
  state_image:
    clear-night: >-
      http://[YOUR IP}:8123/local/lovelace/images/assets/weather/clear-night.svg
    cloudy: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/cloudy.svg'
    exceptional: >-
      http://[YOUR IP}:8123/local/lovelace/images/assets/weather/exceptional.svg
    fog: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/fog.svg'
    hail: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/hail.svg'
    lightning: >-
      http://[YOUR IP}:8123/local/lovelace/images/assets/weather/lightning.svg
    lightning-rainy: >-
      http://[YOUR IP}:8123/local/lovelace/images/assets/weather/lightning-rainy.svg
    partlycloudy: >-
      http://[YOUR IP}:8123/local/lovelace/images/assets/weather/partlycloudy.svg
    pouring: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/pouring.svg'
    rainy: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/rainy.svg'
    snowy: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/snowy.svg'
    snowy-rainy: >-
      http://[YOUR IP}:8123/local/lovelace/images/assets/weather/snowy-rainy.svg
    sunny: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/sunny.svg'
    windy: 'http://[YOUR IP}:8123/local/lovelace/images/assets/weather/windy.svg'
    windy-variant: >-
      http://[YOUR IP}:8123/local/lovelace/images/assets/weather/windy-variant.svg
  style: |
    ha-card {
       background: none;
       padding: 0px 0px 0px 0px;
       border-bottom: 0px;
      }
  type: picture-entity
entities:
  - weather.eindhoven
type: 'custom:card-templater'

image
image1600×900 13.7 KB

2

Did you have a question?

3

No :smile: Just sharing

4

Was going to move it to ‘share your projects’ if that was the case, but see you have already done that.

1 Like