Thermostat

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.

Copy the thermostat folder and the detent-dial folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="detent-dial/detent-dial.css">
<link rel="stylesheet" href="thermostat/thermostat.css">
<div id="thermostat"></div>

<script type="module">
  import DetentDial from './detent-dial/detent-dial.mjs';
  import { mount } from './thermostat/thermostat.mjs';

  const thermostat = mount(document.getElementById('thermostat'), {
    eyebrow: 'Tove · Room thermostat',
    headline: 'Warmth, set by hand.',
    lede: 'A glazed stoneware dial you turn like the old ones, over a schedule that learns when you are home. Turn it, and the house follows within the hour.',
  }, { DetentDial });

  // thermostat.update({ … });   change any option in place
  // thermostat.destroy();        and take it away again
</script>

mount(element, options, { DetentDial })

Builds the block inside the element and returns its handle. Hand it the Detent Dial it is built with.

handle.target

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. 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'.
2. CoolingBelow the room in cool or auto: the arc and light turn slate.
3. HoldingWithin the deadband: no arc, only the room's dot; sage accents; 'Holding …'.
4. TurningThe readout and arc follow every value; the status line is rewritten once, on release, for assistive technology.
5. Schedule pressA period button calls dial.set(temp, { emit: true }): the knob turns itself on its spring and everything follows.
6. Mode changeNative radios; the rule, arc colour, status and ambient light change together.
7. PalettesLinen, stone or clay, with any dial finish and lamp angle.
8. Reduced motionEvery transition is removed and the dial lands without its settle; all readings stay.
9. TabletOne column; the copy splits into lede and points; the card is centred at up to 720 px.
10. PhoneDial, readout and status centred; full-width mode switch; periods in a 2 × 2 grid; no sideways scroll at 390 px.

Made of: Detent dial setpoint, Setpoint arc, Deadband rule, Schedule presets, Container queries.

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).

• 02Detent DialA rotary control you count by feel.

More blocks on the same object:

• 02.1Synth PanelA synthesiser’s live front panel.
• 02.3Hi-Fi VolumeAn amplifier hero in walnut and brushed brass.
• 06.4Specimen CaseA bento of glass-topped compartments in a machined case, each holding one real Tactile object running small (the Odometer, the Flip-Dot, the Detent Dial, the Vessel) with an engraved label card under the glass.