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

Download meteoalarm-card.js file from the latest release.
Put meteoalarm-card.js file into your config/www folder. You can use File Editor add-on or any FTP client.
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
```
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.

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: 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.

MrBartusek/MeteoalarmCard