From e8c613e3e4c76fe74a96943e4f76a83c4365aa4e Mon Sep 17 00:00:00 2001
From: Me Here <me@here>
Date: Tue, 26 May 2026 08:55:52 -0500
Subject: [PATCH] As-built: drop back view; inch dims on front+top (same
 width); TFT shows all lanes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Removed the PCB back view (BOM stays in the right column).
- Front and top views now share a left dimension gutter, so they're the same
  width and aligned, and carry inch dimensions: front 4.7 × 5.5 in (120 × 140 mm),
  top-edge thickness ≈ 1.8 in (45 mm), width 4.7 in below.
- Reworked the TFT to use the empty space: tempo with the item name beside it,
  bar/beat at the bottom, and — filling the middle — ALL meter lanes drawn as
  rows of step pads (subdivisions, accent/normal/ghost/mute, amber beat ticks,
  per-lane playhead). Replaces the single beat-dots row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 player-asbuilt.html | 173 ++++++++++++++++++--------------------------
 1 file changed, 71 insertions(+), 102 deletions(-)

diff --git a/player-asbuilt.html b/player-asbuilt.html
index 5070947..86574e7 100644
--- a/player-asbuilt.html
+++ b/player-asbuilt.html
@@ -10,8 +10,8 @@
   parts you'd actually solder for an RP2040 build —
     • a 2.0″ 320×240 colour IPS TFT (ST7789, e.g. Pimoroni Pico Display 2.0):
       the upgrade from the cramped 128×64 mono OLED — full colour, smooth type,
-      hi-DPI. It also draws the beat indicator itself — a row of beat dots with
-      the current beat's subdivisions below — so there's no separate LED bar;
+      hi-DPI. It also draws all lane patterns (each lane's steps — accent /
+      normal / ghost / mute — with the playhead), so there's no separate LED bar;
     • controls: a big PLAY up top (a plain arcade button — it does NOT change
       while playing; the screen shows transport state; an illuminated/RGB arcade
       button could reflect it), then a row of PREV (far left), a recessed
@@ -24,8 +24,8 @@
       amp + speaker. Powered from a standard 9 V DC pedal jack (2.1 mm centre-
       negative, pedalboard-friendly) or USB-C (also carries config), in a brushed
       aluminium / stainless enclosure.
-  Beside the device: a top-edge view, a back view (PCB + components) and a bill of
-  materials. Overall ≈ 4.7 × 5.5 × 1.8 in (120 × 140 × 45 mm).
+  Beside the device: a top-edge view and a bill of materials. The front and top
+  views carry inch dimensions (≈ 4.7 × 5.5 × 1.8 in / 120 × 140 × 45 mm).
   Compare with the idealized /player.html. One file, no deps; shares src/engine.js.
 -->
 <script>
@@ -97,7 +97,7 @@
   /* side-by-side: player on the left, BOM on the right (stacks when narrow) */
   .cols{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:18px; width:100% }
   .col-left{ display:flex; flex-direction:column; align-items:center; gap:14px; width:380px; max-width:100% }
-  .bom-panel{ width:100%; align-self:flex-start }
+  .bom-panel{ width:380px; max-width:100%; align-self:flex-start }
 
   /* ---- top-edge view: all connectors on the top + total thickness ---- */
   .topview{ width:380px; max-width:100%; display:flex; flex-direction:column; gap:5px }
@@ -118,27 +118,15 @@
   .tv-dim{ display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; color:var(--muted); letter-spacing:.03em; line-height:1.05; white-space:nowrap }
   .tv-dim .ar{ font-size:40px; line-height:.55; opacity:.5 }
 
