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:

✨ Install via HACS

Alternative method:

1. Download hourly-weather.js from the Releases page
2. Upload to /www/hourly-weather/hourly-weather.js (via Samba, File Editor, SSH, etc.)
3. Visit the Resources page in your Home Assistant install and add /hourly-weather/hourly-weather.js as a JavaScript Module.
4. 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
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