Hourly Weather Card by @decompil3d
An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.
✨ Install via HACS
- Download
hourly-weather.js
from 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.js
as a JavaScript Module. - Refresh your browser
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_segments: 18 # optional, defaults to 12
name: Next 18 hours # optional, defaults to "Hourly Weather"
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.
Name | Type | Requirement | Description | Default |
---|---|---|---|---|
type |
string | Required | custom:hourly-weather |
|
entity |
string | Required | Home Assistant weather entity ID. | |
name |
string | Optional | Card name (set to null to hide) |
Hourly Weather |
icons |
bool | Optional | Whether to show icons instead of text labels | false |
num_segments |
number | Optional | Number of forecast segments to show (even integer >= 2) | 12 |
num_hours |
number | Optional | Deprecated: Use num_segments instead |
12 |
offset |
number | Optional | Number of forecast segments to offset from start | 0 |
label_spacing |
number | Optional | Space between time/temperature labels (even integer >= 2) | 2 |
colors |
object | Optional | Set colors for all or some conditions | |
hide_hours |
bool | Optional | Whether to hide hour labels under the bar | false |
hide_temperatures |
bool | Optional | Whether to hide temperatures under the bar | false |
hide_bar |
bool | Optional | Whether to hide the bar itself | false |
show_wind |
Wind | Optional | Whether to show wind speed and/or direction under the bar | 'false' |
show_precipitation_amounts |
bool | Optional | Whether to show precipitation (rain) amount under the bar | false |
show_precipitation_probability |
bool | Optional | Whether to show precipitation (rain) probability under the bar | false |
show_date |
string | Optional | Whether to show date under the bar | 'false' |
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 |
language |
string | Optional | Language to use for card (overrides HA & user settings) |
Note that some of the more advanced options are not available in the card editor UI and must be configured via YAML.
The following options allow Home Assistant Jinja templates as values:
name
num_segments
offset
label_spacing
You may use any valid template expression that produces a string or number. For example, you can define offset based on the current time of day so that you see the next day's weather:
name: Tomorrow
num_segments: 24
offset: |
{{ 24 - now().hour }}
label_spacing: 4
Or maybe show the rest of today's weather:
name: Today
num_segments: |
{{ 24 - now().hour }}
label_spacing: |
{% set segments = 24 - now().hour %}
{{ 4 if segments > 12 else 2 }}
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 |
colors
is specified as an object containing one or more of the keys listed below and values that are valid CSS
colors or objects of foreground and/or background valid CSS colors. Invalid color values will be discarded and will
trigger a warning.
Colors may be specified as a valid CSS color string or as an object with one or more of the following fields, each containing a valid CSS color string:
foreground
: The color of the condition label text or iconbackground
: The color of the bar background during that span
If color is specified as a plain string, it will be used for background. Foreground color defaults to the primary text color in your Home Assistant theme.
Some conditions will default to whatever the value is of some other condition. For example, fog
will default to
whatever cloudy
is.
Key | Default |
---|---|
clear-night |
#000 |
cloudy |
#777 |
fog |
same as cloudy |
hail |
#2b5174 |
lightning |
same as rainy |
lightning-rainy |
same as rainy |
partlycloudy |
#b3dbff |
pouring |
same as rainy |
rainy |
#44739d |
snowy |
#fff |
snowy-rainy |
same as partlycloudy |
sunny |
#90cbff |
windy |
same as sunny |
windy-variant |
same as sunny |
exceptional |
#ff9d00 |
colors:
sunny: '#bbccee' # note that hex colors must be quoted
snowy-rainy: rgba(255, 255, 255, 0.8) # rgba works (and hsla too)
exceptional: red # as do valid CSS color names
windy:
background: lightgray
foreground: '#000'
show_wind
can be one of the following values:
false
Don't show wind speed/direction (default)true
Show both wind speed and directionspeed
Only show wind speeddirection
Only show wind directionbarb
Show wind direction as a wind barb arrowbarb-and-direction
Show wind direction as a wind barb arrow and also show textual directionbarb-and-speed
Show wind direction as a wind barb arrow and also show speedbarb-speed-and-direction
Show wind direction as a wind barb arrow and also show speed and textual direction
Note: If your weather entity uses cardinal directions (e.g. 'N', 'SW', etc.) rather than numeric degrees for
wind_bearing
, thebarb
option is not supported and will result in an error.
show_date
can be one of the following values:
false
Don't show date (default)boundary
Show date at the boundary between daysall
Always show date
In version 4.x, the num_hours
option was deprecated in favor of num_segments
. This simplifies the card and makes it
clear that it operates on whatever size forecast segment your entity provides. The num_hours
option still works, but
num_segments
takes precedence, if set. num_hours
will be removed in a later major version of the card.