MeteoalarmCard is a powerful yet simple custom card to show meteorological warnings card for Home Assistant. It supports most of the core integrations as well as custom integrations like MeteoAlarm, Météo-France, NINA, DWD and more! When there are any alerts issued, card will change color to let you know about upcoming dangerous conditions.
We recommend installing MeteoalarmCard via Home Assistant Community Store
Just search for Meteoalarm Card in Frontend tab and hit download.
- Download
meteoalarm-card.jsfile from the latest release. - Put
meteoalarm-card.jsfile into yourconfig/wwwfolder. You can use File Editor add-on or any FTP client. - Add reference to
meteoalarm-card.jsin Lovelace. There's two way to do that:- Using UI: Navigate to Lovelace Resources → Click Plus button → Set URL as
/local/meteoalarm-card.js→ Set Resource type asJavaScript Module.
Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile - Using YAML: Add following code to
lovelacesection.resources: - url: /local/meteoalarm-card.js type: module
- Using UI: Navigate to Lovelace Resources → Click Plus button → Set URL as
- Add
custom:meteoalarm-cardto Lovelace UI as any other card.
After completing installation you can add this card like any other to your dashboard.
- Navigate to your dashboard → click 3 dots in the top left corner.
- Select Edit Dashboard
- Click + New Card button
- Select
Custom: Meteoalarm Card
Here is what configuration options mean:
| Name | Type | Default | Description |
|---|---|---|---|
type |
string |
Required | custom:meteoalarm-card |
integration |
string |
Required | Name of the integration. Available options are listed under Supported integrations |
entities |
array |
Required | Entity ID, a list of entity IDs or a list of entity objects. |
override_headline |
boolean |
false |
[Only some integrations] Override headline proved by integration by generated one. |
scaling_mode |
string |
headline_and_scale |
Headline scaling mode. See scaling-mode.md |
disable_swiper |
boolean |
false |
[Only some integrations] Disable slider when displaying multiple alerts, you may not see some important alerts. |
hide_caption |
boolean |
false |
[DWD only] Hide top-right caption when showing advance alerts. |
hide_when_no_warning |
boolean |
false |
Hide the card when no warning is active. This works like a conditional card. |
ignored_levels * |
array |
[] |
List of levels that will not be shown on the card. Possible values are: Yellow, Orange and Red |
ignored_events * |
array |
[] |
List of events that will not be shown on the card. Possible values are: Nuclear Event, Hurricane, Tornado,Coastal Event,Tsunami,Forest Fire,Avalanches,Earthquake,Volcanic Activity,Flooding,Sea Event,Thunderstorms,Rain,Snow/Ice,High Temperature,Low Temperature,Dust,Wind, Fog, Air Quality and Unknown Event |
* Not available through visual editor
Example configuration for Meteoalarm:
type: 'custom:meteoalarm-card'
integration: 'meteoalarm'
entities: 'binary_sensor.meteoalarm'
override_headline: falseExample configuration for Deutscher Wetterdienst (DWD):
type: 'custom:meteoalarm-card'
integration: 'dwd'
entities:
- entity: 'sensor.dwd_weather_warnings_current_warning_level'
- entity: 'sensor.dwd_weather_warnings_advance_warning_level'
override_headline: falseThis card supports translations. Please, help to add more translations and improve existing ones. Here's a list of supported languages:
- English
- Български (Bulgarian)
- Čeština (Czech)
- Deutsch (German)
- Eesti (Estonian)
- Español (Spanish)
- Français (French)
- Hrvatski (Croatian)
- Italiano (Italian)
- Nederlands (Dutch)
- Polski (Polish)
- Português (Portuguese)
- Slovenský (Slovak)
- Svenska (Swedish)
- Your language?
Expect Meteoalarm this card supports many other integrations:
| Integration | Key | Description |
|---|---|---|
| MeteoAlarm | meteoalarm |
Warnings for Europe collected by MeteoAlarm (EUMETNET). The website integrates all important severe weather information originating from the official National Public Weather Services across a large number of European countries |
| Météo-France | meteofrance |
Warnings for France from Météo-France. |
| Deutscher Wetterdienst (DWD) | dwd |
Warnings for Germany from Deutscher Wetterdienst. |
| Environnement Canada | env_canada |
Warnings for Canada from Environment and Climate Change Canada. |
| NINA | nina |
Warnings for Germany from Bundesamt für Bevölkerungsschutz und Katastrophenhilfe. This integration doesn't provide much atributes thus using it generates very generic card. |
| Burze.dzis.net | burze_dzis_net |
Custom integration for warnings in Poland from Burze.dzis.net. These warnings are issued by Skywarn / Polscy Łowcy Burz which is not backed by government or any official agency. |
| weatheralerts | weatheralerts |
Custom integration for USA from National Weather Service (NWS). |
| New integration? | You can request a new integration to be added here! |
You can customize card appearance using provided CSS variables and card-mod. For example:
type: custom:meteoalarm-card
entities:
entity: binary_sensor.meteoalarm
integration: meteoalarm
card_mod:
style: |
ha-card {
--inactive-background-color: blue;
}Which produces result:
Below are the available CSS variables that you can modify:
--text-color: The text color of inactive card.--text-color-active: The text color for card with active warnings.--red-level-color: The background color for red level alerts.--orange-level-background-color: The background color for orange level alerts.--yellow-level-background-color: The background color for yellow-level alerts.--inactive-background-color: This variable defines the background color when there are no warnings active.
Want to contribute to the project?
First of all, thanks! Check contributing guidelines for more information.
![lgtm-com[bot] avatar](https://avatars.githubusercontent.com/in/17324?v=4 "lgtm-com[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent