aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/prototypes/dupre-kit-additions.js30
-rw-r--r--docs/prototypes/gallery-widget.el29
-rw-r--r--docs/prototypes/gen_tokens.py21
-rw-r--r--docs/prototypes/panel-widget-gallery.html14
-rw-r--r--docs/prototypes/widgets.js160
-rw-r--r--tests/gallery-probes/probe.mjs2
-rw-r--r--tests/gallery-probes/test_dupre_merge.py53
-rw-r--r--tests/gallery-tokens/test_gen_tokens.py22
-rw-r--r--tests/gallery-widgets/test-gallery-widget.el20
9 files changed, 284 insertions, 67 deletions
diff --git a/docs/prototypes/dupre-kit-additions.js b/docs/prototypes/dupre-kit-additions.js
index 005a577..b1846a2 100644
--- a/docs/prototypes/dupre-kit-additions.js
+++ b/docs/prototypes/dupre-kit-additions.js
@@ -5,12 +5,9 @@
* so they can merge back into the kit with gallery cards.
*
* Load AFTER widgets.js. Contents:
- * - DUPRE.detentFader (NEW) — multi-detent slide attenuator with
- * speedbump drag physics.
- * - DUPRE.drumRoller (UPGRADE) — backward-compatible redefinition:
- * 1..N channels (stock hardcodes exactly two), configurable min/max
- * range and stage height. Defaults reproduce the stock instrument.
- * - DUPRE.guardedToggle (UPGRADE) — rotateX throw (no planar spin).
+ * - detentFader, drumRoller and guardedToggle have merged into widgets.js;
+ * their retired implementation references remain local below while the
+ * remaining additions continue to load in older casting prototypes.
* - DUPRE.batToggle (UPGRADE) — same throw fix.
* - DUPRE.slideRule (UPGRADE) — width option; the printed scale
* spreads its stops proportionally. Default keeps stock 180px.
@@ -101,21 +98,6 @@
const st = document.createElement('style');
st.id = 'dupre-additions-css';
st.textContent = `
-.dupre-dfader{position:relative;display:inline-block;width:230px;height:36px;cursor:ew-resize;touch-action:none}
-.dupre-dfader .df-slot{position:absolute;left:8px;right:8px;top:15px;height:6px;border-radius:4px;
- background:var(--well,#0a0c0d);border:1px solid #0a0908;box-shadow:inset 0 1px 2px #000}
-.dupre-dfader .df-fill{position:absolute;left:9px;top:16px;height:4px;border-radius:3px;
- background:linear-gradient(180deg,var(--amber-grad-top,#f2c76a),var(--gold,#e2a038));pointer-events:none}
-.dupre-dfader .df-tick{position:absolute;top:9px;width:2px;height:18px;border-radius:1px;
- background:var(--steel,#969385);opacity:.55;transform:translateX(-50%);pointer-events:none}
-.dupre-dfader .df-tick.df-park{background:var(--gold-hi,#ffbe54);opacity:1;
- box-shadow:0 0 5px rgba(var(--glow-hi,255,190,84),.7)}
-.dupre-dfader .df-cap{position:absolute;top:5px;width:12px;height:26px;border-radius:3px;transform:translateX(-50%);
- background:linear-gradient(90deg,#7e7a70,#e8e5db 45%,#8a867c);border:1px solid #4e4a42;
- box-shadow:0 2px 4px #000a;pointer-events:none}
-.dupre-dfader .df-cap::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:2px;
- transform:translateX(-50%);background:rgba(0,0,0,.35);border-radius:1px}
-.dupre-dfader.df-parked .df-cap{box-shadow:0 2px 4px #000a,0 0 7px rgba(var(--glow-hi,255,190,84),.55)}
.dupre-slsel{display:block;width:220px;cursor:pointer;touch-action:none;user-select:none}
.dupre-slsel .sl-cols{display:grid}
.dupre-slsel .sl-col{display:flex;flex-direction:column;align-items:center;gap:3px;padding-bottom:5px}
@@ -177,7 +159,7 @@
(the detent value or null).
CSS lives in the additions block (.dupre-dfader); no other styles
involved. */
- DUPRE.detentFader = function (host, opts = {}) {
+ const mergedDetentFaderReference = function (host, opts = {}) {
const onChange = opts.onChange || noop;
const detents = (opts.detents || [50]).slice().sort((a, b) => a - b);
const MAGNET = opts.magnet !== undefined ? opts.magnet : 3;
@@ -255,7 +237,7 @@
each drum drags vertically on its own hit strip.
SVG-built: styling is inline attributes plus the shared .rsvg stage
block of DUPRE_CSS; gradients are additions-scoped until merge. */
- DUPRE.drumRoller = function (host, opts = {}) {
+ const mergedDrumRollerReference = function (host, opts = {}) {
const onChange = opts.onChange || noop;
const MIN = opts.min !== undefined ? opts.min : 1;
const MAX = opts.max !== undefined ? opts.max : 10;
@@ -313,7 +295,7 @@
foreshortens through the pivot and re-extends downward, never sweeping
sideways. Contract unchanged from stock: opts onLabel/offLabel/on/
onChange(on, 'ON'|'OFF'); handle {el, get, set}. */
- DUPRE.guardedToggle = function (host, opts = {}) {
+ const mergedGuardedToggleReference = function (host, opts = {}) {
const onChange = opts.onChange || noop;
const s = stageSvg(host, 'rsvg press', 90, 100), cx = 45, cy = 52;
grad('dkaDiscRed', 'radialGradient', { cx: '42%', cy: '34%', r: '85%' }, [['0', '#d98a6f'], ['.65', 'var(--fail)'], ['1', '#7a2a1a']]);
diff --git a/docs/prototypes/gallery-widget.el b/docs/prototypes/gallery-widget.el
index 5a80e59..543affe 100644
--- a/docs/prototypes/gallery-widget.el
+++ b/docs/prototypes/gallery-widget.el
@@ -49,6 +49,12 @@ a typo'd token must fail loudly, not render black."
"Needle angle at value 0, degrees from vertical (negative = left).")
(defconst gallery-widget--gauge-max-deg 60.0
"Needle angle at value 100.")
+(defconst gallery-widget--gauge-cx 48
+ "Horizontal center of the needle gauge.")
+(defconst gallery-widget--gauge-cy 48
+ "Vertical center and baseline of the needle gauge.")
+(defconst gallery-widget--gauge-radius 47
+ "Outer radius of the needle gauge.")
(defun gallery-widget--clamp-value (value)
"Validate VALUE is a number and clamp it to the gauge's 0-100 range.
@@ -76,27 +82,36 @@ Positive angles swing right, matching the gauge's needle travel."
"Format coordinate N with two decimals for stable, readable SVG output."
(format "%.2f" n))
+(defun gallery-widget--semicircle-path (cx cy radius &optional close)
+ "Return an upper semicircle path centered at (CX, CY) with RADIUS.
+Append a closing segment when CLOSE is non-nil."
+ (format "M %g %g A %g %g 0 0 1 %g %g%s"
+ (- cx radius) cy radius radius (+ cx radius) cy
+ (if close " Z" "")))
+
(defun gallery-widget--node (svg tag &rest attrs)
"Append a TAG element with ATTRS plist to SVG and return it."
(let ((node (dom-node tag
(cl-loop for (k v) on attrs by #'cddr
collect (cons (intern (substring (symbol-name k) 1))
v)))))
- (svg--append svg node)
+ (dom-append-child svg node)
node))
(defun gallery-widget-needle-gauge (value)
"Render the gallery's needle gauge at VALUE (0-100) as an svg.el object.
Geometry mirrors the web card: 96px-wide semicircular dial, pivot at its
bottom center, 40px needle sweeping -60..+60 degrees, readout below."
- (let* ((w 96) (h 64) (cx 48.0) (cy 48.0)
+ (let* ((w 96) (h 64)
+ (cx gallery-widget--gauge-cx)
+ (cy gallery-widget--gauge-cy)
;; clamp once; the angle and the readout render the same value
(value (gallery-widget--clamp-value value))
(angle (gallery-widget--needle-angle value))
(tip (gallery-widget--polar cx cy 40.0 angle))
(svg (svg-create w h :viewBox (format "0 0 %d %d" w h))))
;; glow filter: the SVG equivalent of the web card's box-shadow bloom
- (svg--append
+ (dom-append-child
svg
(dom-node 'defs nil
(dom-node 'filter
@@ -107,13 +122,15 @@ bottom center, 40px needle sweeping -60..+60 degrees, readout below."
(stdDeviation . "2"))))))
;; arc: 2px wash stroke, centerline radius 47 (96px circle, 2px border)
(gallery-widget--node svg 'path
- :d "M 1 48 A 47 47 0 0 1 95 48"
+ :d (gallery-widget--semicircle-path
+ cx cy gallery-widget--gauge-radius)
:fill "none"
:stroke (gallery-widget-token 'wash)
:stroke-width "2")
;; ticks: 8px steel radials at -60 / 0 / +60
(dolist (deg '(-60.0 0.0 60.0))
- (let ((outer (gallery-widget--polar cx cy 47.0 deg))
+ (let ((outer (gallery-widget--polar
+ cx cy gallery-widget--gauge-radius deg))
(inner (gallery-widget--polar cx cy 39.0 deg)))
(gallery-widget--node svg 'line
:class "tick"
@@ -148,7 +165,7 @@ bottom center, 40px needle sweeping -60..+60 degrees, readout below."
;; lower half of its 8px circle; here the dome is drawn directly)
(gallery-widget--node svg 'path
:class "hub"
- :d "M 44 48 A 4 4 0 0 1 52 48 Z"
+ :d (gallery-widget--semicircle-path cx cy 4 t)
:fill (gallery-widget-token 'gold))
;; value readout, matching the web card's cream bold figure
(svg-text svg (format "%d%%" (round value))
diff --git a/docs/prototypes/gen_tokens.py b/docs/prototypes/gen_tokens.py
index 9f011e9..7c80985 100644
--- a/docs/prototypes/gen_tokens.py
+++ b/docs/prototypes/gen_tokens.py
@@ -70,6 +70,12 @@ def resolve_color(tokens, key):
raise KeyError(key)
+def iter_section_items(tokens, sections):
+ """Yield (name, value) pairs from SECTIONS in their declared order."""
+ for section in sections:
+ yield from tokens.get(section, {}).items()
+
+
def _el_str(v):
"""Quote a value as an elisp string literal, escaping backslashes/quotes."""
return '"' + v.replace("\\", "\\\\").replace('"', '\\"') + '"'
@@ -78,9 +84,8 @@ def _el_str(v):
def emit_web_css(tokens):
"""The inner :root block: hyphenated --vars, glows as rgb triples."""
lines = []
- for section in COLOR_SECTIONS:
- for k, v in tokens.get(section, {}).items():
- lines.append(f"--{k}:{v};")
+ for k, v in iter_section_items(tokens, COLOR_SECTIONS):
+ lines.append(f"--{k}:{v};")
for name, source in tokens.get("glow", {}).items():
lines.append(f"--{name}:{hex_to_triple(resolve_color(tokens, source))};")
for k, v in tokens.get("font", {}).items():
@@ -100,9 +105,8 @@ def emit_waybar_gtk(tokens):
" GTK CSS has no custom properties; reference these as @name, and use",
" alpha(@name, 0.5) where the web build uses rgba(var(--name),.5). */",
]
- for section in COLOR_SECTIONS:
- for k, v in tokens.get(section, {}).items():
- lines.append(f"@define-color {gtk(k)} {v};")
+ for k, v in iter_section_items(tokens, COLOR_SECTIONS):
+ lines.append(f"@define-color {gtk(k)} {v};")
for name, source in tokens.get("glow", {}).items():
lines.append(f"@define-color {gtk(name)} {resolve_color(tokens, source)};")
return "\n".join(lines)
@@ -111,9 +115,8 @@ def emit_waybar_gtk(tokens):
def emit_elisp(tokens):
"""An alist of (name . hex) plus timing, for the future svg.el renderer."""
pairs = []
- for section in COLOR_SECTIONS:
- for k, v in tokens.get(section, {}).items():
- pairs.append(f"({k} . {_el_str(v)})")
+ for k, v in iter_section_items(tokens, COLOR_SECTIONS):
+ pairs.append(f"({k} . {_el_str(v)})")
for name, source in tokens.get("glow", {}).items():
pairs.append(f"({name} . {_el_str(resolve_color(tokens, source))})")
for k, v in tokens.get("font", {}).items():
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 9ff492d..f53b823 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -581,6 +581,13 @@ const INFO={
origin:'Hardware samplers.',difficulty:'Expert.',
prefer:'The region IS the value and the data must stay visible.',
period:'1980s sampler styling.'},
+'A1':{input:'Drag horizontally; the thumb catches at each marked detent and needs an extra push to break free. Drag-only.',
+ solves:'A continuous value with a few mechanically meaningful resting points.',
+ use:'Specialty. Shines for balances and thresholds where common values should be felt without losing the continuum.',
+ limits:'Detents need enough spacing to remain distinct; a dense set should be a stepped selector instead.',
+ origin:'Console faders with center and calibrated detents.',difficulty:'Easy.',
+ prefer:'Use when the stops should slow a sweep, not quantize it.',
+ period:'1960s onward studio and control-console hardware.'},
'R20':{input:'Drag each drum vertically to roll it. Drag-only.',
solves:'Stepped selection with a satisfying mechanical roll.',
use:'Specialty. Shines for paired coarse selections (EQ turnovers).',
@@ -1394,9 +1401,12 @@ card(C,'R18','Thumb-slide attenuator pair',
card(C,'R19','Waveform region editor',
(st,rd)=>DUPRE.waveRegion(st,{start:22,end:76,onChange:(v,t)=>rd(t)}),
'<b>pick a region on the wave.</b> The monochrome LCD shows the sample; drag near either flag to move START or END, and the selection draws bright. After a sampler edit screen.');
+card(C,'A1','Detent fader',
+ (st,rd)=>DUPRE.detentFader(st,{value:50,detents:[25,50,75],onChange:(v,t)=>rd(t)}),
+ '<b>continuous travel with three speedbumps.</b> The cap catches at each calibrated tick and needs an extra push to leave it. Drag through the rail; the readout names a parked detent.');
card(C,'R20','Drum roller selector',
- (st,rd)=>DUPRE.drumRoller(st,{onChange:(v,t)=>rd(t)}),
- '<b>roll to the number.</b> The numbered drum shows through a tall window and the center value sits on an inverted chip. Drag either drum. After an equalizer tone selector.');
+ (st,rd)=>DUPRE.drumRoller(st,{min:0,max:12,channels:[{name:'HIGH',v:6},{name:'MID',v:4},{name:'LOW',v:8}],onChange:(v,t)=>rd(t)}),
+ '<b>roll to the number.</b> Three independently sized numbered drums demonstrate the generalized channel bank and range; each center value sits on an inverted chip. Drag any drum. After an equalizer tone selector.');
card(C,'R21','LED program row',
(st,rd)=>DUPRE.ledRow(st,{index:5,onChange:(v,t)=>rd(t)}),
'<b>identical keys, one lit dot.</b> The LED above the button carries the selection, not the key itself — the classic program-select row. Click a key; readout names the program. After a digital reverb’s program bank.');
diff --git a/docs/prototypes/widgets.js b/docs/prototypes/widgets.js
index 57ad33e..508ec3c 100644
--- a/docs/prototypes/widgets.js
+++ b/docs/prototypes/widgets.js
@@ -1910,56 +1910,138 @@ DUPRE.waveRegion = function (host, opts = {}) {
return { el: s, get: () => ({ s: S, e: E }), set };
};
-/* R20 drum roller selector — numbered paper drum in a window, center chip reads it.
+/* A1 multi-detent fader — a horizontal attenuator with speedbump detents.
+
+ Contract:
+ opts: value (0-100, default 68); detents (default [50]); magnet (capture
+ distance, default 3); escape (extra distance needed to leave a
+ detent, default 3); onChange(value, label).
+ handle: el, get(), set(value), parked() (detent value or null). */
+DUPRE.detentFader = function (host, opts = {}) {
+ const onChange = opts.onChange || noop;
+ const detents = (opts.detents || [50]).slice().sort((a, b) => a - b);
+ const MAGNET = opts.magnet !== undefined ? opts.magnet : 3;
+ const ESCAPE = opts.escape !== undefined ? opts.escape : 3;
+ const el = document.createElement('span'); el.className = 'dupre-dfader';
+ el.innerHTML = '<span class="df-slot"></span><span class="df-fill"></span>';
+ const ticks = detents.map(d => {
+ const t = document.createElement('span'); t.className = 'df-tick';
+ t.style.left = `calc(8px + ${d / 100} * (100% - 16px))`;
+ el.appendChild(t); return t;
+ });
+ const cap = document.createElement('span'); cap.className = 'df-cap';
+ el.appendChild(cap); host.appendChild(el);
+
+ let v, park = null;
+ const paint = () => {
+ const left = `calc(8px + ${v / 100} * (100% - 16px))`;
+ cap.style.left = left;
+ el.querySelector('.df-fill').style.width =
+ `calc(${v / 100} * (100% - 18px))`;
+ el.classList.toggle('df-parked', park !== null);
+ ticks.forEach((t, i) =>
+ t.classList.toggle('df-park', detents[i] === park));
+ };
+ const apply = raw => {
+ raw = Math.max(0, Math.min(100, raw));
+ if (park !== null) {
+ if (Math.abs(raw - park) <= MAGNET + ESCAPE) raw = park;
+ else park = null;
+ }
+ if (park === null) {
+ const near = detents.find(d => Math.abs(raw - d) <= MAGNET);
+ if (near !== undefined) { park = near; raw = near; }
+ }
+ const nv = Math.round(raw);
+ if (nv === v && el.dataset.painted) return;
+ v = nv; el.dataset.painted = '1'; paint();
+ onChange(v, park !== null ? `${v} · detent` : String(v));
+ };
+ el.addEventListener('pointerdown', e => {
+ el.setPointerCapture(e.pointerId);
+ const pct = m => {
+ const r = el.getBoundingClientRect();
+ return ((m.clientX - r.left - 8) / (r.width - 16)) * 100;
+ };
+ apply(pct(e));
+ const move = m => apply(pct(m));
+ const up = () => {
+ el.removeEventListener('pointermove', move);
+ el.removeEventListener('pointerup', up);
+ el.removeEventListener('pointercancel', up);
+ };
+ el.addEventListener('pointermove', move);
+ el.addEventListener('pointerup', up);
+ el.addEventListener('pointercancel', up);
+ e.preventDefault();
+ });
+ v = -1; apply(opts.value !== undefined ? opts.value : 68);
+ return { el, get: () => v, set: apply, parked: () => park };
+};
+
+/* R20 drum roller selector — numbered paper drums in a window.
Contract (everything a consumer needs; no page globals touched):
opts: title (engraved header, default 'EQUALIZER'); channels (array of
- { name, v } drums, v 1-10, default HIGH/LOW pair — the layout is
- sized for two); onChange(values array, 'NAME v · NAME v') fires on
- every set, including the initial paint.
- handle: el, get() (values array), set(i, v) — v clamps 1-10; each drum
- drags vertically on its own hit strip.
+ { name, v } drums, any count >= 1, default HIGH/LOW pair);
+ min/max (default 1/10); height (default 140); onChange(values,
+ 'NAME v · ...') fires on every set, including initial paint.
+ handle: el, get() (values array), set(i, v); each drum drags vertically.
SVG-built: styling is inline attributes plus the shared .rsvg stage block
of DUPRE_CSS; gradients register in the shared defs plate. */
DUPRE.drumRoller = function (host, opts = {}) {
const onChange = opts.onChange || noop;
- const chans = (opts.channels || [{ name: 'HIGH', v: 6 }, { name: 'LOW', v: 8 }]).map(c => ({ name: c.name, v: c.v }));
- const s = stageSvg(host, 'rsvg', 130, 140), cy = 76, step = 17;
+ const MIN = opts.min !== undefined ? opts.min : 1;
+ const MAX = opts.max !== undefined ? opts.max : 10;
+ const chans = (opts.channels ||
+ [{ name: 'HIGH', v: 6 }, { name: 'LOW', v: 8 }])
+ .map(c => ({ name: c.name, v: c.v }));
+ const N = chans.length;
+ const vw = Math.max(130, N * 50 + 40);
+ const vh = Math.max(100, opts.height !== undefined ? opts.height : 140);
+ const railY = 24, railH = vh - 36, winY = railY + 4, winH = railH - 8;
+ const s = stageSvg(host, 'rsvg', vw, vh);
+ const cy = winY + winH / 2, step = 17;
gradDef('thRail', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 0 }, [['0', '#3a3733'], ['.5', '#211f1c'], ['1', '#161412']]);
gradDef('drPaper', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 0 }, [['0', '#cfc6a8'], ['.5', '#ece4c8'], ['1', '#c6bd9e']]);
gradDef('drCurve', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', 'rgba(0,0,0,.4)'], ['.28', 'rgba(0,0,0,0)'], ['.72', 'rgba(0,0,0,0)'], ['1', 'rgba(0,0,0,.4)']]);
const localDefs = svgEl(s, 'defs', {});
- svgEl(s, 'text', { x: 65, y: 12, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.18em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = opts.title || 'EQUALIZER';
+ if (opts.title !== '')
+ svgEl(s, 'text', { x: vw / 2, y: 12, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.18em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = opts.title || 'EQUALIZER';
const grps = [];
+ const label = () =>
+ chans.map(c => `${c.name} ${Math.round(c.v)}`).join(' · ');
const set = (i, v) => {
- v = Math.max(1, Math.min(10, v)); chans[i].v = v;
+ v = Math.max(MIN, Math.min(MAX, v)); chans[i].v = v;
const p = grps[i];
p.nums.style.transform = `translateY(${(v - p.base) * step}px)`;
p.chip.textContent = Math.round(v);
- onChange(chans.map(c => c.v), `${chans[0].name} ${Math.round(chans[0].v)} · ${chans[1].name} ${Math.round(chans[1].v)}`);
+ onChange(chans.map(c => c.v), label());
};
+ const x0 = (vw - (N - 1) * 50) / 2;
chans.forEach((ch, i) => {
- const x = 45 + i * 50, cid = uid('drClip');
- svgEl(s, 'text', { x: x + 18, y: 34, 'text-anchor': 'middle', 'font-size': 8, fill: 'var(--steel)' }).textContent = '+';
- svgEl(s, 'text', { x: x + 18, y: 124, 'text-anchor': 'middle', 'font-size': 8, fill: 'var(--steel)' }).textContent = '−';
- svgEl(s, 'rect', { x: x - 12, y: 24, width: 24, height: 104, rx: 4, fill: 'url(#thRail)', stroke: '#0a0908', 'stroke-width': 1.2 });
+ const x = x0 + i * 50, cid = uid('drClip');
+ svgEl(s, 'text', { x: x + 18, y: winY + 8, 'text-anchor': 'middle', 'font-size': 8, fill: 'var(--steel)' }).textContent = '+';
+ svgEl(s, 'text', { x: x + 18, y: winY + winH - 2, 'text-anchor': 'middle', 'font-size': 8, fill: 'var(--steel)' }).textContent = '−';
+ svgEl(s, 'rect', { x: x - 12, y: railY, width: 24, height: railH, rx: 4, fill: 'url(#thRail)', stroke: '#0a0908', 'stroke-width': 1.2 });
const clip = svgEl(localDefs, 'clipPath', { id: cid });
- svgEl(clip, 'rect', { x: x - 9, y: 28, width: 18, height: 96 });
- svgEl(s, 'rect', { x: x - 9, y: 28, width: 18, height: 96, fill: 'url(#drPaper)' });
+ svgEl(clip, 'rect', { x: x - 9, y: winY, width: 18, height: winH });
+ svgEl(s, 'rect', { x: x - 9, y: winY, width: 18, height: winH, fill: 'url(#drPaper)' });
const g = svgEl(s, 'g', { 'clip-path': `url(#${cid})` });
const nums = svgEl(g, 'g', {}); nums.style.transition = 'transform .12s';
- for (let n = 1; n <= 10; n++)
+ for (let n = MIN; n <= MAX; n++)
svgEl(nums, 'text', { x, y: cy + 3 + (ch.v - n) * step, 'text-anchor': 'middle', 'font-size': 9, 'font-weight': 700, 'font-family': 'var(--mono)', fill: '#2b2418' }).textContent = n;
- svgEl(g, 'rect', { x: x - 9, y: 28, width: 18, height: 96, fill: 'url(#drCurve)', 'pointer-events': 'none' });
+ svgEl(g, 'rect', { x: x - 9, y: winY, width: 18, height: winH, fill: 'url(#drCurve)', 'pointer-events': 'none' });
svgEl(s, 'rect', { x: x - 8, y: cy - 6.5, width: 16, height: 13, rx: 1.5, fill: '#1a1613', opacity: .92 });
const chip = svgEl(s, 'text', { x, y: cy + 3, 'text-anchor': 'middle', 'font-size': 9, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--cream)' });
- svgEl(s, 'text', { x, y: 136, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.12em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = ch.name;
- const hit = svgEl(s, 'rect', { x: x - 14, y: 24, width: 28, height: 104, fill: 'transparent' });
+ svgEl(s, 'text', { x, y: vh - 4, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.12em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = ch.name;
+ const hit = svgEl(s, 'rect', { x: x - 14, y: railY, width: 28, height: railH, fill: 'transparent' });
hit.style.cursor = 'ns-resize';
grps.push({ nums, chip, base: ch.v });
- dragDelta(hit, () => chans[i].v, v => set(i, v), { min: 1, max: 10, sens: .08 });
+ dragDelta(hit, () => chans[i].v, v => set(i, v),
+ { min: MIN, max: MAX, sens: (MAX - MIN) / (winH * 1.1) });
});
- set(0, chans[0].v); set(1, chans[1].v);
+ chans.forEach((c, i) => set(i, c.v));
return { el: s, get: () => chans.map(c => c.v), set };
};
@@ -2251,11 +2333,13 @@ DUPRE.guardedToggle = function (host, opts = {}) {
svgEl(lever, 'path', { d: `M ${cx - 3} ${cy} L ${cx - 2} 26 L ${cx + 2} 26 L ${cx + 3} ${cy} Z`, fill: 'url(#chromeG)', stroke: '#4e4a42', 'stroke-width': .5 });
svgEl(lever, 'rect', { x: cx - 4.5, y: 16, width: 9, height: 12, rx: 2, fill: 'url(#tipG)', stroke: '#5e5a52', 'stroke-width': .6 });
for (let r = 0; r < 4; r++) svgEl(lever, 'line', { x1: cx - 3.5, y1: 18.5 + r * 2.4, x2: cx + 3.5, y2: 18.5 + r * 2.4, stroke: 'rgba(0,0,0,.25)', 'stroke-width': .8 });
- lever.style.transformOrigin = `${cx}px ${cy}px`; lever.style.transition = 'transform .12s';
+ lever.style.transformBox = 'view-box';
+ lever.style.transformOrigin = `${cx}px ${cy}px`;
+ lever.style.transition = 'transform .16s ease-in-out';
let on;
const set = v => {
on = !!v;
- lever.style.transform = on ? 'rotate(0deg)' : 'rotate(180deg)';
+ lever.style.transform = on ? 'rotateX(0deg)' : 'rotateX(180deg)';
lblOn.setAttribute('fill', on ? 'var(--gold-hi)' : 'var(--dim)');
lblOff.setAttribute('fill', on ? 'var(--dim)' : 'var(--gold-hi)');
onChange(on, on ? 'ON' : 'OFF');
@@ -6089,6 +6173,23 @@ const DUPRE_CSS = `
.dupre-patch svg{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.dupre-patch svg path{fill:none;stroke:var(--gold);stroke-width:2.4;opacity:.85;stroke-linecap:round}
+/* detent fader */
+.dupre-dfader{position:relative;display:inline-block;width:230px;height:36px;cursor:ew-resize;touch-action:none}
+.dupre-dfader .df-slot{position:absolute;left:8px;right:8px;top:15px;height:6px;border-radius:4px;
+ background:var(--well,#0a0c0d);border:1px solid #0a0908;box-shadow:inset 0 1px 2px #000}
+.dupre-dfader .df-fill{position:absolute;left:9px;top:16px;height:4px;border-radius:3px;
+ background:linear-gradient(180deg,var(--amber-grad-top,#f2c76a),var(--gold,#e2a038));pointer-events:none}
+.dupre-dfader .df-tick{position:absolute;top:9px;width:2px;height:18px;border-radius:1px;
+ background:var(--steel,#969385);opacity:.55;transform:translateX(-50%);pointer-events:none}
+.dupre-dfader .df-tick.df-park{background:var(--gold-hi,#ffbe54);opacity:1;
+ box-shadow:0 0 5px rgba(var(--glow-hi,255,190,84),.7)}
+.dupre-dfader .df-cap{position:absolute;top:5px;width:12px;height:26px;border-radius:3px;transform:translateX(-50%);
+ background:linear-gradient(90deg,#7e7a70,#e8e5db 45%,#8a867c);border:1px solid #4e4a42;
+ box-shadow:0 2px 4px #000a;pointer-events:none}
+.dupre-dfader .df-cap::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:2px;
+ transform:translateX(-50%);background:rgba(0,0,0,.35);border-radius:1px}
+.dupre-dfader.df-parked .df-cap{box-shadow:0 2px 4px #000a,0 0 7px rgba(var(--glow-hi,255,190,84),.55)}
+
/* ===== reference-batch (R) instruments — SVG-first, after period hardware ===== */
.rsvg{display:block}
.rsvg.drag{cursor:ns-resize;touch-action:none}
@@ -6136,6 +6237,15 @@ DUPRE.radarSweep.POLICY = { kind: 'screen',
DUPRE.abcKeypad.POLICY = { kind: 'screen',
why: 'The entry window is a screen like any other; its phosphor was made in several colours. (Mixed card: the keys are fixed-function and not a colour choice.)',
authentic: 'The window’s screen family. The keycap colours are functional and stay put.' };
+DUPRE.detentFader.POLICY = { kind: 'relational',
+ why: 'The gold parked detent only means anything against the quieter ordinary scale ticks.',
+ authentic: 'The detent and scale remain a contrasting pair; their material finishes and spacing may vary.' };
+DUPRE.drumRoller.POLICY = { kind: 'material',
+ why: 'Its colours describe paper, ink and the dark mechanical housing rather than application state.',
+ authentic: 'Paper and metal finishes from physical numbered drum selectors; the channel count and numeric range may vary.' };
+DUPRE.guardedToggle.POLICY = { kind: 'coded',
+ why: 'The red guard and collar mark a critical protected throw; recolouring them would erase that warning grammar.',
+ authentic: 'Red warning hardware with neutral metal lever and posts. Labels and initial position may vary.' };
Object.assign(DUPRE, { SVGNS, svgEl, polar, dragX, dragY, dragDelta, SEG, seg7, buildBars, VUDB, vuDb, SCREEN_FAMS });
window.DUPRE = DUPRE;
diff --git a/tests/gallery-probes/probe.mjs b/tests/gallery-probes/probe.mjs
index 5f56f46..9d230c0 100644
--- a/tests/gallery-probes/probe.mjs
+++ b/tests/gallery-probes/probe.mjs
@@ -97,7 +97,7 @@ try {
// 1. card count (the instruments/row default is checked in 1h)
const cards = await evl(`document.querySelectorAll('.card').length`);
- ok('111 cards', cards === 111, `got ${cards}`);
+ ok('112 cards', cards === 112, `got ${cards}`);
// 1b. Every card carries a spec sheet. R58 shipped without one and nothing
// noticed — the sheet is the card's actual specification, so a card without
diff --git a/tests/gallery-probes/test_dupre_merge.py b/tests/gallery-probes/test_dupre_merge.py
new file mode 100644
index 0000000..891b789
--- /dev/null
+++ b/tests/gallery-probes/test_dupre_merge.py
@@ -0,0 +1,53 @@
+"""The settings-casting widget candidates live in the canonical Dupre kit."""
+
+import os
+import unittest
+
+
+ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", ".."))
+
+
+def source(name):
+ with open(os.path.join(ROOT, "docs", "prototypes", name)) as handle:
+ return handle.read()
+
+
+class DupreMergeTests(unittest.TestCase):
+ @classmethod
+ def setUpClass(cls):
+ cls.widgets = source("widgets.js")
+ cls.additions = source("dupre-kit-additions.js")
+ cls.gallery = source("panel-widget-gallery.html")
+
+ def test_three_candidates_are_owned_only_by_the_canonical_kit(self):
+ for name in ("detentFader", "drumRoller", "guardedToggle"):
+ declaration = f"DUPRE.{name} = function"
+ self.assertEqual(self.widgets.count(declaration), 1, name)
+ self.assertNotIn(declaration, self.additions, name)
+
+ def test_detent_fader_brings_its_styles_and_policy(self):
+ self.assertIn(".dupre-dfader{", self.widgets)
+ self.assertIn("DUPRE.detentFader.POLICY", self.widgets)
+
+ def test_drum_supports_any_channel_count_and_configurable_range(self):
+ for fragment in (
+ "opts.min !== undefined",
+ "opts.max !== undefined",
+ "opts.height !== undefined",
+ "chans.forEach((c, i) => set(i, c.v))",
+ ):
+ self.assertIn(fragment, self.widgets)
+
+ def test_guarded_toggle_throws_through_the_viewer_plane(self):
+ self.assertIn("lever.style.transformBox = 'view-box'", self.widgets)
+ self.assertIn("'rotateX(180deg)'", self.widgets)
+
+ def test_gallery_specifies_detent_and_multichannel_drum(self):
+ self.assertIn("card(C,'A1','Detent fader'", self.gallery)
+ self.assertIn("channels:[{name:'HIGH'", self.gallery)
+ self.assertIn("{name:'MID'", self.gallery)
+ self.assertIn("{name:'LOW'", self.gallery)
+
+
+if __name__ == "__main__":
+ unittest.main()
diff --git a/tests/gallery-tokens/test_gen_tokens.py b/tests/gallery-tokens/test_gen_tokens.py
index 2968119..afd9db1 100644
--- a/tests/gallery-tokens/test_gen_tokens.py
+++ b/tests/gallery-tokens/test_gen_tokens.py
@@ -95,6 +95,28 @@ class ResolveColor(unittest.TestCase):
gt.resolve_color(FIXTURE, "nonexistent")
+class IterSectionItems(unittest.TestCase):
+ def test_preserves_section_and_item_order(self):
+ self.assertEqual(
+ list(gt.iter_section_items(FIXTURE, ("amber", "palette"))),
+ [
+ ("gold", "#e2a038"),
+ ("gold-hi", "#ffbe54"),
+ ("amber-grad-top", "#f2c76a"),
+ ("ground", "#151311"),
+ ("wash", "#2c2f32"),
+ ("slate-hi", "#54677d"),
+ ],
+ )
+
+ def test_missing_and_empty_sections_contribute_no_items(self):
+ tokens = {"palette": {}, "amber": {"gold": "#e2a038"}}
+ self.assertEqual(
+ list(gt.iter_section_items(tokens, ("missing", "palette", "amber"))),
+ [("gold", "#e2a038")],
+ )
+
+
class EmitWebCss(unittest.TestCase):
def setUp(self):
self.css = gt.emit_web_css(FIXTURE)
diff --git a/tests/gallery-widgets/test-gallery-widget.el b/tests/gallery-widgets/test-gallery-widget.el
index c0d38b4..9a3c29f 100644
--- a/tests/gallery-widgets/test-gallery-widget.el
+++ b/tests/gallery-widgets/test-gallery-widget.el
@@ -54,6 +54,26 @@
(should-error (gallery-widget--needle-angle "fifty"))
(should-error (gallery-widget--needle-angle nil)))
+;;; --- shared SVG geometry ---
+
+(ert-deftest gallery-widget-semicircle-path-normal ()
+ "A semicircle path is derived from center and radius, not copied literals."
+ (should (equal (gallery-widget--semicircle-path 48 48 47)
+ "M 1 48 A 47 47 0 0 1 95 48")))
+
+(ert-deftest gallery-widget-semicircle-path-can-close-a-hub ()
+ "The same geometry helper closes the smaller half-dome hub."
+ (should (equal (gallery-widget--semicircle-path 48 48 4 t)
+ "M 44 48 A 4 4 0 0 1 52 48 Z")))
+
+(ert-deftest gallery-widget-source-uses-only-public-dom-append ()
+ "The renderer must not depend on svg.el's private `svg--append' API."
+ (with-temp-buffer
+ (insert-file-contents
+ (expand-file-name "docs/prototypes/gallery-widget.el"
+ test-gallery-widget--root))
+ (should-not (search-forward "svg--append" nil t))))
+
;;; --- rendered SVG structure ---
(defun test-gallery-widget--svg-string (value)