Meteoalarm Card

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.

Installing

HACS

We recommend installing MeteoalarmCard via Home Assistant Community Store

Just search for Meteoalarm Card in Frontend tab and hit download.

Manual Installation

1. Download meteoalarm-card.js file from the latest release.
2. Put meteoalarm-card.js file into your config/www folder. You can use File Editor add-on or any FTP client.
3. Add reference to meteoalarm-card.js in Lovelace. There's two way to do that:
   1. Using UI: Navigate to Lovelace Resources → Click Plus button → Set URL as /local/meteoalarm-card.js → Set Resource type as JavaScript Module.
      Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile
   2. Using YAML: Add following code to lovelace section.

      resources:
        - url: /local/meteoalarm-card.js
          type: module

4. Add custom:meteoalarm-card to Lovelace UI as any other card.

Using the card

After completing installation you can add this card like any other to your dashboard.

1. Navigate to your dashboard → click 3 dots in the top left corner.
2. Select Edit Dashboard
3. Click + New Card button
4. 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: false

Example 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: false

Supported languages

This card supports translations. Please, help to add more translations and improve existing ones. Here's a list of supported languages:

• English
• Български (Bulgarian)
• Català (Catalan)
• Čeština (Czech)
• Deutsch (German)
• Eesti (Estonian)
• Español (Spanish)
• Suomi (Finnish)
• Français (French)
• Hrvatski (Croatian)
• Italiano (Italian)
• Nederlands (Dutch)
• Polski (Polish)
• Português (Portuguese)
• Slovenský (Slovak)
• Svenska (Swedish)
• Your language?

Supported integrations

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!

Customizing the Card's Appearance

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.
• --inactive-background-color: This background color when there are no warnings active.
• --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.
• --headline-font-size: Font size of headline (alert name). Note: in order for this to work properly you need to set scaling-mode to disabled
• --caption-font-size: Font size for caption element.

Contributing

Want to contribute to the project?

First of all, thanks! Check contributing guidelines for more information.