meteoalarm-card
Version:
Meteoalarm card for Home Assistant Lovelace UI
175 lines (136 loc) • 10.1 kB
Markdown
# Meteoalarm Card
[](https://www.npmjs.com/package/meteoalarm-card)
[](https://github.com/hacs/integration)
[](https://github.com/MrBartusek/MeteoalarmCard/actions)
[](https://github.com/MrBartusek/MeteoalarmCard/releases)
MeteoalarmCard is a powerful yet simple custom card to show meteorological warnings card for [Home Assistant][ha]. It supports most of the core integrations as well as custom integrations like [MeteoAlarm][meteoalarm], [Météo-France][meteo-france], [NINA][nina], [DWD][dwd] and [more](#supported-integrations)! When there are any alerts issued, card will change color to let you know about upcoming dangerous conditions.
[ha]: https://www.home-assistant.io/
<!-- Link for integrations are specified in integrations list-->
## Installing
### HACS
We recommend installing MeteoalarmCard via [Home Assistant Community Store](https://hacs.xyz)
Just search for `Meteoalarm Card` in `Frontend` tab and hit download.
### Manual Installation
1. Download `meteoalarm-card.js` file from the [latest release](https://github.com/MrBartusek/MeteoalarmCard/releases/latest).
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](https://my.home-assistant.io/redirect/lovelace_resources/) → Click Plus button → Set _URL_ as `/local/meteoalarm-card.js` → Set _Resource type_ as `JavaScript Module`.<br>
**Note:** If you do not see the Resources Tab, you will need to enable _Advanced Mode_ in your [User Profile](https://my.home-assistant.io/redirect/profile/)
2. **Using YAML:** Add following code to `lovelace` section.
```yaml
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](#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](dosc/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](https://www.home-assistant.io/lovelace/conditional/). |
| `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](meteoalarm):
```yaml
type: 'custom:meteoalarm-card'
integration: 'meteoalarm'
entities: 'binary_sensor.meteoalarm'
override_headline: false
```
Example configuration for [Deutscher Wetterdienst (DWD)](dwd):
```yaml
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:
<!-- Languages except English are sorted alphabetically -->
- 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?_](./CONTRIBUTING.md#how-to-add-translation)
## Supported integrations
Expect Meteoalarm this card supports many other integrations:
| Integration | Key | Description |
| ----------------------------------- | ---------------- | ------------------------ |
| [MeteoAlarm][meteoalarm] | `meteoalarm` | Warnings for Europe collected by [MeteoAlarm][meteoalarm-direct] (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][meteo-france] | `meteofrance` | Warnings for France from [Météo-France][meteo-france-direct]. |
| [Deutscher Wetterdienst (DWD)][dwd] | `dwd` | Warnings for Germany from [Deutscher Wetterdienst][dwd-direct]. |
| [Environnement Canada][env-canada] | `env_canada` | Warnings for Canada from [Environment and Climate Change Canada][env-canada-direct]. |
| [NINA][nina] | `nina` | Warnings for Germany from [Bundesamt für Bevölkerungsschutz und Katastrophenhilfe][nina-direct]. This integration doesn't provide much atributes thus using it generates very generic card. |
| [Burze.dzis.net][burze] | `burze_dzis_net` | Custom integration for warnings in Poland from [Burze.dzis.net][burze-direct]. These warnings are issued by [Skywarn / Polscy Łowcy Burz ](https://lowcyburz.pl) which is not backed by government or any official agency. |
| [weatheralerts][weatheralerts] | `weatheralerts` | Custom integration for USA from [National Weather Service (NWS)][weatheralerts-direct]. |
| [_New integration?_](https://github.com/MrBartusek/MeteoalarmCard/issues/new/choose) | | [You can request a new integration to be added here!]((https://github.com/MrBartusek/MeteoalarmCard/issues/new/choose)) |
[meteoalarm]: https://www.home-assistant.io/integrations/meteoalarm/
[meteoalarm-direct]: https://www.meteoalarm.org
[meteo-france]: https://www.home-assistant.io/integrations/meteo_france/
[meteo-france-direct]: https://meteofrance.com
[dwd]: https://www.home-assistant.io/integrations/dwd_weather_warnings/
[dwd-direct]: https://www.dwd.de/
[env-canada]: https://www.home-assistant.io/integrations/environment_canada/
[env-canada-direct]: https://weather.gc.ca/
[nina]: https://www.home-assistant.io/integrations/nina/
[nina-direct]: https://www.bbk.bund.de/
[burze]: https://github.com/PiotrMachowski/Home-Assistant-custom-components-Burze.dzis.net
[burze-direct]: https://burze.dzis.net
[weatheralerts]: https://github.com/custom-components/weatheralerts
[weatheralerts-direct]: https://www.weather.gov
## Customizing the Card's Appearance
You can customize card appearance using provided CSS variables and [card-mod](https://github.com/thomasloven/lovelace-card-mod). For example:
```yaml
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](https://github.com/MrBartusek/MeteoalarmCard/blob/master/dosc/scaling-mode.md) to `disabled`
- `--caption-font-size`: Font size for caption element.
## Contributing
Want to contribute to the project?
First of all, thanks! Check [contributing guidelines](./CONTRIBUTING.md) for more information.