Skip to content

Weather Card with animated icons for Home Assistant Lovelace

License

Notifications You must be signed in to change notification settings

Warter21/weather-card

 
 

Repository files navigation

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.

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

Weather Card

Thanks for all picking this card up.

Installation:

If you are using Firefox:

Firefox < 66 does not support all the needed functions yet for the editor. You change this by enabling javascript.options.dynamicImport in about:config. Or use the version without the editor: Version without editor

Manual:

  1. Download the weather-card.js to /config/www/custom-lovelace/weather-card/. (or an other folder in /config/www/)
  2. Save, the amCharts icons (The contents of the folder "animated") under /config/www/custom-lovelace/weather-card/icons/ (or an other folder in /config/www/)
  3. If you use Lovelace in storage mode, and want to use the editor, download the weather-card-editor.js to /config/www/custom-lovelace/weather-card/. (or the folder you used above)

Add the following to resources in your lovelace config:

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

Configuration:

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

type: custom:weather-card
entity: weather.openweathermap
name: Optional name

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

type: custom:weather-card
entity: weather.openweathermap
icons: "/local/custom-lovelace/weather-card/icons/"

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 X day forecast or hourly forecast
type: custom:weather-card
entity: weather.openweathermap
current: true
details: false
forecast: true
hourly_forecast: false
number_of_forecasts: 5

OpenWeather Map:

When using OpenWeather map you can select hourly(default) or daily forecast to show.

# Example configuration.yaml entry
weather:
  - platform: openweathermap
    api_key: YOUR_API_KEY

About

Weather Card with animated icons for Home Assistant Lovelace

Resources

License

Stars

Watchers

Forks

Packages

No packages published