diff options
| author | Craig Jennings <c@cjennings.net> | 2026-07-22 15:15:02 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2026-07-22 15:15:02 -0500 |
| commit | f1c661f50d6af2a115fc1430ae0478f2acef2dec (patch) | |
| tree | b894ea2e14327794bb75671b962f37185cff22ea /docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html | |
| parent | f594068bed75302aba50793ccf5e6ce9cf53c7f8 (diff) | |
| download | archsetup-f1c661f50d6af2a115fc1430ae0478f2acef2dec.tar.gz archsetup-f1c661f50d6af2a115fc1430ae0478f2acef2dec.zip | |
docs(settings-panel): seal the prototype arc and open the build
Prototypes P12-P37 land, along with the night-watch and levels-compare pages plus the shared-engine updates and the kit-candidate file. The spec flips from DRAFT through READY to DOING with rewritten implementation phases and seven recorded build findings. The build tasks are filed in todo.org, and phase 1 is closed against the dotfiles commits.
Diffstat (limited to 'docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html')
| -rw-r--r-- | docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html b/docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html new file mode 100644 index 0000000..6f2427d --- /dev/null +++ b/docs/prototypes/2026-07-02-desktop-settings-panel-levels-compare.html @@ -0,0 +1,107 @@ +<!doctype html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Desktop Settings — levels casting: detent fader + single drum</title> +<link rel="stylesheet" href="desktop-settings-shared.css"> +<style> + :root{ + --ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917; + --silver:#bfc4d0; --cream:#f3e7c5; --steel:#969385; --dim:#7c838a; + --slate:#424f5e; --slate-hi:#54677d; --wash:#2c2f32; + --pass:#74932f; --fail:#cb6b4d; + --phos:#7fe0a0; --phos-dim:#1c3626; --vfd:#63e6c8; + --sevgrn:#57d357; --sevred:#e2543f; --sevoff:#1a1613; + --jewel-r:#ff5b45; --jewel-a:#ffb43a; --jewel-g:#6fce33; + --gold:#e2a038; --gold-hi:#ffbe54; + --amber-grad-top:#f2c76a; --amber-grad-mid:#d29638; --amber-grad-bot:#8f671f; + --amber-edge:#7d5c16; --amber-warn:#f0b552; + --glow-hi:255,190,84; --glow-lo:226,160,56; + --mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace; + --pulse-rate:1s; + } + .page-cap { width: 100%; text-align: center; color: var(--dim); font-size: 12px; letter-spacing: 0.04em; max-width: 560px; } + .page-cap b { color: var(--gold); } + .row { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; } + .readout { text-align: center; color: var(--steel); font-size: 11px; letter-spacing: 0.1em; min-height: 15px; } + .readout b { color: var(--gold-hi); font-weight: 400; } +</style> +</head> +<body class="ds-stage"> + <div class="page-cap"> + <b>Levels casting.</b> Brightness: the new multi-detent slide attenuator — + drag slowly across 25 / 50 / 75 and feel the thumb park until you push + through (the tick lights while parked). Keyboard: the generalized drum + roller running a single drum, 0-10. + </div> + + <div class="ds-panel" style="width:320px"> + <div class="ds-face"><span class="glyph">⚙</span><span class="title">Levels</span></div> + + <div class="ds-engrave">Brightness — detent fader (new)</div> + <div class="row" id="fader-well"></div> + <div class="readout" id="ro-b"></div> + + <div class="ds-engrave">Keyboard — drum roller ×10 (upgraded)</div> + <div class="row" id="drum-well"></div> + <div class="readout" id="ro-k"></div> + + <div class="ds-toast" id="toast"></div> + </div> + +<script src="widgets.js"></script> +<script src="dupre-kit-additions.js"></script> +<script src="desktop-settings-shared.js"></script> +<script> +const h = DS.h; +DS.bindToast(document.getElementById("toast")); +let booting = true; + +const debounce = (fn, ms) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; }; + +function render() { + booting = true; + + const fw = document.getElementById("fader-well"); + fw.innerHTML = ""; + const roB = document.getElementById("ro-b"); + const commitB = debounce((v) => { + const pct = Math.max(DS.SLIDERS.brightness.floor, v); + if (pct !== DS.state.brightness) DS.setSlider("brightness", pct, fw); + }, 350); + DUPRE.detentFader(fw, { + value: DS.state.brightness, + detents: [25, 50, 75], + onChange: (v, label) => { + roB.innerHTML = "brightness: <b>" + v + "%</b>" + (label.includes("detent") ? " · <b>parked</b>" : ""); + if (!booting) commitB(v); + }, + }); + + const dw = document.getElementById("drum-well"); + dw.innerHTML = ""; + const roK = document.getElementById("ro-k"); + const commitK = debounce((vals) => { + const pct = Math.round(vals[0]) * 10; + if (pct !== DS.state.kbd) DS.setSlider("kbd", pct, dw); + }, 350); + DUPRE.drumRoller(dw, { + title: "KBD BACKLIGHT ×10", + channels: [{ name: "KBD", v: Math.round(DS.state.kbd / 10) }], + min: 0, + max: 10, + onChange: (vals) => { + roK.innerHTML = "keyboard: <b>" + Math.round(vals[0]) * 10 + "%</b>"; + if (!booting) commitK(vals); + }, + }); + + booting = false; +} + +DS.onChange(render); +render(); +</script> +</body> +</html> |