A custom Lovelace card that displays the UV index and risk level in Home Assistant.
HACS (Home Assistant Community Store)
- Go to HACS page on your Home Assistant instance
- Select
Frontend - Press add icon and search for
uv-index - Select UV Index Card repo and install
- Force refresh the Home Assistant page (Ctrl + F5)
- Add uv-index-card to your page
- Download the 'uv-index-card.js' from the latest release (with right click, save link as)
- Place the downloaded file on your Home Assistant machine in the
config/wwwfolder (when there is nowwwfolder in the folder where yourconfiguration.yamlfile is, create it and place the file there) - In Home Assistant go to
Configuration->Lovelace Dashboards->Resources(When there is noresourcestag on theLovelace Dashboardpage, enable advanced mode in your account settings, and retry this step) - Add a new resource
- Url =
/local/uv-index-card.js - Resource type =
module
- Url =
- Force refresh the Home Assistant page (Ctrl + F5)
- Add uv-index-card to your page
- Add the card with the visual editor
- Or add the card manually with the following (minimal) configuration:
type: custom:uv-index-card
entity: sensor.weather_station_uvtype: custom:uv-index-card
entity: sensor.weather_station_uv
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| type | string | Required | custom:uv-index-card |
|
| name | string | Optional | Card name | UV Index |
| show_error | boolean | Optional | Show what an error looks like for the card | false |
| show_warning | boolean | Optional | Show what a warning looks like for the card | false |
| entity | string | Required | Home Assistant entity ID. | none |
| language | string | Optional | The 2 character that determines the language | en |
| tap_action | object | Optional | Action to take on tap | action: more-info |
| hold_action | object | Optional | Action to take on hold | none |
| double_tap_action | object | Optional | Action to take on double tap | none |
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| action | string | Required | Action to perform (more-info, toggle, call-service, navigate url, none) | more-info |
| navigation_path | string | Optional | Path to navigate to (e.g. /lovelace/0/) when action defined as navigate | none |
| url | string | Optional | URL to open on click when action is url. The URL will open in a new tab | none |
| service | string | Optional | Service to call (e.g. media_player.media_play_pause) when action defined as call-service | none |
| service_data | object | Optional | Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service | none |
| haptic | string | Optional | Haptic feedback success, warning, failure, light, medium, heavy, selection | none |
| repeat | number | Optional | How often to repeat the hold_action in milliseconds. |
none |
The following languages are supported:
| Language | Yaml value | Supported | Translated by |
|---|---|---|---|
| Czech | cs |
v1.2.1 | @MiisaTrAnCe |
| Dutch | nl |
v1.2.0 | @WoBBeLNL |
| English | en |
v1.0.0 | @t1gr0u |
| French | fr |
v1.0.0 | @t1gr0u |
| German | de |
v1.0.0 | @t1gr0u |
| Hungarian | hu |
v1.2.1 | @erelke |
| Italian | it |
v1.2.0 | @SiriosDev |
| Portuguese | pt |
v1.2.0 | @ViPeR5000 |
| Swedish | sv |
v1.2.1 | @el97 |
If you wish to add a language please follow these steps:
- Go into the
src/localize/languages/folder - Duplicate the
en.jsonand name it as the language that you would like to add by following the 2 characters ISO language code - Then modify the
localize.tsfile, located insrc/localize/to include your language file. - Update the
Readme.md, found insrc/to include your language and your Github username in the language table.
- @iantrich for the boiler-plate card, which got me started
Clone and create a PR to help make the card even better.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent