Skip to content

Meteoalarm, Météo-France and DWD severe weather warnings card for Home Assistant Lovelace UI ⛈️

License

Notifications You must be signed in to change notification settings

MrBartusek/MeteoalarmCard

Repository files navigation

Meteoalarm Card

version hacs_badge GitHub Workflow Status downloads

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.

cover

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:

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.