← back to Dw Photo Capture
photo-capture: plain 12-yr-old wording + large simple buttons across index/batch/cam
fe8bd65a56cf3d7b65dc067b5f55a67cfc530015 · 2026-09-20 08:46:40 -0700 · Steve Abrams
- Rewrite every button label, tooltip and placeholder into plain, tidy language;
gloss trade jargon inline (VID -> vendor's ID number, repeat -> how tall before
the pattern starts over, content -> what it's made of, SKU -> item's code).
- Cryptic toolbar labels made self-explanatory: 'ID F+B' -> 'Label + Photo',
'Similar' -> 'Find Similar', 'Scan' -> 'Scan Code', '🎤' -> 'Speak', 'New item' -> 'Add New'.
- Large simple buttons: .scanbtn + .btn now min-height 54px, 16px/700, flex-centered.
- camBtn keeps its camera-side state indicator ('Back camera'/'Front camera') so the
syncCamBtn() text never fights the static label.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0144TtWAejKuRDFux2or2MGH
Files touched
M public/batch.htmlM public/cam.htmlM public/index.html
Diff
commit fe8bd65a56cf3d7b65dc067b5f55a67cfc530015
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sun Sep 20 08:46:40 2026 -0700
photo-capture: plain 12-yr-old wording + large simple buttons across index/batch/cam
- Rewrite every button label, tooltip and placeholder into plain, tidy language;
gloss trade jargon inline (VID -> vendor's ID number, repeat -> how tall before
the pattern starts over, content -> what it's made of, SKU -> item's code).
- Cryptic toolbar labels made self-explanatory: 'ID F+B' -> 'Label + Photo',
'Similar' -> 'Find Similar', 'Scan' -> 'Scan Code', '🎤' -> 'Speak', 'New item' -> 'Add New'.
- Large simple buttons: .scanbtn + .btn now min-height 54px, 16px/700, flex-centered.
- camBtn keeps its camera-side state indicator ('Back camera'/'Front camera') so the
syncCamBtn() text never fights the static label.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0144TtWAejKuRDFux2or2MGH
---
public/batch.html | 10 +++++-----
public/cam.html | 2 +-
public/index.html | 50 +++++++++++++++++++++++++-------------------------
3 files changed, 31 insertions(+), 31 deletions(-)
diff --git a/public/batch.html b/public/batch.html
index dfdd011..f974c1e 100644
--- a/public/batch.html
+++ b/public/batch.html
@@ -42,7 +42,7 @@
html,body{margin:0;height:100%;min-height:calc(100dvh / var(--ui-scale));background:#000;color:var(--ink);font:15px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
@supports(height:100dvh){ .view{height:calc(100dvh / var(--ui-scale))} }
button{font-family:inherit}
- .btn{appearance:none;border:1px solid var(--gold);background:#16140f;color:var(--gold);border-radius:12px;padding:13px 22px;font-weight:700;font-size:15px;cursor:pointer}
+ .btn{appearance:none;border:1px solid var(--gold);background:#16140f;color:var(--gold);border-radius:12px;padding:15px 22px;font-weight:700;font-size:16px;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.btn.primary{background:var(--gold);color:#1b1407;border-color:var(--gold)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:#16140f}
.btn:disabled{opacity:.4}
@@ -218,7 +218,7 @@
<div class="toolpanel" id="tools">
<div class="tp-head" id="tpHead">
<span class="tp-title">📷 <b class="sideBadge" id="sideBadge">PSku Photo</b> <span class="tp-grip">⠿</span></span>
- <button class="tp-btn" id="tpToggle" title="Expand / contract">▾</button>
+ <button class="tp-btn" id="tpToggle" title="Open or close this">▾</button>
</div>
<div class="tp-body" id="tpBody">
<div class="state wait" id="state">Adjust the colour, then take the PSku photo</div>
@@ -228,15 +228,15 @@
<label class="sld"><span>Hue <i id="vHue">0</i></span><input type="range" id="sHue" min="-180" max="180" value="0"></label>
<button class="btn ghost tp-reset" id="sReset">↺ Reset colour</button>
<!-- fields — auto-filled from the label OCR; editable -->
- <div class="skuline"><input id="skuInput" placeholder="code — fills itself from the Info label" autocapitalize="characters" autocomplete="off" spellcheck="false"></div>
+ <div class="skuline"><input id="skuInput" placeholder="code — fills in from the label" autocapitalize="characters" autocomplete="off" spellcheck="false"></div>
<div class="fields">
<input id="fVendorField" class="wide" placeholder="vendor" autocapitalize="words" autocomplete="off">
<input id="fPattern" placeholder="pattern" autocapitalize="words" autocomplete="off">
<input id="fColor" placeholder="colour" autocapitalize="words" autocomplete="off">
</div>
<div class="row">
- <button class="btn ghost" id="bPrev" title="Show last code" style="padding:12px 14px">◀</button>
- <button class="btn ghost" id="detBtn" title="Technical details" style="padding:12px 14px">ⓘ</button>
+ <button class="btn ghost" id="bPrev" title="Show the last code" style="padding:12px 14px">◀</button>
+ <button class="btn ghost" id="detBtn" title="Show the technical details" style="padding:12px 14px">ⓘ</button>
<label class="chip" style="gap:6px;font-size:12px"><input type="checkbox" id="autoFire" style="width:auto"> Auto-snap</label>
<button class="shutter" id="shutter" title="Take photo"></button>
<img class="thumb" id="thumb" alt="last photo" hidden>
diff --git a/public/cam.html b/public/cam.html
index 3e8c2ae..99736fb 100644
--- a/public/cam.html
+++ b/public/cam.html
@@ -62,7 +62,7 @@
.target{font-size:13px;color:var(--muted);text-align:center;min-height:18px}
.target b{color:var(--gold);font:600 13px/1 ui-monospace,Menlo,monospace}
.hint{font-size:12px;color:var(--muted);text-align:center;max-width:340px}
- .btn{appearance:none;border:1px solid var(--gold);background:#16140f;color:var(--gold);border-radius:12px;padding:13px 22px;font-weight:700;font-size:15px;cursor:pointer}
+ .btn{appearance:none;border:1px solid var(--gold);background:#16140f;color:var(--gold);border-radius:12px;padding:15px 22px;font-weight:700;font-size:16px;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.btn.primary{background:var(--gold);color:#1b1407;border-color:var(--gold)}
.overlay{position:fixed;inset:0;z-index:50;background:#0f0e0cf2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.overlay[hidden]{display:none}
diff --git a/public/index.html b/public/index.html
index e7aecfa..8d5d1f0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -55,7 +55,7 @@
.controls{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
input[type=search],select{background:#16140f;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 11px;font-size:15px}
input[type=search]{flex:1;min-width:140px}
- .scanbtn{position:relative;overflow:hidden;background:#16140f;border:1px solid var(--gold);color:var(--gold);border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
+ .scanbtn{position:relative;overflow:hidden;background:#16140f;border:1px solid var(--gold);color:var(--gold);border-radius:12px;padding:14px 18px;font-size:16px;font-weight:700;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;cursor:pointer}
.scanbtn input{position:absolute;inset:0;opacity:0;font-size:120px;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:#16140f;color:var(--muted);font-size:13px;cursor:pointer}
@@ -396,17 +396,17 @@
</div>
</div>
<header>
- <h1>Mobile DW SKU <span>Photos</span> <a href="/selfcheck" class="ver" title="tap for self-check">__VER__</a> <button id="homeBtn" title="home">⌂</button></h1>
+ <h1>Mobile DW SKU <span>Photos</span> <a href="/selfcheck" class="ver" title="tap to check the app is working">__VER__</a> <button id="homeBtn" title="home">⌂</button></h1>
<div class="bar"><i id="prog"></i></div>
<div class="meta"><span id="count">…</span><span id="remain"></span></div>
<div class="controls">
- <input type="search" id="q" placeholder="🔎 Search name or model #…" autocapitalize="characters">
- <button class="scanbtn" id="scanBtn" title="Scan a printed SKU/model #">🔢 Scan</button>
- <button class="scanbtn" id="micBtn" title="Voice search — say a vendor, SKU, or what to look for">🎤</button>
- <button class="scanbtn" id="camBtn" title="Choose camera (back / front)">📷 Back</button>
- <button class="scanbtn" id="simBtn" title="Photograph a pattern/swatch → find this + similar across the whole catalog">🎨 Similar</button>
- <button class="scanbtn" id="fbBtn" title="Identify by photos of the BACK label + FRONT pattern (best ID: code + visual)">🔎 ID F+B</button>
- <button class="scanbtn" id="addBtn" title="Add a NEW item to the catalog + Shopify (draft)">➕ New item</button>
+ <input type="search" id="q" placeholder="🔎 Search by name or code…" autocapitalize="characters">
+ <button class="scanbtn" id="scanBtn" title="Scan a printed code (the SKU / model number)">🔢 Scan Code</button>
+ <button class="scanbtn" id="micBtn" title="Search by voice — say a brand, a code, or what you are looking for">🎤 Speak</button>
+ <button class="scanbtn" id="camBtn" title="Switch the camera (back or front)">📷 Back camera</button>
+ <button class="scanbtn" id="simBtn" title="Take a photo of the pattern to find it and ones that look like it">🎨 Find Similar</button>
+ <button class="scanbtn" id="fbBtn" title="Take 2 photos — the back label and the front pattern — to find the item">🔎 Label + Photo</button>
+ <button class="scanbtn" id="addBtn" title="Add a brand-new item (it is saved as a draft)">➕ Add New</button>
<input type="file" accept="image/*" capture="environment" id="scanInput" hidden>
<input type="file" accept="image/*" capture="environment" id="simInput" hidden>
<input type="file" accept="image/*" capture="environment" id="fbBackInput" hidden>
@@ -456,8 +456,8 @@
<span class="sf-chip" data-k="color"><b>Color</b> <i>—</i></span>
</div>
<button class="scan-flip" id="scanFlip">🔄 Flip camera</button>
- <button class="scan-logo" id="scanLogo" title="Identify the brand by its logo / typeface (local AI)">🏷 Logo</button>
- <button class="scan-pat" id="scanPat" title="Recognize the PATTERN → find this + similar across the whole catalog (local AI)">🎨 Pattern</button>
+ <button class="scan-logo" id="scanLogo" title="Find the brand from its logo">🏷 Logo</button>
+ <button class="scan-pat" id="scanPat" title="Match the pattern and find it plus similar ones">🎨 Pattern</button>
<button class="scan-cancel" id="scanCancel">✕ Cancel</button>
</div>
@@ -469,7 +469,7 @@
<label class="gal-add gal-add-multi">➕ Multiple<input type="file" accept="image/*" multiple id="galAddMulti"></label>
<label class="gal-add">📷 Add<input type="file" accept="image/*" capture="environment" id="galAdd"></label>
<label class="gal-add gal-add-multi" title="Upload a product video">🎥 Video<input type="file" accept="video/*" capture="environment" id="galVid"></label>
- <button class="gal-add" id="galAsk" title="Ask a question about this SKU (local AI)">🎤 Ask</button>
+ <button class="gal-add" id="galAsk" title="Ask a question about this item">🎤 Ask</button>
</div>
<div id="galAnswer" hidden></div>
<div class="gal-grid" id="galGrid"></div>
@@ -554,7 +554,7 @@
<button class="fb-tile" id="fbFrontTile"><div class="fb-thumb" id="fbFrontThumb">🎨</div><span>Front · pattern</span></button>
</div>
<button class="samp-print" id="fbGo" disabled>🔎 Identify</button>
- <div class="fb-search"><input id="fbSearchInput" type="search" inputmode="search" autocomplete="off" placeholder="or type any part of a SKU / description — e.g. 21750"><button type="button" id="fbSearchBtn">Search</button></div>
+ <div class="fb-search"><input id="fbSearchInput" type="search" inputmode="search" autocomplete="off" placeholder="or type any part of a code or name — e.g. 21750"><button type="button" id="fbSearchBtn">Search</button></div>
<div class="samp-note" id="fbNote"></div>
<div id="fbResult"></div>
</div>
@@ -596,13 +596,13 @@
<button class="add-voice" id="addWB">⚪ White Balance</button>
<button class="add-voice" id="addMeasure">📐 Measure Depth</button>
</div>
- <button class="add-voice" id="addVoice">🎤 Voice-fill everything that's missing</button>
- <div class="add-field"><label>Mfr # / SKU</label><div class="in-mic"><input id="addMfr" autocapitalize="characters" placeholder="e.g. TR2581"><button class="mic-btn" data-mic="addMfr" data-kind="sku" title="Speak the SKU / mfr number">🎤</button></div></div>
- <div class="add-row"><div class="add-field"><label>VID</label><div class="in-mic"><input id="addVid" placeholder="THI"><button class="mic-btn" data-mic="addVid" data-kind="text" title="Speak the VID">🎤</button></div></div><div class="add-field"><label>Color</label><div class="in-mic"><input id="addColor"><button class="mic-btn" data-mic="addColor" data-kind="text" title="Speak the color">🎤</button></div></div></div>
- <div class="add-row"><div class="add-field"><label>Pattern name</label><div class="in-mic"><input id="addName"><button class="mic-btn" data-mic="addName" data-kind="text" title="Speak the pattern name">🎤</button></div></div><div class="add-field"><label>Price</label><div class="in-mic"><input id="addPrice" type="number" inputmode="decimal"><button class="mic-btn" data-mic="addPrice" data-kind="num" title="Speak the price">🎤</button></div></div></div>
- <div class="add-row"><div class="add-field"><label>Width</label><div class="in-mic"><input id="addWidth" placeholder="e.g. 27 in"><button class="mic-btn" data-mic="addWidth" data-kind="text" title="Speak the width">🎤</button></div></div><div class="add-field"><label>Repeat</label><div class="in-mic"><input id="addRepeat" placeholder="e.g. 25.2 in"><button class="mic-btn" data-mic="addRepeat" data-kind="text" title="Speak the repeat">🎤</button></div></div></div>
- <div class="add-row"><div class="add-field"><label>Content</label><div class="in-mic"><input id="addContent" placeholder="e.g. non-woven"><button class="mic-btn" data-mic="addContent" data-kind="text" title="Speak the content">🎤</button></div></div><div class="add-field"><label>How sold</label><div class="in-mic"><input id="addHowSold" placeholder="e.g. per yard"><button class="mic-btn" data-mic="addHowSold" data-kind="text" title="Speak how it's sold">🎤</button></div></div></div>
- <div class="add-field"><label>Notes</label><div class="in-mic"><input id="addNotes" placeholder="anything else"><button class="mic-btn" data-mic="addNotes" data-kind="text" title="Speak a note">🎤</button></div></div>
+ <button class="add-voice" id="addVoice">🎤 Fill blanks by voice</button>
+ <div class="add-field"><label>Mfr # / SKU</label><div class="in-mic"><input id="addMfr" autocapitalize="characters" placeholder="e.g. TR2581"><button class="mic-btn" data-mic="addMfr" data-kind="sku" title="Say the item’s code (the SKU / model number)">🎤</button></div></div>
+ <div class="add-row"><div class="add-field"><label>VID</label><div class="in-mic"><input id="addVid" placeholder="THI"><button class="mic-btn" data-mic="addVid" data-kind="text" title="Say the vendor’s ID number (the VID)">🎤</button></div></div><div class="add-field"><label>Color</label><div class="in-mic"><input id="addColor"><button class="mic-btn" data-mic="addColor" data-kind="text" title="Say the color">🎤</button></div></div></div>
+ <div class="add-row"><div class="add-field"><label>Pattern name</label><div class="in-mic"><input id="addName"><button class="mic-btn" data-mic="addName" data-kind="text" title="Say the pattern name">🎤</button></div></div><div class="add-field"><label>Price</label><div class="in-mic"><input id="addPrice" type="number" inputmode="decimal"><button class="mic-btn" data-mic="addPrice" data-kind="num" title="Say the price">🎤</button></div></div></div>
+ <div class="add-row"><div class="add-field"><label>Width</label><div class="in-mic"><input id="addWidth" placeholder="e.g. 27 in"><button class="mic-btn" data-mic="addWidth" data-kind="text" title="Say the width">🎤</button></div></div><div class="add-field"><label>Repeat</label><div class="in-mic"><input id="addRepeat" placeholder="e.g. 25.2 in"><button class="mic-btn" data-mic="addRepeat" data-kind="text" title="Say the repeat — how tall before the pattern starts over">🎤</button></div></div></div>
+ <div class="add-row"><div class="add-field"><label>Content</label><div class="in-mic"><input id="addContent" placeholder="e.g. non-woven"><button class="mic-btn" data-mic="addContent" data-kind="text" title="Say what it is made of (like ‘non-woven’)">🎤</button></div></div><div class="add-field"><label>How sold</label><div class="in-mic"><input id="addHowSold" placeholder="e.g. per yard"><button class="mic-btn" data-mic="addHowSold" data-kind="text" title="Say how it is sold (like ‘per yard’)">🎤</button></div></div></div>
+ <div class="add-field"><label>Notes</label><div class="in-mic"><input id="addNotes" placeholder="anything else"><button class="mic-btn" data-mic="addNotes" data-kind="text" title="Say a note">🎤</button></div></div>
<div id="addSpecs"></div>
<button class="samp-print" id="addPreview">👁 Preview</button>
<div class="samp-note" id="addNote"></div>
@@ -631,7 +631,7 @@
<div class="wb-reticle" id="wbReticle"></div>
<div class="wb-readout" id="wbReadout">Tap a WHITE or GREY area (or hold a white card) to set the white point.</div>
<div class="mbar">
- <button id="wbAuto">✨ Auto (gray-world)</button>
+ <button id="wbAuto">✨ Auto-fix color</button>
<button id="wbClear" hidden>↺ Clear</button>
<button id="wbClose">✕ Done</button>
</div>
@@ -938,7 +938,7 @@ function render(){
<div class="thumb ${adjustable?'tap':''}" ${thumb} title="${adjustable?'click to adjust':''}">${thumbUrl?'':'▦'}${badge}${x.product_id?`<button class="fav-btn${x.fav?' on':''}" title="favorite">${x.fav?'★':'☆'}</button>`:''}</div>
<div class="body">
<div class="ttl">${(x.title||'').replace(/ \\| Fentucci$/,'')}</div>
- <div class="model" title="tap to copy model #" onclick="navigator.clipboard&&navigator.clipboard.writeText('${x.mfr||''}')"><small>Model #</small><b>${x.mfr||'—'}</b></div>
+ <div class="model" title="tap to copy the model number" onclick="navigator.clipboard&&navigator.clipboard.writeText('${x.mfr||''}')"><small>Model #</small><b>${x.mfr||'—'}</b></div>
<div class="sub">
<span class="sku">${x.dw_sku||'—'}</span>
<span class="price ${priced(x)?'':'no'}">${priced(x)?'$'+x.price:'no price'}</span>
@@ -2083,7 +2083,7 @@ async function addPreview(){ if(_addMode==='update') return addUpdate();
<div class="pv-sys"><div class="pv-h">🛍 Shopify draft</div><small>${esc(pv.shopify.vendor)} · ${esc(pv.shopify.product_type)} · <b>DRAFT</b><br>Roll <b>${esc(pv.shopify.variants[0].sku)}</b> @ ${esc(pv.shopify.variants[0].price)} · Sample <b>${esc(pv.shopify.variants[1].sku)}</b> @ $4.25</small></div>
<div class="pv-sys"><div class="pv-h">🗄 dw_unified · new_items_staging</div><small>dw_sku <b>${esc(pv.staging.dw_sku)}</b> · vid ${esc(pv.staging.vid||'—')} · ${esc(pv.staging.pattern_name||'—')} / ${esc(pv.staging.color||'—')}</small></div>
<div class="pv-sys"><div class="pv-h">📇 FileMaker WALLPAPER master</div><small>${esc(fm.db||'')} · ${esc(fm.layout||'')} · combo sku auto → <b>${esc((fm.auto_calc&&fm.auto_calc['combo sku'])||'')}</b></small><table class="pv-fm">${fmRows}</table></div>
- <button class="samp-print" id="addCommit" style="margin-top:12px">✅ Create draft + staging + FM master</button>`;
+ <button class="samp-print" id="addCommit" style="margin-top:12px">✅ Save new item (draft)</button>`;
$('#addCommit').addEventListener('click',addCommit);
}
async function addCommit(){ const g=twoPhotoGate(); if(!g.ok){ $('#addNote').textContent=g.msg; return; }
@@ -2278,7 +2278,7 @@ $('#wbVideo').addEventListener('pointerdown',ev=>{ ev.preventDefault(); const re
wbSet(g); $('#wbClear').hidden=false; $('#wbReadout').innerHTML=`✓ White point set (R×${g.rGain.toFixed(2)} G×${g.gGain.toFixed(2)} B×${g.bGain.toFixed(2)}) — new photos render true. Tap again to re-set.`;
toast('✓ White balance set'); });
$('#wbAuto').addEventListener('click',()=>{ const g=grayWorldFromVideo($('#wbVideo')); if(!g){ toast('Point at the scene, then tap Auto.'); return; }
- wbSet(g); $('#wbClear').hidden=false; $('#wbReadout').innerHTML='✨ Auto (gray-world) white balance set — new photos render true.'; toast('✨ Auto white balance set'); });
+ wbSet(g); $('#wbClear').hidden=false; $('#wbReadout').innerHTML='✨ Auto color-fix on — new photos will look true.'; toast('✨ Auto white balance set'); });
$('#wbClear').addEventListener('click',()=>{ wbSet(null); $('#wbClear').hidden=true; $('#wbReadout').textContent='White balance cleared. Tap a white/grey area to set it again.'; toast('White balance cleared'); });
mMakeBox($('#mCard')); mMakeBox($('#mSample'));
$('#addMeasure').addEventListener('click',openMeasure);
@@ -2369,7 +2369,7 @@ $('#scanPat').addEventListener('click',async()=>{
closeLiveScan();
await recognizeDataUrl(c.toDataURL('image/jpeg',0.85));
});
-function syncCamBtn(){ $('#camBtn').textContent=(camFacing==='user'?'🤳 Front':'📷 Back'); }
+function syncCamBtn(){ $('#camBtn').textContent=(camFacing==='user'?'🤳 Front camera':'📷 Back camera'); }
$('#camBtn').addEventListener('click',flipCam);
$('#micBtn').addEventListener('click',voiceSearch);
$('#scanBtn').addEventListener('click',()=>{
← 3b53e0e auto-data-snapshot: 2026-09-20T04:26:57 (1 data files) — dat
·
back to Dw Photo Capture
·
auto-data-snapshot: 2026-09-20T08:54:11 (1 data files) — dat 5e0422e →