Hourly Weather Card by @decompil3d
An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.
Can you tell that I live in Seattle?
Installation
Easiest method:
Alternative method:
- Download
hourly-weather.jsfrom the Releases page - Upload to
/www/hourly-weather/hourly-weather.js(via Samba, File Editor, SSH, etc.) - Visit the Resources page in your Home Assistant install and add
/hourly-weather/hourly-weather.jsas a JavaScript Module. - Refresh your browser
Usage
This card will show in the "Add card" modal. It has a GUI editor for configuring settings.
If you prefer YAML, here is a sample config:
type: custom:hourly-weather
entity: weather.my_hourly_weather_entity
num_hours: 18 # optional, defaults to 12
name: Next 18 hours # optional, defaults to "Hourly Weather"
Choosing the right entity
This card is focused on displaying hourly weather data. If you try selecting a weather entity that provides daily forecasts, it will show a warning. I've tested with the OpenWeatherMap integration using the onecall_hourly mode and that works very well.
ℹ️ NOTE: If your selected weather entity provides forecasts in increments of greater than one hour at a time, each segment of the bar will be for one segment, not one hour.
If you already use OpenWeatherMap for daily data, you can add a second integration of the same component for hourly -- just adjust the latitude or longitude a tiny bit (i.e. change the last decimal by 1). Otherwise, the integration may complain of a duplicate unique ID.
Options
| Name | Type | Requirement | Description | Default |
|---|---|---|---|---|
| type | string | Required | custom:hourly-weather |
|
| entity | string | Required | Home Assistant weather entity ID. | |
| name | string | Optional | Card name | Hourly Weather |
| icons | bool | Optional | Whether to show icons instead of text labels | false |
| num_hours | number | Optional | Number of hours to show (even integer >= 2) | 12 |
| 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 |
Action Options
| 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 |
12 Aug 12, 2022
3 Nov 2, 2022
18 May 29, 2022
2 Oct 10, 2022
7 Dec 25, 2022
1 Jan 22, 2022
71 Dec 26, 2022
12 Dec 11, 2022
4 Sep 22, 2022
22 May 5, 2022
6 Oct 27, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
4 Jan 5, 2022
17 Sep 19, 2022
1 Dec 29, 2021
1 Feb 3, 2022
4 Feb 23, 2022