Weather Plus Card

Features

Weather card#

custom:weather-plus-card — A weather entity and the sensors of the weather integrations around it.

• Animated scene for each condition, by day and by night (from sun.sun): the sun's rays turn and its glow breathes, at night the moon, in its real phase, shines among twinkling stars or peeks above the rain and storm clouds, tinted for the night, clouds drift, rain falls (harder when it pours), snow flutters down, hail bounces, lightning flashes over the cloud, fog rolls and the wind blows in gusts; a warning sign for exceptional weather. animations: false or the system's reduce motion setting keeps it still. The animations pause while the card is off-screen or the browser tab is hidden, and go on when it shows again
• Warning banner (warning_entities): the warnings of Meteoalarm, DWD (Deutscher Wetterdienst), NWS alerts or Météo-France sensors under the header, one row per warning with its title, in its level's colour (yellow, orange, red), the highest first; a click opens its entity. It hides itself when there is no warning
• The temperature in large with today's high and low, the feels-like temperature, and chips for humidity, wind (an arrow turned to its direction, gusts on hover), pressure (with its 3-hour trend from the history: rising, falling or steady), cloud cover, UV index, pollen and air quality (Pollen: low, Air: fair, in the colour of their level)
• The status pill shows the highest weather warning (Orange warning, the banner's included), else lightning nearby (Lightning 6 km away), else the condition
• Every chip, row and reading opens the more-info dialog of its entity
• Full screen button (top right, popup: false removes it): the detail over the whole screen and its width, sections side by side as the width allows, with 24 hours and 10 days of forecast; the keyboard focus stays inside it (Tab goes round its controls); it closes with its button, Escape, a click outside or the back button on a phone, and gives the focus back to its button
• Refresh button (top right, refresh: false removes it): asks the integrations behind the card — weather, rain, alerts, sensors — for fresh data right away; the icon turns while they answer, even with animations: false (not with the system's reduce motion setting)
• In a Sections view the card takes the full width (12 columns) and goes down to 9; on a narrow card the scene gets smaller, the status pill shortens its text only when the title is down to a few letters (and on the narrowest cards shows its coloured dot only, its text in the tooltip) and the daily rows leave out their range bar

Sections, in the order of sections (a section with no data hides itself):

Mini card#

custom:weather-plus-mini-card — The weather on two lines, for a compact dashboard.

• The animated scene, the temperature with today's high and low, the rain to come in the hour (or the condition and feels-like temperature), and the active warnings; the highest warning of the banner under the header
• In a Sections view its height follows its content (rows: auto)
• The detail button (top right) unfolds the full card, and back, as does a click anywhere else (zoom: false removes it); the unfolded card has the Refresh and Full screen buttons. When the weather is unavailable, the folded card shows the Refresh button too, to retry
• In a Sections view it takes 6 columns (half a section); on the narrowest sections its status pill shows its dot only, then the badge and the scene step aside for the title and the temperature

Supported integrations

The card works with any weather integration (Météo-France, Met.no, Open-Meteo, OpenWeatherMap, Pirate Weather, AccuWeather, Met Office, Environment Canada…): the current conditions come from the weather entity, the forecasts from its forecast subscription (weather.get_forecasts), with the old forecast attribute as a fallback.

The other sections read the sensors of these integrations, found by their translation key, their entity id (English and French) or their attributes; the ones on the weather entity's device come first:

Data	Integrations	Role in entities
Rain in the next hour	Météo-France (sensor.*_next_rain)	next_rain
Rain, snow, frost chances	Météo-France	rain_chance, snow_chance, freeze_chance
Weather warnings	Météo-France (sensor.*_weather_alert), Niak Weather (Vigilance officielle), or any sensor with a green / yellow / orange / red level per phenomenon	alert
Thunderstorms	Blitzortung (lightning_counter, lightning_distance), Niak Weather (Orage proche), and the forecast	lightning_counter, lightning_distance
Drought restrictions	VigiEau, Niak Weather (Restrictions d'eau, with the restricted uses), or any sensor with a vigilance / alerte / alerte renforcée / crise level	vigieau
UV index	Météo-France, OpenUV, OpenWeatherMap, Pirate Weather…, else the weather entity	uv, uv_max
Pollen	Pollens (RNSA), Atmo France, Google Pollen, any sensor named after a pollen species (levels 0–5 or 0–6, or words in French or English)	pollen (a list), pollen_risk
Air quality index	Atmo France qualité globale, or any outdoor aqi sensor ( WAQI, AirVisual…); else the worst pollutant	aqi
Pollutants	Atmo France, WAQI, AirVisual, Google Air Quality, Airly, sensor.community… (an indoor purifier's PM2.5 is left out; Atmo's day-ahead -J+1 copies too)	air (a map: pm25, pm10, o3, no2, so2)
Sun	sun.sun	sun
Cloud cover	Météo-France cloud cover, else the weather entity's cloud_coverage	cloud_cover
Pressure trend	The weather entity's pressure sensor (else the entity itself), read from the recorder's history	pressure
Today's rainfall	Météo-France daily precipitation	daily_precipitation
Tomorrow's air and pollen	Atmo France's -J+1 sensors next to the ones in use	—
Warning banner	Meteoalarm (binary_sensor, awareness level and headline), DWD Weather Warnings (current and advance warning level sensors), NWS Alerts (Alerts list, by severity), Météo-France weather alert	warning_entities option
Moon phase	Moon (sensor.moon_phase), optional	moon

Prerequisites

• Home Assistant 2024.8 or later with a weather entity

Configuration

Everything is optional: with no option at all, the card takes the first weather entity and every sensor it recognizes.

type: custom:weather-plus-card

type: custom:weather-plus-card
entity: weather.paris
name: Home
sections: [alerts, rain, hourly, daily, air, pollen]
hours: 18
days: 7
warning_entities:
  - binary_sensor.meteoalarm
  - sensor.berlin_current_warning_level
entities:
  uv: sensor.openuv_current_uv_index
  vigieau: sensor.alert_level_in_paris
  pollen:
    - sensor.pollens_75_graminees
    - sensor.pollens_75_bouleau

type: custom:weather-plus-mini-card
entity: weather.paris

Support

If you find this project useful, you can support its development:

Fixes

• Folding back on a tap elsewhere now works on iOS (Safari and the companion app): a tap on something that is not clickable sent no click to the page, so the detailed view of the mini card stayed open. The press and the release are caught instead; a slider dragged out of the card and a scroll do not fold anything.
• Leaving the card (another dashboard view, a conditional card hidden) brings it back in its default state: mini card compact.
• A click could do nothing: Home Assistant updates the card several times a second, and a rewrite of the card between the press and the release replaced the element pressed, so that the click was lost. The card is no longer rewritten while a press is in progress; the pending update is drawn right after the click.
• No focus ring after a mouse click or a tap: the focus is kept across updates only for the keyboard.

Features

• show_title and show_subtitle options (also in the visual editor) hide the header's title and its subtitle (the condition), separately, for a card placed under a section heading of its own (asked in juju35/ha-vehicle-card#72).

Fixes

• Translations: the cards are defined once the page's language file has arrived (at most 1.5 s; Home Assistant builds a card when its element gets defined), so the first render is already translated instead of English then redrawn; until a language file is in, a missing text reads the English one wherever the card has no fallback of its own.

Performance

• Translations load on demand: the bundle keeps English only (324 KB → 163 KB) and each other language is its own ha-weather-card.i18n.<lang>.js file next to it, fetched the first time a card needs it. Home Assistant loads every dashboard resource on every dashboard, so each page used to download and parse all 22 languages to use one. Until a language file has arrived (a few milliseconds), texts fall back to English, and the cards redraw once it is there.

Maintenance

• Build: scripts/i18n-split.mjs splits the built bundle and rebuilds every table from the split files to check them (the build fails on any difference); src/ keeps every language as before.
• Release: every file of dist/ is attached. Manual installation copies the translation files too.

Fixes

• When the Home Assistant profile uses the server time zone, "Today" in the daily forecast, the day the daily list starts from and the day of dawn, dusk, golden hour and moonrise follow that time zone too, instead of the browser's.
• A forecast entry without a valid datetime is left out of the daily forecast instead of stopping the card from rendering.

Fixes

• The pressure trend reads its 1 hPa threshold in the unit of its source (a pressure sensor in inHg, Pa or mmHg, or the weather entity's own unit), and its tooltip shows the change in that unit. The hourly precipitation bars read amounts in inches or centimetres as their millimetre equivalent.
• Times (hourly forecast, sunrise and sunset, twilight, moonrise and moonset, the next storm) follow the 12/24 h format of the Home Assistant profile and, when the profile uses the server time zone, that time zone.
• Full screen detail: Tab and Shift+Tab stay inside it, going round its controls instead of reaching the page behind.
• The card picker shows the cards' name and description in the Home Assistant language.