Windspeed Heatmap Card

A custom Home Assistant Lovelace card that displays wind speed data as a color-coded heatmap, showing hourly patterns across multiple days.

---

IMPORTANT: Card Change Upcoming

Hey! Thanks for using my card - I build stuff I want to use myself, so it's great when others find it useful too.

What's changing

The temperature and windspeed heatmap cards have always shared most of their code, with just small differences between them. Rather than keep maintaining two nearly-identical cards, I've merged them into one: weather-heatmap. Same functionality, less clutter in your dashboard setup. It will be available on HACS shortly.

When

Please migrate to the new card by 4 April 2026. After that, I won't be maintaining or updating the old temperature and windspeed cards.

---

Features

• Color-coded heatmap visualization of wind speed history
• Visual configuration editor for easy setup
• Default colors based on the official Beaufort wind scale (Force 0-12)
• Auto-selects appropriate thresholds for multiple units (mph, km/h, m/s, knots)
• Color interpolation with multiple methods (RGB, HSL, LAB, Gamma)
• Configurable time periods and intervals
• Configurable card sizing: compact mode, specify cell height/width, etc.
• Optional wind direction display (arrows, cardinal directions, or degrees)
• Customizable color thresholds based on wind speed
• Min/Max/Avg statistics
• Auto-refresh with configurable intervals
• Pairs well with the Temperature heatmap card

Installation

Configuration

Minimal Configuration

type: custom:windspeed-heatmap-card
entity: sensor.wind_speed

Full Configuration

type: custom:windspeed-heatmap-card
entity: sensor.wind_speed
direction_entity: sensor.wind_direction
title: "Wind History"
days: 7
time_interval: 2
time_format: "24"
unit: mph
show_direction: true
direction_format: arrow
show_entity_name: true
show_legend: true
refresh_interval: 300
click_action: tooltip
rounded_corners: true
data_source: auto
statistic_type: max

Configuration Options

Option	Type	Default	Description
entity	string	Required	Wind speed sensor entity ID
cell_font_size	number/string	11	Cell font size (6-24 pixels)
cell_gap	number/string	2	Gap between cells (0-20 pixels)
cell_height	number/string	36	Cell height (10-200 pixels)
cell_padding	number/string	2	Padding inside cells (0-20 pixels)
cell_width	number/string	"1fr"	Column width (1fr, auto, 60px, 25%, etc.)
click_action	string	"more-info"	Cell click action: "more-info", "tooltip", or "none"
color_interpolation	string	"hsl"	Interpolation method: "rgb", "gamma", "hsl", or "lab"
color_thresholds	array	See below	Color mapping for wind speeds
compact	boolean	false	Enable compact mode (overrides cell sizing properties)
compact_header	boolean	false	Reduce title size, header/footer padding, and nav arrow size
data_source	string	"auto"	Data source: "auto", "history", or "statistics"
days	number	7	Number of days to display (1-30)
direction_entity	string	null	Wind direction sensor entity ID (optional)
direction_format	string	"arrow"	Direction format: "arrow", "cardinal", or "degrees"
fill_gaps	boolean	false	Forward-fill last known value into empty buckets (use with caution - estimates missing data)
interpolate_colors	boolean	false	Enable smooth color interpolation between thresholds
refresh_interval	number	300	Data refresh interval in seconds
rounded_corners	boolean	true	Enable rounded corners on cells (set to false for flat grid)
show_direction	boolean	true	Show wind direction in cells
show_entity_name	boolean	false	Show entity friendly name in footer
show_month_year	boolean	true	Show month/year label above the grid
show_legend	boolean	false	Show color scale legend bar below footer
statistic_type	string	"max"	Statistic to use for statistics data: "max", "mean", or "min"
time_format	string	"24"	Time format: "12" or "24"
time_interval	number	2	Hours per row: 1, 2, 3, 4, 6, 8, 12, or 24
title	string	"Wind Speed History"	Card title
unit	string	auto-detect	Unit of measurement: "mph", "km/h", "m/s", "kn"/"kt"/"knots"

