marchagen / weather-card

Weather Card with animated icons and graph for Home Assistant Lovelace

Lovelace animated weather card

Originally created for the old UI converted by @arsaboo and @ciotlosm to Lovelace and now converted to Lit to make it even better. Was merge with lovelace weather card chart to get graph and translation This version is based on multiple repo's:

• bobzer/weather-card
• bramkragten/weather-card

This card uses the awesome animated SVG weather icons by amCharts.

But there is a newer version of the icons. These cannot be downloaded from but site, but from here: amcharts/weather
Download the weather and weather-animated. These versions are included in this package.

Thanks for all picking this card up.

Installation:

You have 3 options, HACS hosted or self hosted (manual). The first option needs internet and will update itself.

HACS

The easiest way it's to HACS Add the repos address in settings : https://github.com/MarcHagen/weather-card

Hosted:

Add the following to resources in your lovelace config:

- url: https://cdn.jsdelivr.net/gh/MarcHagen/weather-card/dist/weather-card.min.js
  type: module

Manual:

1. Download the weather-card.js to /config/www/weather-card/. (or an other folder in /config/www/)
2. Save the amCharts icons (The contents of the folder "animated") under /config/www/weather-card/icons/ (or an other folder in /config/www/)

Add the following to resources in your lovelace config:

resources:
  - url: /local/weather-card/weather-card.js
    type: module

Configuration:

And add a card with type custom:weather-card:

type: custom:weather-card
entity_weather: weather.yourweatherentity
entity_sun: sun.sun
name: Optional name

If you want to use your local icons add the location to the icons:

type: custom:weather-card
entity_weather: weather.yourweatherentity
entity_sun: sun.sun
icons: /local/weather-card/icons/animated/

You can choose wich elements of the weather card you want to show:

The 3 different rows, being:

• The current weather icon, the current temperature and title
• The details about the current weather
• The 5-day forecast

type: custom:weather-card
entity_weather: weather.yourweatherentity
entity_sun: sun.sun
current: true
details: false
forecast: true
forecastMaxColumn: 5

Full config

type: custom:weather-card
entity_weather: weather.yourweatherentity
entity_sun: sun.sun
current: true
details: false
forecast: true
forecastMaxColumn: 5
graph: false
hidePrecipitation: false
icons: /hacsfiles/weather-card/icons/animated/
card_config_version: 2

Editor

For convenience’s sake, there is an editor, so you can visualy click.

If you want to show the sunrise and sunset times, make sure the sun component is enabled:

# Example configuration.yaml entry
sun:

Dark Sky:

When using Dark Sky you should put the mode to daily if you want a daily forecast with highs and lows.

# Example configuration.yaml entry
weather:
  - platform: darksky
    api_key: YOUR_API_KEY
    mode: daily