Thermostat
A home-climate section with a glazed ceramic dial. It clicks at every degree, draws the work left as an arc from the room to the set point, and turns itself when you pick a time of day.
Built with Detent Dial
What it is for
A product or app section for anything with one physical setting and a daily rhythm: heating, an oven, a light.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Detent dial setpoint, Setpoint arc, Deadband rule, Schedule presets, Container queries
- Stack
- Vanilla ES modules, CSS, SVG
- Needs
- Detent Dial
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- HeatingSet point above the room: a terracotta arc from the room's temperature to the set point, a warm light across the section, 'Heating to … · about … min'.
- CoolingBelow the room in cool or auto: the arc and light turn slate.
- HoldingWithin the deadband: no arc, only the room's dot; sage accents; 'Holding …'.
- TurningThe readout and arc follow every value; the status line is rewritten once, on release, for assistive technology.
- Schedule pressA period button calls dial.set(temp, { emit: true }): the knob turns itself on its spring and everything follows.
- Mode changeNative radios; the rule, arc colour, status and ambient light change together.
- PalettesLinen, stone or clay, with any dial finish and lamp angle.
- Reduced motionEvery transition is removed and the dial lands without its settle; all readings stay.
- TabletOne column; the copy splits into lede and points; the card is centred at up to 720 px.
- PhoneDial, readout and status centred; full-width mode switch; periods in a 2 × 2 grid; no sideways scroll at 390 px.
Notes
The Detent Dial is the device on a wall plate; around it a large readout, a status sentence that says what will happen and how long it takes, a Heat / Cool / Auto switch and a schedule whose buttons move the dial.
Original. Tove is fictional. Heating and cooling rates (3 and 2 °C an hour) are illustrative defaults for the time estimate. Fonts: Instrument Serif and Instrument Sans, both OFL 1.1, shipped as WOFF2 with their licences (the Instrument Serif licence text carries that font's own copyright line, read from its name table).
Anatomy
Detent dial setpoint, Setpoint arc, Deadband rule, Schedule presets, Container queries
Usage notes
A product or app section for anything with one physical setting and a daily rhythm: heating, an oven, a light. The Detent Dial is the device on a wall plate; around it a large readout, a status sentence that says what will happen and how long it takes, a Heat / Cool / Auto switch and a schedule whose buttons move the dial.
Options
| Option | Type | Description |
|---|---|---|
| headline | text | Text after the first comma is set in italic. |
| eyebrow | text | Eyebrow |
| lede | text | Lede |
| cta | text | Button |
| price | text | Price |
| room | text | Room |
| mode | enum | Mode |
| setpoint | number | Where the knob starts. It clicks at each whole degree and lands on halves. |
| current | number | The arc runs from here to the set point. |
| humidity | number | Humidity (%) |
| time | text | HH:MM. Marks the day bar and picks the current period. |
| palette | enum | Palette |
| finish | enum | Knob finish |
| light | number | Light from (degrees) |
Methods
- target
- update
- destroy
How it works
Original. Tove is fictional.