Skip to content

README.md

Latest commit

 

History

History
405 lines (298 loc) · 10.8 KB

README.md

File metadata and controls

405 lines (298 loc) · 10.8 KB

⛅ Dynamic Weather Card

Dynamic weather card for Home Assistant with realistic animations

HACS GitHub Release Downloads

Stars Issues

English | Русский

🎮 Try Live Demo • 📖 Documentation • 🐛 Report Issue

🌟 Preview

demo

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

✨ Features

🎨 Visual Experience

  • Realistic Canvas Animations

    • Rain with different intensities
    • Snowfall with various particle effects
    • Fog and mist
    • Hail and sleet
    • Lightning and thunderstorms

  • Dynamic Time-Based Backgrounds

    • Sunrise gradient (6:00 - 8:00)
    • Bright day sky (8:00 - 18:00)
    • Sunset gradient (18:00 - 20:00)
    • Night sky (20:00 - 6:00)

⚙️ Functionality

  • Smart Data Display

    • Hourly & daily forecasts
    • Feels-like temperature
    • Wind speed, gusts & direction
    • Humidity levels
    • Sunrise & sunset times
    • Real-time clock (12h/24h)

  • User-Friendly

    • Visual editor in Home Assistant UI
    • Auto-detection of language & units
    • Fully responsive design
    • Works with all weather integrations

📦 Installation

Option 1: HACS (Recommended)

  1. Click the button below to open HACS:

    Open HACS

  2. Or manually:

    • Open HACS in Home Assistant
    • Go to Frontend section
    • Click "+" button
    • Search for "Dynamic Weather Card"
    • Click Install

Option 2: Manual Installation

  1. Download dynamic-weather-card.js from the latest release

  2. Copy it to config/www/community/dynamic-weather-card/ directory

  3. Add resource in Home Assistant:

    Settings → Dashboards → Resources → Add Resource

    URL: /local/community/dynamic-weather-card/dynamic-weather-card.js
Type: JavaScript Module

🚀 Quick Start

Minimal Configuration

type: custom:dynamic-weather-card
entity: weather.home

That's it! The card will automatically detect your language and display settings.

Using Visual Editor

  1. Add a card to your dashboard
  2. Search for "Dynamic Weather Card"
  3. Select your weather entity
  4. Customize options in the visual editor

⚙️ Configuration

📋 Complete Configuration Example (click to expand) 
type: custom:dynamic-weather-card
entity: weather.home
name: My Weather Station
height: 300
language: auto                    # auto, en, ru, de, fr, nl, es, it, hu, sk
overlay_opacity: 0.15             # 0-1 (dark overlay for better readability)
wind_speed_unit: ms               # ms or kmh (for legacy integrations)

# Temperature & Humidity
show_feels_like: true
show_min_temp: true
show_humidity: true

# Wind Information
show_wind: true
show_wind_direction: true
show_wind_gust: true

# Forecasts
show_hourly_forecast: true
hourly_forecast_hours: 8
show_daily_forecast: true
daily_forecast_days: 5

# Sun & Clock
show_sunrise_sunset: true
sunrise_entity: sensor.sun_next_rising    # optional
sunset_entity: sensor.sun_next_setting    # optional
show_clock: true
clock_position: top                       # top or details
clock_format: 24h                         # 12h or 24h

📊 Configuration Parameters

Parameter Type Default Description
Required
entity string - Weather entity ID (e.g., weather.home)
Display
name string - Custom card title (leave empty to hide)
height number 200 Card height in pixels
language string auto auto, en, ru, de, fr, nl, es, it, hu, sk
overlay_opacity number 0.1 Dark overlay opacity (0-1) for text readability
Temperature
show_feels_like boolean true Display "feels like" temperature
show_min_temp boolean true Display minimum temperature
Weather Details
show_humidity boolean false Display humidity percentage
show_wind boolean false Display wind speed
show_wind_direction boolean false Display wind direction
show_wind_gust boolean false Display wind gust speed
wind_speed_unit string ms ms or kmh (for legacy integrations)
Forecasts
show_hourly_forecast boolean false Show hourly forecast
hourly_forecast_hours number 5 Number of hours to display (1-24)
show_daily_forecast boolean false Show daily forecast
daily_forecast_days number 5 Number of days to display (1-14)
Sun & Clock
show_sunrise_sunset boolean false Display sunrise/sunset times
sunrise_entity string - Custom sunrise sensor (optional)
sunset_entity string - Custom sunset sensor (optional)
show_clock boolean false Display current time
clock_position string top top (top-right) or details (info row)
clock_format string 24h 12h (AM/PM) or 24h

