/* The thermostat A metal dial turned by hand. Turning it, the knurled ring goes round with the finger and the temperature asked for clicks every half degree: the white mark jumps to the next notch and the figure rolls upwards or downwards. The ticks of the scale light up between the room's temperature and the one asked for, warm when heating and cold when cooling, and the room slowly gets there; the face breathes in the colour of the moment. */ /* ---- values to change ---- */ const RANGE = [10, 30]; /* the lowest and the highest temperature that can be asked for */ const START = [21, 19.4]; /* the temperature asked for, and the room's, at the start */ const DEGREES = 13.5; /* how far the dial turns for one degree */ const DRIFT = 2.5; /* the seconds the room takes to warm up or cool down by a tenth of a degree */ const CLICK = [600, 0.42]; /* the spring of the mark jumping from notch to notch: how stiff, how held back */ const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches; const thermo = document.querySelector('[data-thermo]'); const dial = thermo.querySelector('[data-dial]'); const svg = thermo.querySelector('[data-svg]'); const modeEl = thermo.querySelector('[data-mode]'); const tempEl = thermo.querySelector('[data-temp]'); const nowEl = thermo.querySelector('[data-now]'); const modesEl = thermo.querySelector('[data-modes]'); const pill = thermo.querySelector('[data-pill]'); const live = thermo.querySelector('[data-live]'); const [LO, HI] = RANGE; const SWEEP = (HI - LO) * DEGREES; /* the scale's arc, centred on the top */ const angleOfValue = (v) => -SWEEP / 2 + (v - LO) * DEGREES; const fmt = (v) => v.toFixed(1).replace('.0', ''); /* ---------------------------------------------------------------- drawing the dial */ const at = (deg, r) => [Math.sin((deg * Math.PI) / 180) * r, -Math.cos((deg * Math.PI) / 180) * r].map((n) => n.toFixed(2)); let body = ` `; /* the knurled ring: fine grooves that turn with the hand */ let knurl = ''; for (let k = 0; k < 96; k++) { const a = k * 3.75; knurl += ``; } body += `${knurl}`; body += ''; /* the scale: a tick every half degree, a longer one every degree */ const ticks = []; for (let v = LO; v <= HI + 1e-6; v += 0.5) { const a = angleOfValue(v); const long = Math.abs(v - Math.round(v)) < 1e-6; body += ``; } body += ''; body += ''; svg.innerHTML = body; svg.querySelectorAll('.tick').forEach((t) => ticks.push({ el: t, v: Number(t.dataset.v) })); const knurlEl = svg.querySelector('[data-knurl]'); const mark = svg.querySelector('[data-mark]'); const room = svg.querySelector('[data-room]'); const breath = svg.querySelector('[data-breath]'); gsap.set([knurlEl, mark, room], { svgOrigin: '0 0' }); /* ---------------------------------------------------------------- the state */ const MODES = [['heat', 'Heat'], ['cool', 'Cool'], ['off', 'Off']]; let target = START[0]; let now = START[1]; let mode = 'heat'; let knob = 0; /* the ring's turn, in degrees: it follows the hand, the mark follows the notches */ /* a figure or a word that rolls; a roll still on its way is dropped whole */ function roll(box, text, dir) { let s = box.firstElementChild; if (!s) { s = document.createElement('span'); box.append(s); } const busy = box._tl; if (busy) busy.kill(); box._tl = null; if (s.textContent === text) { if (busy) gsap.to(s, { yPercent: 0, opacity: 1, duration: REDUCED ? 0 : 0.2 }); return; } if (REDUCED || !s.textContent) { s.textContent = text; gsap.set(s, { yPercent: 0, opacity: 1 }); return; } box._tl = gsap.timeline({ onComplete: () => (box._tl = null) }) .to(s, { yPercent: -100 * dir, opacity: 0, duration: 0.11, ease: 'power2.in' }) .add(() => (s.textContent = text)) .fromTo(s, { yPercent: 100 * dir, opacity: 0 }, { yPercent: 0, opacity: 1, duration: 0.3, ease: 'back.out(2.2)', immediateRender: false }); } /* what the thermostat is doing: heating or cooling while the room is not there yet, holding once it is */ function doing() { if (mode === 'off') return 'Off'; if (mode === 'heat') return now < target - 0.05 ? 'Heating' : 'Holding'; return now > target + 0.05 ? 'Cooling' : 'Holding'; } function paint() { const working = doing() === 'Heating' || doing() === 'Cooling'; const lo = Math.min(now, target); const hi = Math.max(now, target); ticks.forEach((t) => t.el.classList.toggle('is-on', working && t.v >= lo - 0.25 && t.v <= hi + 0.01)); roll(modeEl, doing(), 1); gsap.to(breath, { opacity: working ? 1 : 0, duration: REDUCED ? 0 : 0.8, overwrite: 'auto' }); } /* the mark jumps to its notch on a spring, worked out on GSAP's ticker in steps of 4 milliseconds */ const spring = { a: angleOfValue(target), v: 0, to: angleOfValue(target) }; let springing = false; function springTick(time, deltaMs) { const dt = Math.min(0.05, deltaMs / 1000); const n = Math.max(1, Math.ceil(dt / 0.004)); const [k, z] = CLICK; for (let s = 0; s < n; s++) { const h = dt / n; spring.v += (-k * (spring.a - spring.to) - 2 * z * Math.sqrt(k) * spring.v) * h; spring.a += spring.v * h; } gsap.set(mark, { rotation: spring.a }); if (Math.abs(spring.a - spring.to) < 0.01 && Math.abs(spring.v) < 0.5) { gsap.set(mark, { rotation: spring.to }); gsap.ticker.remove(springTick); springing = false; } } function moveMark() { spring.to = angleOfValue(target); if (REDUCED) { spring.a = spring.to; gsap.set(mark, { rotation: spring.to }); return; } if (!springing) { springing = true; gsap.ticker.add(springTick); } } /* asking for a temperature: the figure rolls the way it changes, the mark clicks, the scale lights */ function setTarget(v, quiet) { const next = Math.round(Math.min(HI, Math.max(LO, v)) * 2) / 2; if (next === target) return; const dir = next > target ? 1 : -1; target = next; roll(tempEl, fmt(target), dir); moveMark(); paint(); dial.setAttribute('aria-valuenow', String(target)); dial.setAttribute('aria-valuetext', `${fmt(target)} degrees, ${doing().toLowerCase()}`); if (!REDUCED) gsap.fromTo(tempEl, { scale: 1.06 }, { scale: 1, duration: 0.3, ease: 'power2.out', overwrite: 'auto' }); if (!quiet) live.textContent = `${fmt(target)} degrees`; wakeRoom(); } /* the ring goes back to rest at the notch of the temperature asked for */ let homing = null; function ringHome(d = 0.6) { const home = (target - START[0]) * DEGREES; if (homing) homing.kill(); homing = gsap.to({ v: knob }, { v: home, duration: REDUCED ? 0 : d, ease: 'elastic.out(1, 0.6)', onUpdate() { knob = this.targets()[0].v; gsap.set(knurlEl, { rotation: knob }); }, }); } /* ---------------------------------------------------------------- the hand on the dial */ const angleOf = (e) => { const r = dial.getBoundingClientRect(); return (Math.atan2(e.clientX - (r.left + r.width / 2), -(e.clientY - (r.top + r.height / 2))) * 180) / Math.PI; }; let held = null; dial.addEventListener('pointerdown', (e) => { if (e.button !== 0) return; held = { id: e.pointerId, last: angleOf(e), raw: target }; dial.setPointerCapture(e.pointerId); dial.classList.add('is-held'); if (homing) homing.kill(); gsap.killTweensOf(knurlEl); }); dial.addEventListener('pointermove', (e) => { if (!held || e.pointerId !== held.id) return; const a = angleOf(e); const da = ((a - held.last + 540) % 360) - 180; held.last = a; held.raw += da / DEGREES; /* past the ends the ring still gives a little, as if pushing against a stop */ const over = held.raw > HI ? held.raw - HI : held.raw < LO ? held.raw - LO : 0; const shown = held.raw - over + over * 0.25; knob = (shown - START[0]) * DEGREES; gsap.set(knurlEl, { rotation: knob }); setTarget(held.raw, true); }); function letGo(e) { if (!held || e.pointerId !== held.id) return; held = null; dial.classList.remove('is-held'); ringHome(); live.textContent = `${fmt(target)} degrees`; } dial.addEventListener('pointerup', letGo); dial.addEventListener('pointercancel', letGo); /* the wheel and the keys: a click at a time, the ring turning to the notch */ dial.addEventListener('wheel', (e) => { e.preventDefault(); setTarget(target + (e.deltaY < 0 ? 0.5 : -0.5)); ringHome(0.5); }, { passive: false }); dial.addEventListener('keydown', (e) => { const steps = { ArrowUp: 0.5, ArrowRight: 0.5, ArrowDown: -0.5, ArrowLeft: -0.5, PageUp: 2, PageDown: -2 }; if (e.key in steps) setTarget(target + steps[e.key]); else if (e.key === 'Home') setTarget(LO); else if (e.key === 'End') setTarget(HI); else return; e.preventDefault(); ringHome(0.5); }); thermo.querySelector('[data-less]').addEventListener('click', () => { setTarget(target - 0.5); ringHome(0.5); }); thermo.querySelector('[data-more]').addEventListener('click', () => { setTarget(target + 0.5); ringHome(0.5); }); /* ---------------------------------------------------------------- the modes */ const modeBtns = MODES.map(([id, name]) => { const b = document.createElement('button'); b.type = 'button'; b.className = 'mode'; b.setAttribute('role', 'radio'); b.textContent = name; b.addEventListener('click', () => setMode(id)); modesEl.append(b); return b; }); modesEl.addEventListener('keydown', (e) => { const map = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }; if (!(e.key in map)) return; e.preventDefault(); const i = (MODES.findIndex((m) => m[0] === mode) + map[e.key] + MODES.length) % MODES.length; setMode(MODES[i][0]); modeBtns[i].focus(); }); function setMode(id, first) { if (id === mode && !first) return; mode = id; const i = MODES.findIndex((m) => m[0] === id); modeBtns.forEach((b, k) => { b.setAttribute('aria-checked', String(k === i)); b.tabIndex = k === i ? 0 : -1; }); gsap.to(pill, { x: modeBtns[i].offsetLeft - 4, width: modeBtns[i].offsetWidth, duration: first || REDUCED ? 0 : 0.5, ease: 'back.out(1.7)', overwrite: 'auto' }); const colour = id === 'cool' ? '#45a8ff' : id === 'off' ? '#5a5e68' : '#ff7a2f'; gsap.to(thermo, { '--on': colour, duration: first || REDUCED ? 0 : 0.5, overwrite: 'auto' }); thermo.classList.toggle('is-off', id === 'off'); paint(); if (!first) live.textContent = `${MODES[i][1]}: ${doing().toLowerCase()}`; wakeRoom(); } /* ---------------------------------------------------------------- the room */ /* every DRIFT seconds the room moves a tenth of a degree towards the temperature asked for, while it is worked on */ let drifting = null; function wakeRoom() { if (drifting) return; const work = doing(); if (work !== 'Heating' && work !== 'Cooling') return; drifting = gsap.delayedCall(DRIFT, () => { drifting = null; const work2 = doing(); if (work2 === 'Heating') now = Math.round((now + 0.1) * 10) / 10; else if (work2 === 'Cooling') now = Math.round((now - 0.1) * 10) / 10; else return; roll(nowEl, fmt(now), work2 === 'Heating' ? 1 : -1); gsap.to(room, { rotation: angleOfValue(now), duration: REDUCED ? 0 : 0.6, ease: 'power2.inOut', overwrite: 'auto' }); paint(); wakeRoom(); }); } /* the face breathes slowly in the colour of the moment */ if (!REDUCED) gsap.fromTo(breath, { attr: { r: 80 } }, { attr: { r: 88 }, duration: 3, ease: 'sine.inOut', yoyo: true, repeat: -1 }); /* how the page is being used: the rings of the focus show for the keys, not after a finger or the mouse */ addEventListener('keydown', () => (document.documentElement.dataset.using = 'keys'), true); addEventListener('pointerdown', () => (document.documentElement.dataset.using = 'pointer'), true); /* ---------------------------------------------------------------- the library's preview */ /* a click from a script (detail 0) is a pretend hand that turns the dial to a new temperature, and now and then changes the mode */ const PRETEND = [23.5, 18, 22, 16.5]; let turn = 0; thermo.addEventListener('click', (e) => { if (e.detail !== 0 || e.target !== thermo) return; turn++; if (turn % 3 === 0) { setMode(mode === 'heat' ? 'cool' : 'heat'); return; } const to = PRETEND[(turn - 1) % PRETEND.length]; if (REDUCED) { setTarget(to); ringHome(0); return; } const hand = { v: target }; gsap.to(hand, { v: to, duration: 1.3, ease: 'power2.inOut', onUpdate: () => { knob = (hand.v - START[0]) * DEGREES; gsap.set(knurlEl, { rotation: knob }); setTarget(hand.v, true); }, onComplete: () => (live.textContent = `${fmt(target)} degrees`), }); }); /* ---------------------------------------------------------------- it comes in */ roll(tempEl, fmt(target), 1); roll(nowEl, fmt(now), 1); dial.setAttribute('aria-valuenow', String(target)); dial.setAttribute('aria-valuetext', `${fmt(target)} degrees`); gsap.set(room, { rotation: angleOfValue(now) }); gsap.set(mark, { rotation: angleOfValue(target) }); setMode('heat', true); if (!REDUCED) { gsap.from(thermo.querySelector('.controls'), { y: 14, opacity: 0, duration: 0.6, delay: 0.2, ease: 'power3.out', clearProps: 'transform,opacity' }); gsap.from(dial, { scale: 0.9, opacity: 0, duration: 0.8, ease: 'power3.out', clearProps: 'transform,opacity' }); /* the ticks light up one after another, and the mark sweeps up from the bottom of the scale */ gsap.from(ticks.map((t) => t.el), { opacity: 0, duration: 0.25, stagger: 0.012, delay: 0.2 }); spring.a = angleOfValue(LO); gsap.set(mark, { rotation: spring.a }); gsap.delayedCall(0.35, moveMark); gsap.fromTo(knurlEl, { rotation: -40 }, { rotation: 0, duration: 1.2, ease: 'power3.out' }); }