Add persistent "applies at capture, not preview" hint on the Sharpness slider (TK-12125)

b2bd89338a06324ad670830dc284bc5afbc279ff · 2026-09-24 09:02:56 -0700 · Steve Abrams

The Sharpness slider does nothing visible on the live 80ms preview by design
(capture-only unsharp mask — capture-pipeline.js applies it only when
opts.capture===true, never on the preview pass). Showroom staff drag it, see
no change, and reasonably assume it's broken.

Added a small persistent (non-tooltip) caption directly under the slider in
the two-shot panel: "Applies at capture — not shown in this preview", styled
consistent with the panel's existing dim/muted caption idiom.

Also mirrored the hint in cam.html: contrary to the ticket's assumption that
"cam.html has no panel yet", it actually has a live, wired adjustment panel
(including a functionally identical Sharpness slider) whose previewTick() also
runs capture:false — the same gap exists there. Confirmed batch.html has no
sharpness slider at all (only unrelated blur/Laplacian-variance code), so it's
correctly skipped.

Verified via a real-browser (Playwright + Chrome for Testing) check: the hint
renders whenever the panel is open, doesn't overlap or shift the layout of the
next slider (Straighten), and the Sharpness range input's width is unchanged
vs its sibling sliders. Screenshot captured for evidence.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KXUyzc9vybUz39rhnNJdwY

Files touched

M public/cam.html
M public/index.html

Diff

commit b2bd89338a06324ad670830dc284bc5afbc279ff
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 24 09:02:56 2026 -0700

    Add persistent "applies at capture, not preview" hint on the Sharpness slider (TK-12125)
    
    The Sharpness slider does nothing visible on the live 80ms preview by design
    (capture-only unsharp mask — capture-pipeline.js applies it only when
    opts.capture===true, never on the preview pass). Showroom staff drag it, see
    no change, and reasonably assume it's broken.
    
    Added a small persistent (non-tooltip) caption directly under the slider in
    the two-shot panel: "Applies at capture — not shown in this preview", styled
    consistent with the panel's existing dim/muted caption idiom.
    
    Also mirrored the hint in cam.html: contrary to the ticket's assumption that
    "cam.html has no panel yet", it actually has a live, wired adjustment panel
    (including a functionally identical Sharpness slider) whose previewTick() also
    runs capture:false — the same gap exists there. Confirmed batch.html has no
    sharpness slider at all (only unrelated blur/Laplacian-variance code), so it's
    correctly skipped.
    
    Verified via a real-browser (Playwright + Chrome for Testing) check: the hint
    renders whenever the panel is open, doesn't overlap or shift the layout of the
    next slider (Straighten), and the Sharpness range input's width is unchanged
    vs its sibling sliders. Screenshot captured for evidence.
    
    Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01KXUyzc9vybUz39rhnNJdwY
---
 public/cam.html   | 2 ++
 public/index.html | 5 ++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/cam.html b/public/cam.html
index 0442892..7adb70d 100644
--- a/public/cam.html
+++ b/public/cam.html
@@ -86,6 +86,7 @@
   .adj-sld{display:flex;align-items:center;gap:8px;height:28px}
   .adj-sld input[type=range]{flex:1;accent-color:var(--gold);height:6px;border-radius:3px}
   .adj-sld .val{font-size:12px;min-width:32px;text-align:right;color:var(--gold);font-weight:600}
+  .adj-note{display:block;margin-top:-2px;font-size:10px;line-height:1.3;color:var(--muted);font-style:italic}
   select{appearance:none;background:#16140f;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600;cursor:pointer;flex:1}
   select:focus{outline:1px solid var(--gold)}
   #adjHist{width:100%;height:40px;border:1px solid var(--line);border-radius:4px;background:#0a0905}
@@ -175,6 +176,7 @@
       <div class="adj-group">
         <label class="adj-label">Sharpness</label>
         <div class="adj-sld"><input type="range" id="adjSharpness" min="0" max="100" value="0" step="1"><span class="val" id="valSharpness">0</span></div>
+        <small class="adj-note">Applies at capture — not shown in this preview</small>
       </div>
 
       <button class="btn" id="adjReset" style="margin-top:8px">Reset to Defaults</button>
diff --git a/public/index.html b/public/index.html
index 8d02d2b..968a11d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -199,6 +199,7 @@
   .ts-tp-body{padding:12px 12px 13px;display:flex;flex-direction:column;gap:12px;max-height:46vh;overflow:auto}
   .ts-toolpanel.collapsed .ts-tp-body{display:none}
   .ts-sld{display:block}
+  .ts-sld-note{display:block;margin:4px 0 0;font-size:10px;line-height:1.3;color:var(--muted);font-style:italic}
   .ts-sld>span{display:flex;justify-content:space-between;font:700 11px/1 ui-monospace,Menlo,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 5px}
   .ts-sld>span i{color:var(--gold);font-style:normal}
   .ts-sld input[type=range]{width:100%;accent-color:var(--gold);height:34px}
@@ -746,7 +747,9 @@
       <label class="ts-sld"><span>Saturation <i id="tsvSaturation">0</i></span><input type="range" id="tssSaturation" min="-100" max="100" value="0"></label>
       <label class="ts-sld"><span>Vibrance <i id="tsvVibrance">0</i></span><input type="range" id="tssVibrance" min="-100" max="100" value="0"></label>
       <label class="ts-sld"><span>Hue <i id="tsvHue">0</i></span><input type="range" id="tssHue" min="-180" max="180" value="0"></label>
-      <label class="ts-sld"><span>Sharpness <i id="tsvSharpness">0</i></span><input type="range" id="tssSharpness" min="0" max="100" value="0"></label>
+      <label class="ts-sld"><span>Sharpness <i id="tsvSharpness">0</i></span><input type="range" id="tssSharpness" min="0" max="100" value="0">
+        <small class="ts-sld-note">Applies at capture — not shown in this preview</small>
+      </label>
       <label class="ts-sld"><span>Straighten <i id="tsvStraighten">0</i></span><input type="range" id="tssStraighten" min="-15" max="15" value="0"></label>
       <button class="ts-reset" id="tsReset">↺ Reset colour + white balance</button>
     </div>

← 9f4d2c2 Fix 3 Cody-found holes in the getUserMedia timeout fix (TK-1 · back to Dw Photo Capture · Wire ended + mute listeners on _tsTrack, scoped by generatio 0e42baf →