How do I install the Weather Card in Home Assistant?

Add a resource link from jsDelivr to your Lovelace config for hosted use, or manually download weather-card.js and icons to your /config/www/ directory as per the README instructions.

Does the Weather Card work with Dark Sky?

Yes, but you must set the mode to 'daily' in your Dark Sky configuration to display daily forecasts with highs and lows, as specified in the README examples.

How can I show sunrise and sunset times?

Enable the sun component in your Home Assistant configuration.yaml, and the card will automatically integrate and display these times when available.

Weather Card vs default Home Assistant weather card – what's the difference?

The Weather Card adds animated icons and extensive customization like toggling sections, while the default card is simpler and built-in. Choose based on visual needs and configurability.

How to host icons locally for offline use?

Download the amCharts icons, place them in a folder under /config/www/, and set the 'icons' path in your card configuration, as detailed in the manual setup section.

Why isn't my forecast showing up?

Ensure 'forecast: true' is set in your card config and that your weather entity provides forecast data; for platforms like Dark Sky, check the mode setting as noted in the README.

Open-Awesome

Animated Weather Card

MITv1.5.0

A Home Assistant Lovelace card displaying weather with animated SVG icons and customizable forecast views.

GitHub

555 stars168 forks0 contributors

What is Animated Weather Card?

Weather Card is a custom Lovelace card for Home Assistant that displays weather information with animated SVG icons. It pulls data from Home Assistant's weather entities to show current conditions, forecasts, and details like humidity and wind speed in a visually appealing dashboard card. The project solves the need for a more dynamic and customizable weather visualization within Home Assistant's interface.

Target Audience

Home Assistant users who want to enhance their Lovelace dashboards with animated, interactive weather displays. It's ideal for smart home enthusiasts looking to improve UI aesthetics and functionality.

Value Proposition

Developers choose this card for its smooth animations, easy integration with Home Assistant weather platforms, and high customizability. Its ability to self-host icons and support multiple forecast types offers flexibility and control over data presentation.

Overview

Weather Card with animated icons for Home Assistant Lovelace

Use Cases

Best For

Adding animated weather visualizations to Home Assistant dashboards
Customizing Lovelace UI with interactive weather cards
Displaying daily or hourly forecasts in a smart home interface
Self-hosting weather icons for offline or private setups
Integrating multiple weather data sources like Dark Sky or OpenWeatherMap
Enhancing Home Assistant with visually rich, configurable UI components

Not Ideal For

Systems not using Home Assistant's Lovelace UI
Users needing plug-and-play widgets with zero configuration
Low-powered devices where SVG animations could impact performance
Projects requiring weather data from sources unsupported by Home Assistant weather entities

Pros & Cons

Pros

Animated Visual Appeal

Uses amCharts' free animated SVG icons to create dynamic, engaging weather visualizations, as demonstrated in the README's GIF example.

Highly Customizable Layout

Allows toggling of current weather, details, and forecast sections with configuration options like 'current: true' or 'details: false' for tailored displays.

Multiple Forecast Types

Supports both daily and hourly forecasts with configurable counts, and includes specific setup for platforms like Dark Sky and OpenWeatherMap.

Self-Hosting Flexibility

Enables local hosting of icons for offline use or privacy, with clear manual installation steps in the README.

Cons

Manual Setup Complexity

Requires downloading and placing multiple files in specific directories for self-hosting, which can be cumbersome compared to CDN-based solutions.

Dependency on External Resources

Default CDN version needs internet access, and self-hosting adds maintenance overhead for icon updates and file management.

Limited to Home Assistant

Only functional within Home Assistant's Lovelace ecosystem, making it unsuitable for general web or mobile applications without significant modification.

Frequently Asked Questions

Related Projects

Mini Graph Card

Minimalistic graph card for Home Assistant Lovelace UI

Stars3,818

Forks263

Last commit5 months ago

Button card

❇️ Lovelace button-card for home assistant

Stars2,442

Forks279

Last commit15 days ago

Vacuum Map Card

This card provides a user-friendly way to fully control map-based vacuums in Home Assistant. Supported brands include Xiaomi (Roborock/Viomi/Dreame/Roidmi/Valetudo/Valetudo RE), Neato, Wyze, Roomba, Ecovacs (and probably more).

Stars1,868

Forks276

Last commit3 months ago

Auto-Entities Card

🔹Automatically populate the entities-list of lovelace cards

Stars1,753

Forks134