-  /* ---- right column: back view (PCB) above the BOM ---- */
-  .col-right{ display:flex; flex-direction:column; gap:14px; width:380px; max-width:100% }
-  .backview{ width:100%; display:flex; flex-direction:column; gap:5px }
-  .bv-cap{ text-align:center; font-size:10px; color:var(--muted); letter-spacing:.02em }
-  .bv-frame{ display:flex; align-items:stretch; gap:6px }
-  .bv-dimy{ writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; font-size:9px; color:var(--muted);
-    letter-spacing:.05em; padding-right:3px; border-right:1px solid var(--panel-bd); white-space:nowrap }
-  .bv-dimx{ text-align:center; font-size:9px; color:var(--muted); letter-spacing:.05em; border-top:1px solid var(--panel-bd); padding-top:3px; margin:1px 0 0 20px }
-  .bv-board{ position:relative; flex:1; aspect-ratio:47/55; border-radius:6px; overflow:hidden;
-    background:
-      repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 10px),
-      repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 10px),
-      linear-gradient(160deg, #134a3d, #0b3026);
-    border:1px solid #06231b; box-shadow:inset 0 0 16px rgba(0,0,0,.55), 0 12px 24px rgba(0,0,0,.4) }
-  .bv-mod{ position:absolute; display:flex; align-items:center; justify-content:center; text-align:center;
-    font-size:7px; font-weight:600; color:#d3ece2; letter-spacing:.02em; line-height:1.18; padding:2px;
-    background:rgba(7,26,20,.72); border:1px solid #2f6f5c; border-radius:3px }
-  .bv-rnd{ position:absolute; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;
-    font-size:6.5px; font-weight:700; color:#0a1e18; letter-spacing:.02em;
-    background:radial-gradient(circle at 38% 32%, #dbe3df, #8e9b95); border:1px solid #5f6b65; box-shadow:0 1px 2px rgba(0,0,0,.4) }
-  .bv-hole{ position:absolute; width:7px; height:7px; border-radius:50%; background:#05140f; border:1px solid #3a7e6a; box-shadow:inset 0 0 2px #000 }
+  /* ---- dimensioned views: top edge + front share a left gutter, so they're the
+     same width and aligned; inch dims (thickness/height on the left, width below) ---- */
+  .dim-row{ display:flex; align-items:stretch; gap:6px; width:100% }
+  .dim-y{ flex:0 0 13px; writing-mode:vertical-rl; transform:rotate(180deg);
+    display:flex; align-items:center; justify-content:center; text-align:center;
+    font-size:8.5px; color:var(--muted); letter-spacing:.04em; white-space:nowrap; border-right:1px solid var(--panel-bd) }
+  .dim-row > .device, .dim-row > .tv-edge{ flex:1 1 0; min-width:0; max-width:none; width:auto }
+  .dim-x{ text-align:center; font-size:8.5px; color:var(--muted); letter-spacing:.04em;
+    border-top:1px solid var(--panel-bd); padding-top:3px; margin:3px 0 0 19px }
 
   /* ---- controls: encoder above (under the screen), arcade buttons spread below ----
      wheel never hides the readout · PREV far-left / NEXT far-right · big central PLAY */
@@ -223,7 +211,8 @@
 <!-- ===================== TOP EDGE (connectors) ===================== -->
 <div class="topview">
   <div class="tv-cap">Top edge — all connectors (cables exit upward; pedalboard-friendly)</div>
-  <div class="tv-row">
+  <div class="dim-row">
+    <div class="dim-y">↕ 1.8 in (45 mm)</div>
     <div class="tv-edge">
       <div class="tv-jack" title="External trigger in — footswitch to start/stop or tap tempo"><i></i><b>Trig In</b></div>
       <div class="tv-jack" title="Instrument in — 1/4&quot; pass-through; the click is mixed into your signal"><i></i><b>Inst In</b></div>
@@ -231,13 +220,14 @@
       <div class="tv-jack dc" title="9 V DC in — standard 2.1 mm centre-negative pedal power"><i></i><b>9V DC</b></div>
       <div class="tv-jack usb" title="USB-C — power &amp; set-list transfer"><i></i><b>USB-C</b></div>
     </div>
-    <div class="tv-dim"><span class="ar">↕</span>≈ 1.8 in<br>(45 mm)</div>
   </div>
   <div class="ledbar-cap">Trig in · 1/4″ inst pass‑through (click injected) · shared 1/4″ balanced‑TRS out · 9 V DC / USB‑C power</div>
 </div>
 
-<!-- ===================== THE DEVICE ===================== -->
-<div class="device">
+<!-- ===================== THE DEVICE (front view) ===================== -->
+<div class="dim-row">
+  <div class="dim-y">↕ 5.5 in (140 mm)</div>
+  <div class="device">
 
   <div class="brandrow">
     <div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS" /><span class="model">PM‑1 Polymeter Player</span></div>
@@ -249,7 +239,7 @@
       <canvas id="tft" width="320" height="240" aria-label="2 inch 320 by 240 colour IPS display"></canvas>
     </div>
   </div>
-  <div class="tft-cap">2.0″ 320×240 IPS TFT (ST7789) — beat &amp; subdivisions on‑screen</div>
+  <div class="tft-cap">2.0″ 320×240 IPS TFT (ST7789) — tempo, name &amp; all lane patterns</div>
 
   <div class="controls">
     <div class="key"><button class="abtn play" id="bPlay" title="play / stop (Space)">▶</button><small>Play / Stop</small></div>
@@ -264,7 +254,9 @@
   </div>
 
   <div class="grille"></div>
-</div>
+  </div><!-- /device -->
+</div><!-- /dim-row -->
+<div class="dim-x">↔ 4.7 in (120 mm) wide</div>
 
 <!-- ===================== LOAD CONFIG ===================== -->
 <div class="panel">
@@ -283,34 +275,6 @@
 </div>
 </div><!-- /col-left -->
 
-<div class="col-right">
-
-<!-- ===================== BACK VIEW (PCB + components) ===================== -->
-<div class="backview">
-  <div class="bv-cap">Back view — PCB &amp; components (mounting holes at the corners)</div>
-  <div class="bv-frame">
-    <div class="bv-dimy">↕ 5.5 in (140 mm)</div>
-    <div class="bv-board">
-      <span class="bv-hole" style="left:3%;top:2%"></span>
-      <span class="bv-hole" style="right:3%;top:2%"></span>
-      <span class="bv-hole" style="left:3%;bottom:2%"></span>
-      <span class="bv-hole" style="right:3%;bottom:2%"></span>
-      <div class="bv-mod" style="left:8%;top:2%;width:84%;height:6%">Trig · Inst · Out TRS · 9V DC · USB-C — top-edge jacks</div>
-      <div class="bv-mod" style="left:13%;top:11%;width:74%;height:24%">ST7789 2.0″ 320×240 TFT</div>
-      <div class="bv-mod" style="left:12%;top:38%;width:37%;height:9%">9 V→5 V buck</div>
-      <div class="bv-mod" style="left:53%;top:38%;width:35%;height:9%">RP2040</div>
-      <div class="bv-rnd" style="left:41%;top:50%;width:18%">PLAY</div>
-      <div class="bv-rnd" style="left:7%;top:65%;width:13%">PREV</div>
-      <div class="bv-rnd" style="left:35%;top:67%;width:9%">ENC</div>
-      <div class="bv-rnd" style="left:50%;top:65%;width:13%">TAP</div>
-      <div class="bv-rnd" style="right:7%;top:65%;width:13%">NEXT</div>
-      <div class="bv-mod" style="left:9%;top:80%;width:60%;height:13%">Analog audio — PCM5102 · NE5532 · DRV134 · PAM8302</div>
-      <div class="bv-rnd" style="right:8%;bottom:3%;width:19%">SPKR</div>
-    </div>
-  </div>
-  <div class="bv-dimx">↔ 4.7 in (120 mm)</div>
-</div>
-
 <!-- ===================== BILL OF MATERIALS ===================== -->
 <div class="panel bom-panel">
   <h2>Bill of materials</h2>
@@ -346,7 +310,6 @@
     buffer of the 1/4″ instrument input, then fed to the balanced line driver (1/4″ TRS out) and the monitor amp —
     so your instrument is never re‑digitised (no added latency).</p>
 </div>
-</div><!-- /col-right -->
 </div><!-- /cols -->
 
 <script>
@@ -436,57 +399,63 @@ const TFT_W=320, TFT_H=240;
 const tft=$("tft"), tc=tft.getContext("2d");
 (function(){ const dpr=Math.max(1,Math.min(3,window.devicePixelRatio||1));
   tft.width=TFT_W*dpr; tft.height=TFT_H*dpr; tc.scale(dpr,dpr); })();   // hi-DPI backing → crisp type
-function drawTFT(){
-  const ref=meters[0], bpb=ref?ref.beatsPerBar:0;
-  // beats from lane 1; subdivisions from the finest lane sharing that beat grid
-  let disp=ref; if(ref){ for(const x of meters){ if(!x.poly && x.beatsPerBar===ref.beatsPerBar && x.stepsPerBeat>disp.stepsPerBeat) disp=x; } }
-  const spb=disp?disp.stepsPerBeat:1;
-  let curBeat=-1, curSub=-1;
-  if(state.running&&disp&&disp.currentStep>=0){ curBeat=Math.floor(disp.currentStep/spb); curSub=disp.currentStep%spb; }
+const SND_ABBR={kick:"KICK",snare:"SNR",rim:"RIM",clap:"CLAP",hatClosed:"HAT",hatOpen:"OHAT",ride:"RIDE",crash:"CRSH",
+  tomLow:"TOM↓",tomMid:"TOM",tomHigh:"TOM↑",tambourine:"TAMB",cowbell:"CBL",woodblock:"WOOD",claves:"CLAV",jamblock:"JAM",beep:"BEEP"};
+function soundLabel(s){ if(SND_ABBR[s]) return SND_ABBR[s];
+  const m=String(s).match(/^([a-zA-Z]+)(\d+)?$/);
+  return m ? (m[1].slice(0,3).toUpperCase()+(m[2]||"")) : String(s).slice(0,5).toUpperCase(); }
 
+function drawTFT(){
+  const ref=meters[0];
   const g=tc.createLinearGradient(0,0,0,TFT_H); g.addColorStop(0,"#0b0f18"); g.addColorStop(1,"#05070c");
   tc.fillStyle=g; tc.fillRect(0,0,TFT_W,TFT_H);
   // header
   tc.textBaseline="middle"; tc.textAlign="left";
-  tc.font='600 13px "Segoe UI",system-ui,sans-serif'; tc.fillStyle="#5b7a93";
-  tc.fillText("♪ "+(setlist?((idx+1)+"/"+setlist.items.length):"–/–"), 14, 17);
+  tc.font='600 12px "Segoe UI",system-ui,sans-serif'; tc.fillStyle="#5b7a93";
+  tc.fillText("♪ "+(setlist?((idx+1)+"/"+setlist.items.length):"–/–"), 12, 13);
   tc.textAlign="right"; tc.fillStyle = state.running ? "#2fe07a" : "#6b7787";
-  tc.fillText(state.running?"▶ PLAY":"■ STOP", TFT_W-14, 17);
-  tc.fillStyle="#13283c"; tc.fillRect(14,30,TFT_W-28,1);
-  // tempo — the hero number
+  tc.fillText(state.running?"▶ PLAY":"■ STOP", TFT_W-12, 13);
+  tc.fillStyle="#13283c"; tc.fillRect(12,25,TFT_W-24,1);
+  // tempo (left) + name (right) — uses the wide upper area
   tc.textBaseline="alphabetic"; tc.textAlign="left";
-  tc.fillStyle="#1fb6f0"; tc.font='800 78px "Segoe UI",system-ui,sans-serif';
-  const bpm=String(state.bpm); tc.fillText(bpm, 16, 110);
-  const bx=16+tc.measureText(bpm).width+9;
-  tc.fillStyle="#5b7a93"; tc.font='700 16px "Segoe UI",system-ui,sans-serif'; tc.fillText("BPM", bx, 74);
-  tc.font='600 17px "Segoe UI",system-ui,sans-serif'; tc.fillText("♩ "+(ref?(ref.groupsStr.replace(/[^0-9+]/g,"")||ref.beatsPerBar):"–"), bx, 98);
-  // item name — centred, ellipsised
-  tc.textAlign="center"; tc.fillStyle="#e9eff7"; tc.font='600 22px "Segoe UI",system-ui,sans-serif';
-  let nm=setlist?(setlist.items[idx].name||"—"):"—";
-  if(tc.measureText(nm).width>TFT_W-28){ while(nm.length>1 && tc.measureText(nm+"…").width>TFT_W-28) nm=nm.slice(0,-1); nm+="…"; }
-  tc.fillText(nm, TFT_W/2, 138);
-  // beat dots + the current beat's subdivisions — the on-screen replacement for the LED matrix
-  if(bpb>0){
-    const gap=Math.min(30,(TFT_W-44)/bpb), x0=TFT_W/2 - gap*(bpb-1)/2, by=166;
-    for(let i=0;i<bpb;i++){
-      const x=x0+i*gap, grp=ref.groupStarts.has(i), on=(i===curBeat), col=grp?"#ffd166":"#1fb6f0";
-      tc.beginPath(); tc.arc(x,by, on?7:4, 0, Math.PI*2);
-      if(on){ tc.fillStyle=col; tc.shadowColor=col; tc.shadowBlur=11; tc.fill(); tc.shadowBlur=0; }
-      else { tc.fillStyle=grp?"rgba(255,209,102,.34)":"rgba(31,182,240,.26)"; tc.fill(); }
+  tc.fillStyle="#1fb6f0"; tc.font='800 50px "Segoe UI",system-ui,sans-serif';
+  const bpm=String(state.bpm); tc.fillText(bpm, 12, 74);
+  const bx=12+tc.measureText(bpm).width+8;
+  tc.fillStyle="#5b7a93"; tc.font='700 13px "Segoe UI",system-ui,sans-serif'; tc.fillText("BPM", bx, 48);
+  tc.font='600 13px "Segoe UI",system-ui,sans-serif'; tc.fillText("♩ "+(ref?(ref.groupsStr.replace(/[^0-9+]/g,"")||ref.beatsPerBar):"–"), bx, 67);
+  // item name, right-aligned, ellipsised to the space right of the tempo labels
+  tc.textAlign="right"; tc.fillStyle="#e9eff7"; tc.font='600 16px "Segoe UI",system-ui,sans-serif';
+  let nm=setlist?(setlist.items[idx].name||"—"):"—"; const nmMax=(TFT_W-12)-(bx+42);
+  if(tc.measureText(nm).width>nmMax){ while(nm.length>1 && tc.measureText(nm+"…").width>nmMax) nm=nm.slice(0,-1); nm+="…"; }
+  tc.fillText(nm, TFT_W-12, 58);
+  tc.fillStyle="#13283c"; tc.fillRect(12,84,TFT_W-24,1);
+  // ---- all meter lanes: each a row of step pads (subdivisions · accent/normal/ghost/mute · playhead) ----
+  const lanes=meters||[], gx0=48, gx1=TFT_W-12, gw=gx1-gx0, top=90, bot=204;
+  const rowH = lanes.length ? Math.min(20,(bot-top)/lanes.length) : 0;
+  tc.textBaseline="middle";
+  lanes.forEach((m,li)=>{
+    const cy=top+li*rowH+rowH/2, en=m.enabled;
+    tc.textAlign="left"; tc.font='700 8px "Segoe UI",system-ui,sans-serif'; tc.fillStyle=en?"#9fb4c4":"#4a5560";
+    tc.fillText(soundLabel(m.sound), 6, cy+0.5);
+    const nsteps=Math.max(1,m.beatsPerBar*m.stepsPerBeat), cw=gw/nsteps, ch=Math.min(rowH-4,13), cyTop=cy-ch/2;
+    for(let s=0;s<nsteps;s++){
+      const cx=gx0+s*cw, lvl=m.beatsOn[s]|0, beatStart=(s%m.stepsPerBeat)===0, cur=state.running&&m.currentStep===s;
+      const x=cx+0.6, w=Math.max(1,cw-1.4);
+      let fill = !en ? (lvl?"rgba(120,140,160,.18)":null)
+        : lvl===2?"#1fb6f0" : lvl===1?"rgba(31,182,240,.62)" : lvl===3?"rgba(31,182,240,.30)" : null;
+      if(fill){ tc.fillStyle=fill; tc.fillRect(x,cyTop,w,ch); }
+      else { tc.strokeStyle="rgba(120,140,160,.22)"; tc.lineWidth=1; tc.strokeRect(x+0.5,cyTop+0.5,w-1,ch-1); }   // mute = outline
+      if(beatStart){ tc.fillStyle="rgba(255,209,102,.55)"; tc.fillRect(cx,cyTop-1,1,ch+2); }                       // beat tick
+      if(cur){ tc.strokeStyle="#fff"; tc.lineWidth=1.4; tc.strokeRect(x-0.6,cyTop-0.6,w+1.2,ch+1.2); }             // playhead
     }
-    if(spb>1){
-      const sgap=8, sx0=TFT_W/2 - sgap*(spb-1)/2, sy=188;
-      for(let s=0;s<spb;s++){ tc.beginPath(); tc.arc(sx0+s*sgap, sy, 2.4, 0, Math.PI*2);
-        tc.fillStyle=(curBeat>=0&&s<=curSub)?"#2fe0a0":"rgba(47,224,160,.16)"; tc.fill(); }
-    }
-  }
+  });
   // bottom strip
-  tc.fillStyle="#13283c"; tc.fillRect(14,206,TFT_W-28,1);
-  tc.textBaseline="alphabetic"; tc.textAlign="left"; tc.fillStyle="#7f8b9a"; tc.font='600 14px "Segoe UI",system-ui,sans-serif';
-  tc.fillText(state.running&&ref ? ("BAR "+(ref.currentBar+1)) : "READY", 14, 226);
+  tc.fillStyle="#13283c"; tc.fillRect(12,208,TFT_W-24,1);
+  tc.textBaseline="alphabetic"; tc.textAlign="left"; tc.fillStyle="#7f8b9a"; tc.font='600 13px "Segoe UI",system-ui,sans-serif';
+  tc.fillText(state.running&&ref ? ("BAR "+(ref.currentBar+1)+" · BEAT "+(Math.floor(ref.currentStep/ref.stepsPerBeat)+1||"–")) : "READY", 12, 226);
   if(segBars>0){ const rem=Math.max(0,segBars-(ref?ref.currentBar:0));
-    tc.textAlign="right"; tc.fillStyle="#ffd166"; tc.font='700 15px "Segoe UI",system-ui,sans-serif';
-    tc.fillText((state.running?rem:segBars)+" BARS", TFT_W-14, 226); }
+    tc.textAlign="right"; tc.fillStyle="#ffd166"; tc.font='700 14px "Segoe UI",system-ui,sans-serif';
+    tc.fillText((state.running?rem:segBars)+" BARS", TFT_W-12, 226); }
 }
 
 function renderAll(){ drawTFT();   /* PLAY button is static hardware — transport state is shown on the screen */