CropWatch User Interface

CwWindCompass

An aviation-style heading dial for wind direction and wind speed. Cardinal letters and ten-degree markers ring the bezel, an arrow with a shaft and fletching rotates to the direction of flow, and the live speed reads out as a digital display in the centre of the instrument. Adapts to the current theme through CSS variables.

Live, interactive instrument

Pick a scenario or scrub the controls below. The arrow always points toward the direction the wind is moving. The dial layout, fonts, and colors automatically follow the active light or dark theme.

Direction 45° Speed (mph) 28.0 mph

Notes Greenhouse Roof

Pre-frontal NE flow. Useful for vent and curtain logic.

Bound cardinal —

The component pushes the current cardinal abbreviation back via bind:cardinal.

Greenhouse Roof wind. Wind from 45° NE. Speed 28 mph. Beaufort 6, Strong

Direction: 45° NE
Heading to: SW
Speed: 28 mph
Beaufort: F6 · Strong

Dual-unit readout (MPH and KPH)

Pass secondaryUnit to display the same speed in a second unit on the readout panel. The conversion runs through the internal m/s normalization so any pair of supported units works.

Highway Sensor wind. Wind from 140° SE. Speed 28 mph. Beaufort 6, Strong

Direction: 140° SE
Heading to: NW
Speed: 28 mph
Beaufort: F6 · Strong

Marina Mast wind. Wind from 300° WNW. Speed 18 knots. Beaufort 5, Fresh

Direction: 300° WNW
Heading to: ESE
Speed: 18 knots
Beaufort: F5 · Fresh

<CwWindCompass
	location="Highway Sensor"
	direction={140}
	speed={28}
	unit="mph"
	secondaryUnit="km/h"
/>

Bindable cardinal abbreviation

Use bind:cardinal to receive the current cardinal abbreviation (N, NNE, NE, …) of the wind’s FROM bearing. Useful for status banners and announcer-style copy that should not recompute the abbreviation locally.

<script lang="ts">
	let windCardinal = $state('');
</script>

<CwWindCompass
	direction={direction}
	speed={speed}
	bind:cardinal={windCardinal}
/>

<p>Wind from: {windCardinal}</p>

Compact placement

Drop the summary and legend for dashboards where the dial sits next to other tiles. The instrument stays legible at smaller sizes thanks to the high-contrast tick layout.

Wind compass. Wind from 310° NW. Speed 3.1 m/s. Beaufort 2, Light breeze

Wind compass. Wind from 120° ESE. Speed 18 mph. Beaufort 5, Fresh

Wind compass. Wind from 355° N. Speed 42 km/h. Beaufort 6, Strong

<CwWindCompass
	direction={310}
	speed={3.1}
	size={220}
	showSummary={false}
/>

Conventions and units

Most weather data uses the meteorological "from" convention — the direction the wind is blowing FROM. Drift and oceanographic data often invert this. Use convention="to" to flip the dial labels and the cardinal readout.

Met (from) wind. Wind from 90° E. Speed 6.4 m/s. Beaufort 4, Moderate

Direction: 90° E
Heading to: W
Speed: 6.4 m/s
Beaufort: F4 · Moderate

Drift (to) wind. Wind to 90° W. Speed 11 knots. Beaufort 4, Moderate

Direction: 90° W
Heading from: E
Speed: 11 knots
Beaufort: F4 · Moderate

<CwWindCompass
	location="Buoy 4-A"
	direction={90}
	speed={11}
	unit="knots"
	convention="to"
/>

Standard reading

This is the most common shape — wire it to a sensor and pass the reading straight through.

<CwWindCompass
	location="Field Station 12"
	direction={220}
	speed={6.4}
	timestamp={Date.now()}
/>

Documentation Upgrade

Start here

CwWindCompass is an aviation-style heading dial that shows wind direction and speed in a single instrument. The dial uses cardinal letters and ten-degree numerical markers around the bezel, an arrow with a shaft and fletching that rotates to flow direction, and a digital readout in the centre of the instrument for live speed.

How to think about it

