Radar
<o-radar> is a scope with range rings, spokes, a rotating sweep and blips.
Each blip is a satellite on orbit-12: --o-angle-composite points it and --o-alignment pulls it in toward the center. Spokes are vectors from the center, one radius long. Updating targets only touches the blips, so the sweep never restarts.
Attributes
| Attribute | Default | What it does |
|---|---|---|
targets | [] | Blips: [{ angle, dist, color?, label? }]. angle in degrees clockwise from the top, dist from min (center) to max (edge). |
min / max | 0 / 1 | The distance range, so blips can be in kilometers or miles. |
rings | 4 | Range rings. |
spokes | 8 | Lines from the center. |
sweep | on | sweep="false" hides the beam. |
sweep-width | 110 | Width of the beam, in degrees. |
speed | 4 | Seconds per turn. |
color | #22d3ee | Color of the whole scope. accent works too. |
label | Text under the center dot. | |
size | 240px | Width of the widget. |
format, decimals, currency, locale | Number format of distances in the accessible name, through Intl.NumberFormat. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Styling
| Property | Default | What it does |
|---|---|---|
--ok-radar-color | #22d3ee | Rings, spokes, beam, blips and label. |
--ok-radar-speed | 4s | Duration of one turn of the beam. |
--ok-font-size | 6cqmin | Label size. |
More examples
Moving targets
Narrow, fast beam
No sweep, as a static map
Accessibility
The radar has role="img" and a name that lists the targets, like “Scan; Alpha: 60 degrees, 80% distance; …”. Give targets a label so the list makes sense. With reduced motion, the beam and the pings stand still.