Default Color Thresholds

The default color scale uses the official Beaufort wind scale colors.

The card automatically selects the appropriate threshold values based on the detected or configured unit of measurement:

Unit	Supported Formats	Example Threshold Range
Miles per hour	mph	0-73+ mph
Kilometers per hour	km/h, kph, kmh	0-118+ km/h
Meters per second	m/s, mps	0-32.7+ m/s
Knots	kn, kt, kts, knot, knots	0-64+ kn

The unit is auto-detected from your wind speed entity's unit_of_measurement attribute. You can also explicitly set it using the unit configuration option.

You can customize these thresholds to match your local wind conditions and preferred color scheme.

Color Interpolation

By default, cell colors are determined by finding the highest threshold that the wind speed meets or exceeds. This creates distinct color bands.

Enable interpolate_colors: true to smoothly blend colors between thresholds for a gradient effect:

type: custom:windspeed-heatmap-card
entity: sensor.wind_speed
interpolate_colors: true
color_interpolation: hsl

Interpolation Methods

Method	Description
rgb	Linear RGB interpolation - simple but can produce muddy intermediate colors
gamma	Gamma-corrected RGB - perceptually more uniform than linear RGB
hsl	HSL color space (default) - produces vibrant intermediate colors, takes shortest hue path
lab	LAB color space - perceptually uniform, best for scientific visualization

Recommendation: Use hsl (default) for most cases. Use lab when perceptual uniformity is important.

Wind Direction Formats

Arrow Format (default)

Displays directional arrows: ↑ ↗ → ↘ ↓ ↙ ← ↖

direction_format: arrow

Cardinal Format

Displays cardinal directions: N, NE, E, SE, S, SW, W, NW

direction_format: cardinal

Degrees Format

Displays numeric degrees: 0°, 45°, 90°, etc.

direction_format: degrees

Cell Sizing Customization

Control the visual density of the heatmap with individual sizing properties or compact mode.

Individual Properties

Customize cell dimensions with specific size values:

type: custom:windspeed-heatmap-card
entity: sensor.wind_speed
cell_height: 40           # Cell height in pixels (default: 36)
cell_width: "1fr"         # Column width - 1fr (default), auto, 60px, 25%, etc.
cell_padding: 3           # Padding inside cells (default: 2)
cell_gap: 3               # Gap between cells (default: 2)
cell_font_size: 12        # Wind speed font size (default: 11)

Size Value Formats

• Numbers automatically convert to pixels: cell_height: 40 becomes "40px"
• Strings pass through as-is: cell_width: "1fr", cell_width: "25%"
• Valid ranges:
  • cell_height: 10-200 pixels
  • cell_padding: 0-20 pixels
  • cell_gap: 0-20 pixels
  • cell_font_size: 6-24 pixels

Compact Mode

For a denser display with smaller cells:

type: custom:windspeed-heatmap-card
entity: sensor.wind_speed
compact: true             # Overrides individual sizing properties

Compact preset values:

• Cell height: 24px (vs 36px default)
• Cell padding: 1px (vs 2px default)
• Cell gap: 1px (vs 2px default)
• Font size: 9px (vs 11px default)

Width Considerations

Responsive (recommended):

cell_width: "1fr"         # Auto-sizes to fill width (default)
cell_width: "25%"         # Percentage-based responsive sizing

Fixed width:

cell_width: 60            # Fixed 60px width per column

Note: Fixed widths may cause horizontal scrolling on narrow screens, especially with many days displayed.

Example Configurations

Larger cells for better readability:

type: custom:windspeed-heatmap-card
entity: sensor.wind_speed
cell_height: 50
cell_padding: 4
cell_font_size: 14
days: 5

Very compact display for dashboards:

type: custom:windspeed-heatmap-card
entity: sensor.wind_speed
compact: true
days: 14

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For issues, feature requests, or contributions, please visit the GitHub repository.