Pick the direction convention up front Set `convention="from"` for meteorological readings (the wind is blowing FROM the bearing) or `convention="to"` for oceanographic data. The arrow always shows the direction of flow regardless of which convention is used.
Match the unit to your sensor `unit` accepts `m/s`, `km/h`, `mph`, or `knots`. The Beaufort scale lookup is normalized internally, so the same speed produces the same Beaufort force regardless of the chosen unit.
Show dual-unit readouts when needed Pass `secondaryUnit` to display the same speed in a second unit (e.g. `unit="mph"` + `secondaryUnit="km/h"` for an MPH/KPH readout). The conversion runs through internal m/s normalization.
Bind the cardinal abbreviation back when you need it `bind:cardinal` makes the component push the current FROM-bearing abbreviation ("N", "NE", "ESE", …) to a parent variable. Useful for status banners, screen reader copy, or downstream rule logic.
Hide chrome for compact placements Disable `showSummary` to drop the stats grid and `showLegend` to drop the Beaufort scale reference. The instrument itself stays the same.

Props and callbacks

API	Type	Details
`direction` Required	`number`	Direction in degrees, 0 = North, 90 = East. Interpreted by `convention`.
`speed` Required	`number`	Wind speed expressed in `unit`.
`unit` Default: `'m/s'`	`'m/s' \| 'km/h' \| 'mph' \| 'knots'`	Display unit shown beneath the digital speed readout.
`secondaryUnit`	`'m/s' \| 'km/h' \| 'mph' \| 'knots'`	Optional secondary unit. When set, the readout shows the same speed converted into this unit on a second line (e.g. MPH primary + KPH secondary).
`cardinal`	`string (bindable)`	Bindable output. Updated to the current cardinal abbreviation ("N", "NE", "ESE", …) of the FROM bearing. Use with `bind:cardinal`.
`convention` Default: `'from'`	`'from' \| 'to'`	Whether `direction` is the bearing the wind is blowing FROM (meteorological) or TO (oceanographic).
`location` Default: `''`	`string`	Optional label shown in the heading.
`timestamp`	`string \| Date \| number`	Optional reading timestamp shown in the reading panel.
`size` Default: `320`	`number`	Pixel size of the dial.
`showSummary` Default: `true`	`boolean`	Show the stats grid below the dial.
`showLegend` Default: `true`	`boolean`	Show the Beaufort scale reference panel.
`noData`	`string \| boolean`	When present, blurs the chart and shows an overlay. Pass localized text, or use the bare `noData` attribute for "No Data Available".
`class`	`string`	Optional class hook applied to the outer wrapper.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Standard meteorological reading

A typical weather-station integration. Wind is reported FROM 220° at 6.4 m/s.

<CwWindCompass
	location="Field Station 12"
	direction={220}
	speed={6.4}
	timestamp={Date.now()}
/>

Imperial units

Set `unit="mph"` and pass speed in matching units. The Beaufort lookup still works because conversion happens internally.

<CwWindCompass
	location="Greenhouse Roof"
	direction={45}
	speed={28}
	unit="mph"
/>

Compact dial without summary or legend

Drop the surrounding chrome for dashboards where the dial sits beside other widgets.

<CwWindCompass
	direction={310}
	speed={3.1}
	size={220}
	showSummary={false}
	showLegend={false}
/>

Oceanographic ("to") convention

Drift charts often report the direction the wind is blowing TOWARD. The arrow rotates accordingly.

<CwWindCompass
	location="Buoy 4-A"
	direction={90}
	speed={11}
	unit="knots"
	convention="to"
/>

Dual-unit readout (MPH + KPH)

Pass `secondaryUnit` to add a converted line under the primary speed. Any pair from the four supported units works.

<CwWindCompass
	location="Highway Sensor"
	direction={140}
	speed={28}
	unit="mph"
	secondaryUnit="km/h"
/>

Bind the cardinal abbreviation

Use `bind:cardinal` to receive the current FROM-bearing abbreviation in your parent component.

<script lang="ts">
	let windCardinal = $state('');
</script>

<CwWindCompass
	direction={direction}
	speed={speed}
	bind:cardinal={windCardinal}
/>

<p>Wind from: {windCardinal}</p>