curator A2: show derived filter math next to each slider (hue degrees, sat/bri/con percent)

7431b12319f8702f85bd60c398709a1775835542 · 2026-05-31 21:09:42 -0700 · Steve Abrams
Files touched

M YOLO_BACKLOG_2026-05-31.md
M public/admin/cactus-curator.html
Diff

commit 7431b12319f8702f85bd60c398709a1775835542
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sun May 31 21:09:42 2026 -0700

    curator A2: show derived filter math next to each slider (hue degrees, sat/bri/con percent)
---
 YOLO_BACKLOG_2026-05-31.md       |  3 ++-
 public/admin/cactus-curator.html | 12 +++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/YOLO_BACKLOG_2026-05-31.md b/YOLO_BACKLOG_2026-05-31.md
index 4a281dc..ed10a83 100644
--- a/YOLO_BACKLOG_2026-05-31.md
+++ b/YOLO_BACKLOG_2026-05-31.md
@@ -16,7 +16,7 @@ Self-contained in `public/admin/cactus-curator.html` — zero `server.js` risk,
 ## Backlog (prioritized)
 
 - [x] **A1 · Adjustment presets** — browser-verified (Vivid sat1.40 / B&W sat0 / Neutral→none, chips exclusive) — preset chips in the panel (Vivid / Muted / Warm / Cool / B&W / Neutral) that set the four sliders to curated HSB+contrast combos; persists like the sliders.
-- [ ] **A2 · Percent readouts** — show the real filter math next to each slider (e.g. `Sat 158 · 124%`, `Hue +18°`, `Con 100%`) so the value is legible, not just the raw 0–255.
+- [x] **A2 · Percent readouts** — browser-verified (Vivid sat 178·140%, Warm hue 110·-24°, Neutral ·100%) — — show the real filter math next to each slider (e.g. `Sat 158 · 124%`, `Hue +18°`, `Con 100%`) so the value is legible, not just the raw 0–255.
 - [ ] **A3 · Live before/after chip** — a small sample swatch in the panel showing the current design (or a representative card) with vs without the filter, updating live as sliders move.
 - [ ] **A4 · Apply filter to family-stack images** — the `--img-adjust` filter currently hits `#grid img` + `#modal img`; extend to `#bbstack img` so the by-base colorway stack previews the adjustment too.
 - [ ] **A5 · Per-card Bake from grid** — a hover "⤓ Bake" affordance on each card that bakes the current adjustment for that design without opening the modal (reuses `bakeAdjustment`).
@@ -36,3 +36,4 @@ TICK · TIMESTAMP · ITEM · STATUS · COMMIT
 ```
 - T0 · 2026-05-31 21:02 · loop-init (DTD focus=A) · scheduled · n/a
 - T1 · 2026-05-31 21:05 · A1 presets · done · (commit below)
+- T2 · 2026-05-31 21:11 · A2 percent readouts · done · (commit below)
diff --git a/public/admin/cactus-curator.html b/public/admin/cactus-curator.html
index 60436b8..7f3d681 100644
--- a/public/admin/cactus-curator.html
+++ b/public/admin/cactus-curator.html
@@ -173,7 +173,7 @@
   #adjPanel.on { display:flex; }
   #adjPanel .adj { display:flex; align-items:center; gap:7px; font:600 12px inherit; color:var(--mut); }
   #adjPanel .adj input[type=range] { width:120px; }
-  #adjPanel .adjval { display:inline-block; min-width:34px; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
+  #adjPanel .adjval { display:inline-block; min-width:62px; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
   #adjPanel .adjnote { font-size:11px; color:var(--mut); }
   #adjPanel .adj-presets { display:flex; gap:5px; align-items:center; }
   #adjPanel .adj-preset { font:600 11px inherit; padding:4px 9px; border-radius:6px; border:1px solid var(--line); background:#1d2023; color:var(--ink); cursor:pointer; }
@@ -1667,16 +1667,22 @@ load();
     return 'hue-rotate('+deg+'deg) saturate('+(s.sat/127).toFixed(3)+') '
          + 'brightness('+(s.bri/127).toFixed(3)+') contrast('+(s.con/100).toFixed(3)+')';
   }
+  // A2 — human-readable derived value per slider (degrees for hue, % for the rest).
+  function readout(k, val){
+    if (k==='hue'){ var d=Math.round((val-127)/127*180); return val+' · '+(d>0?'+':'')+d+'°'; }
+    if (k==='con'){ return val+' · '+Math.round(val/100*100)+'%'; }
+    return val+' · '+Math.round(val/127*100)+'%';   // sat, bri
+  }
   function apply(){
     var s = { hue:get('hue'), sat:get('sat'), bri:get('bri'), con:get('con') };
     var neutral = (s.hue===NEUTRAL.hue && s.sat===NEUTRAL.sat && s.bri===NEUTRAL.bri && s.con===NEUTRAL.con);
     document.documentElement.style.setProperty('--img-adjust', neutral ? 'none' : filterStr(s));
-    for (var k in ids){ var r=el(ids[k]); if(r){ r.value=s[k]; } var v=el(ids[k]+'V'); if(v){ v.textContent=s[k]; } }
+    for (var k in ids){ var r=el(ids[k]); if(r){ r.value=s[k]; } var v=el(ids[k]+'V'); if(v){ v.textContent=readout(k, s[k]); } }
     if (typeof markActivePreset === 'function') markActivePreset();
   }
   function bind(k){
     var r = el(ids[k]); if(!r) return;
-    r.addEventListener('input', function(){ set(k, r.value); var v=el(ids[k]+'V'); if(v) v.textContent=r.value; apply(); });
+    r.addEventListener('input', function(){ set(k, r.value); var v=el(ids[k]+'V'); if(v) v.textContent=readout(k, r.value); apply(); });
   }
   // Expose the current adjustment so the modal "Bake" can render the SAME
   // filter onto a canvas (pixel-parity with this live preview). Returns null
← b02506f curator A1: HSB Adjust presets (Neutral/Vivid/Muted/Warm/Coo · back to Wallco Ai · curator A3: live before/after preview chip in Adjust panel ( 6982a4a →