Marks as dots inside the track: ticks, a selector's options and a slider's reading on the track's midline and the ring's centre line, coloured by the fill or the handle over them; the selector ring fills to its option
This commit is contained in:
@@ -75,12 +75,10 @@ stands in for the value until one arrives. On a round face it takes the middle
|
||||
slider's value.
|
||||
|
||||
It is also marked where it sits on the slider's scale, as a thermostat marks
|
||||
the room's temperature: the handle is what is set, the mark what is. The mark
|
||||
is a bar across the track or the ring, in the text colour, at the reading's
|
||||
fraction of the scale, (reading − min) / (max − min) held to 0–1, so a reading
|
||||
outside the range sits at that end. It is drawn over the track and its fill
|
||||
and under the handle, and is longer than the handle, so it still shows where
|
||||
the two meet. It takes no pointer, and there is none until a value arrives.
|
||||
the room's temperature: the handle is what is set, the dot what is. The dot is
|
||||
at the reading's fraction of the scale, (reading − min) / (max − min) held to
|
||||
0–1, so a reading outside the range sits at that end. It takes no pointer, and
|
||||
there is none until a value arrives. See [Dots on the track](#dots-on-the-track).
|
||||
|
||||
Sizes are CSS pixels of the canvas, as in the round geometry below. The
|
||||
slider's own value is at the tile's text size (14; 16 on a touch-friendly
|
||||
@@ -92,9 +90,31 @@ panel), centred on a line as tall as the control (32; 48 touch-friendly).
|
||||
| Row | directly under the slider's value, right-aligned with it, in the column right of the track (12 apart). With ticks the line shares the ticks' row, so the tile grows no taller; without them it adds 16 |
|
||||
| Row width | the value column is as wide as its wider line, but at most half the row; the track takes the rest. What does not fit is cut from the label; the value and unit never are |
|
||||
| Fader | directly under the slider's value, both centred under the track, 8 below it; the line no wider than the tile inside its padding, cut from the label first |
|
||||
| Mark (row) | a bar 2 wide and the handle's diameter + 8 long (16 + 8 = 24; 24 + 8 = 32 touch-friendly), centred on the track's midline (the track is 8 thick). Its centre sits on the handle's travel: handle ÷ 2 + fraction × (track length − handle) from the track's left end, so mark and handle line up at the same value |
|
||||
| Mark (fader) | the same turned: 2 high, handle + 8 wide, centred on the track, measured up from its bottom end |
|
||||
| Locked | the mark at 0.45 opacity, as the handle |
|
||||
|
||||
### Dots on the track
|
||||
|
||||
A slider's ticks, a selector's options on a round face and a slider's reading
|
||||
are dots inside the track, on its midline — on a round face the ring's centre
|
||||
line, radius c − 20. Each is drawn in the colour that reads on what covers it:
|
||||
the track, the value's fill, or the handle.
|
||||
|
||||
| Dot | Size, tile / ring | On the track | On the fill | On the handle |
|
||||
|---|---|---|---|---|
|
||||
| Stop: a tick, an option | half the track's thickness (4 on the 8 track) / 6 | `--muted-foreground` | `--primary-foreground` at 70 % | hidden under it |
|
||||
| Reading | three quarters of the track's thickness (6) / 10 | `--foreground` | `--primary-foreground` | Fluksio `--foreground`, Material `--primary-foreground`, Glass black at 75 % |
|
||||
|
||||
The reading is the larger dot in the stronger colour, and it is the one dot
|
||||
that shows on the handle, so a reading at the setpoint is still visible.
|
||||
|
||||
| Part | Value |
|
||||
|---|---|
|
||||
| Place (tile) | the dot's centre on the handle's travel: handle ÷ 2 + fraction × (track length − handle) from the track's left end (from its bottom end on a fader), so a dot and the handle line up at the same value |
|
||||
| Place (ring) | the dot's centre at the fraction of the sweep, as the handle |
|
||||
| Ticks | with `ticks` on (the default), n intervals of the scale — the steps when there are 5 or fewer, else the first of 4, 3 or 2 that divides the steps evenly, else 4 — and a dot at each i/n, both ends included. A row keeps its labels under the track; a fader has none |
|
||||
| Options | a dot per option at i/(n − 1) of the sweep (one option: the middle). The selector's ring has a value arc from the start to the selected option, so the options up to it are on the fill |
|
||||
| Colour change | where the fill or the handle covers a dot, that part of it takes the colour for the fill or the handle, so a dot changes colour as the fill's end or the handle passes over it, and follows them while they move. A device may instead switch a whole dot when the fill's end or the handle's centre passes the dot's centre |
|
||||
| Order | track, dots, fill, the dots again over the fill, handle, the reading again over the handle |
|
||||
| Locked | in a tile, the dots at 0.45 opacity, as the handle; on the ring, the whole ring at 0.45 |
|
||||
|
||||
## Charts
|
||||
|
||||
@@ -260,9 +280,9 @@ look's muted text colour.
|
||||
| Centre reading | centred at (c, c), line height 1, its unit after it at 0.4 em, muted. Size: 72, or 240 ÷ (0.6 × the characters written) rounded down where that is smaller, never below 24 |
|
||||
| Ring band | 40 along the edge |
|
||||
| Ring arc | start 120°, sweep 300° (ends at 60°), centre-line radius c − 20, stroke 16 with round caps |
|
||||
| Slider | track over the sweep, value arc from the start to the value (none at the minimum), handle 28 across; the value as the centre reading |
|
||||
| Slider with a reading | the reading as the centre reading; the gap line holds the title (muted) and the slider's value. The reading's mark: a bar 36 long and 3 wide, square-ended, in the text colour, along the radius at the reading's fraction of the sweep (the same angle the handle has at that value), centred on the ring's centre line, so from radius c − 38 to c − 2; over the track and value arc, under the handle |
|
||||
| Selector | a 6 mark per option at i/(n−1) of the sweep (one option: the middle), the selected one under the handle; its label as the centre reading, at most 36 |
|
||||
| Slider | track over the sweep, value arc from the start to the value (none at the minimum), handle 28 across, its ticks as [dots](#dots-on-the-track); the value as the centre reading |
|
||||
| Slider with a reading | the reading as the centre reading; the gap line holds the title (muted) and the slider's value. The reading as a dot 10 across on the centre line at its fraction of the sweep ([Dots on the track](#dots-on-the-track)) |
|
||||
| Selector | a value arc from the start to the selected option (none at the first), a dot 6 across per option at i/(n−1) of the sweep (one option: the middle), the selected one under the handle; its label as the centre reading, at most 36 |
|
||||
| Colour | hue h at h/360 of the sweep in 150 strokes of 2°, red at both ends; the handle filled with the colour; a swatch 96 across in the middle, with a hairline border |
|
||||
| Gauge | track and value arc, no handle; the value as the centre reading |
|
||||
| Gap line | centred at y = S − 28, 13, at most 160 wide |
|
||||
@@ -311,10 +331,10 @@ dashboard's look's.
|
||||
| Ring value set by a notch, a key or the engine | the value arc's end, the handle (slider, selector, colour) | from where it is drawn to the new fraction of the sweep | spring | each notch retargets from where it is, at the speed it has |
|
||||
| Ring value set by a drag | the same | follows the pointer exactly | none | — |
|
||||
| Hue across red | the colour handle | a change of more than half the sweep jumps to the other end | none | — |
|
||||
| Slider's reading on the ring, gauge on the ring | the reading's mark; the value arc | from where it is drawn to the new fraction | spring | retargets |
|
||||
| Slider's reading on the ring, gauge on the ring | the reading's dot; the value arc | from where it is drawn to the new fraction; a dot's colour follows the fill and the handle as they pass | spring | retargets |
|
||||
| Numbers on the ring | centre reading, gap line | switch at once, with the notch | none | — |
|
||||
| Value face, Value and Gauge tiles | the number | counts to the new value, written to its precision | spring | retargets |
|
||||
| Slider tile set elsewhere | the fill's end, the handle, the reading's mark | from where it is drawn to the new fraction | spring | a drag or a key moves it at once |
|
||||
| Slider tile set elsewhere | the fill's end, the handle, the reading's dot | from where it is drawn to the new fraction | spring | a drag or a key moves it at once |
|
||||
| Gauge and Bar tiles | the value arc, each bar's fill | from where it is drawn to the new fraction | spring | retargets |
|
||||
| Dashboard change (rectangular panel) | every tile | the old dashboard goes at once; each new tile opacity 0 → 1, y +8 → 0 | spring | — |
|
||||
| Rail | the current entry's marker | slides to the new entry | spring | retargets |
|
||||
|
||||
Reference in New Issue
Block a user