🌡️ Integration-Specific Examples

OpenWeatherMap / Met.no

type: custom:dynamic-weather-card
entity: weather.home
show_hourly_forecast: true
show_daily_forecast: true

Yandex Weather

Yandex Weather requires separate sensors for sunrise/sunset:

type: custom:dynamic-weather-card
entity: weather.yandex_pogoda
name: Moscow
show_sunrise_sunset: true
sunrise_entity: sensor.yandex_pogoda_next_sunrise
sunset_entity: sensor.yandex_pogoda_next_sunset

AccuWeather

type: custom:dynamic-weather-card
entity: weather.home
show_feels_like: true
show_wind: true
show_humidity: true

🌍 Language Support

The card automatically detects your Home Assistant language or you can set it manually:

Language Code Status
English en ✅ Complete
Русский ru ✅ Complete
Deutsch de ✅ Complete
Français fr ✅ Complete
Nederlands nl ✅ Complete
Español es ✅ Complete
Italiano it ✅ Complete
Magyar hu ✅ Complete
Slovenčina sk ✅ Complete

Want to add your language? Contribute here!

🌤️ Supported Weather Conditions

☀️ Sunny / Clear 🌙 Clear Night ⛅ Partly Cloudy
☁️ Cloudy / Overcast 🌧️ Rainy ⛈️ Heavy Rain / Pouring
❄️ Snowy 🌨️ Sleet / Snowy-Rainy 🌫️ Foggy
⚡ Lightning ⛈️ Thunderstorm 🧊 Hail

💡 Smart Features

Automatic Wind Speed Units

The card automatically detects wind speed units from your weather integration:

  • Modern Integrations (Met.no, OpenWeatherMap, Yandex): Units detected automatically
  • Legacy Integrations: Set wind_speed_unit parameter manually

Supported units: m/s, km/h, mph, knots, ft/s

Automatic Sunrise/Sunset Detection

The card looks for sunrise/sunset data in this order:

  1. Custom sensors (sunrise_entity, sunset_entity)
  2. Weather entity attributes
  3. Home Assistant's sun.sun entity (built-in)

In most cases, no configuration needed!

🎨 Time of Day Backgrounds

Time Period Visual Effect
6:00 - 8:00 🌅 Sunrise Warm orange-pink gradient
8:00 - 18:00 ☀️ Day Bright blue sky
18:00 - 20:00 🌇 Sunset Orange-purple gradient
20:00 - 6:00 🌙 Night Deep blue/purple night sky

🔧 Development

Prerequisites

  • Bun or Node.js 18+
  • Modern browser with Canvas support

Setup

# Install dependencies
bun install
# or
npm install

# Development mode (auto-rebuild)
bun run dev

# Production build
bun run build

# Lint code
bun run lint

# Fix linting issues
bun run lint:fix

Project Structure

src/
├── animations/          # Canvas animation engines
│   ├── rain.ts
│   ├── snow.ts
│   ├── fog.ts
│   └── ...
├── components/          # Web components
│   ├── card.ts         # Main card component
│   └── editor.ts       # Visual editor
├── internationalization/ # i18n translations
│   └── locales/
│       ├── en/
│       ├── ru/
│       └── ...
├── constants.ts         # Configuration defaults
├── types.ts            # TypeScript definitions
└── utils.ts            # Helper functions

Contributing & Support

Contributions are welcome! If you find this card useful, here's how you can help:

  • Add translations for new languages
  • Report bugs and issues
  • Suggest new features
  • Submit pull requests
  • Star the repository
  • Share your feedback

License

MIT © teuchezh

Credits

Made with ❤️ for the Home Assistant community

⬆ Back to Top