VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

As-built: top-edge connector view + thickness; VARASYS logo; PLAY/roller swap

Browse source 
- Connectors: all jacks move to a separate "top edge" view above the device
  (a brushed-metal edge strip with Trig In / Inst In / Out TRS / 9V DC / USB-C
  and a ↕ ≈ 45 mm total-thickness dimension), since they're top-mounted for
  pedalboard cabling. Removed them from the faceplate.
- Removed the fake corner screws/rivets.
- Swapped PLAY and the tempo roller: a big PLAY now sits up top (centred); the
  roller sits in the button row with TAP, between PREV (far left) and NEXT (far
  right).
- PLAY is static hardware now — it no longer changes colour/icon while playing
  (the screen shows transport state). An illuminated/RGB arcade button could
  reflect it; noted in the comment.
- Use the real VARASYS logo (logo-light, inlined at build) on the metal
  faceplate instead of the text wordmark.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-26 08:25:04 -05:00
parent 810d67d071
commit 02523f4f7a
1 changed files with 50 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
player-asbuilt.html
View file

@ -12,11 +12,13 @@
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;
• controls arranged for use: a recessed thumb-roller for tempo — a detented
encoder with a side-mount wheel, so nothing sticks out to snap off — below
the screen, with arcade pushbuttons spread below: PREV far left, NEXT far
right, a big central PLAY, so you don't hit the wrong one;
• rear I/O: external trigger in (footswitch), a 1/4" instrument pass-through
• 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
thumb-roller for tempo + TAP (centre), and NEXT (far right);
• top-edge I/O (all jacks on the top edge — cables run up off a pedalboard;
the top view shows the ~45 mm total thickness): external trigger in
(footswitch), a 1/4" instrument pass-through
with the click mixed in the ANALOG domain (DAC → summing op-amp → balanced
line driver), a shared 1/4" balanced-TRS main out, plus an analog monitor
amp + speaker. Powered from a standard 9 V DC pedal jack (2.1 mm centre-
@ -73,14 +75,9 @@
border:1px solid var(--device-bd); border-radius:13px; padding:16px 14px 14px;
box-shadow:0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 8px rgba(0,0,0,.28);
}
.device::before, .device::after, .device .screw{ content:""; position:absolute; width:10px; height:10px; border-radius:50%;
background:radial-gradient(circle at 36% 30%, #f0f2f5, #8b929b 60%, #5b626b 100%); box-shadow:inset 0 0 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3); }
.device::before{ top:12px; left:12px } .device::after{ top:12px; right:12px }
.screw.bl{ bottom:12px; left:12px } .screw.br{ bottom:12px; right:12px }
.brandrow{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 2px 12px; }
.silk{ color:var(--silk); letter-spacing:.04em }
.silk .vk{ font-weight:800; letter-spacing:.16em; font-size:15px; color:var(--silk) }
.silk{ display:flex; align-items:center; gap:8px; color:var(--silk); letter-spacing:.04em }
.brand-logo{ height:16px; width:auto; display:block }
.silk .model{ font-size:10px; text-transform:uppercase; letter-spacing:.18em; opacity:.8 }
.pwr{ display:flex; align-items:center; gap:6px; font-size:9px; color:var(--silk); text-transform:uppercase; letter-spacing:.14em; opacity:.85 }
.pwr .dot{ width:7px; height:7px; border-radius:50%; background:#2fe07a; box-shadow:0 0 7px #2fe07a }
@ -94,13 +91,32 @@
.tft-cap{ text-align:center; font-size:10px; color:var(--silk); opacity:.8; margin-top:7px; letter-spacing:.02em }
/* small caption under the screen / I/O (the beat indicator lives on the TFT now) */
.ledbar-cap{ text-align:center; font-size:10px; color:var(--silk); opacity:.8; margin:2px 0 0; letter-spacing:.02em }
.ledbar-cap{ text-align:center; font-size:10px; color:var(--muted); margin:2px 0 0; letter-spacing:.02em }
/* 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: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 }
.tv-cap{ text-align:center; font-size:10px; color:var(--muted); letter-spacing:.02em }
.tv-row{ display:flex; align-items:stretch; gap:10px }
.tv-edge{ flex:1; border-radius:8px; padding:11px 10px 9px;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 3px),
linear-gradient(158deg, #bcc2ca 0%, #969da7 46%, #aeb4bd 60%, #848b95 100%);
border:1px solid var(--device-bd); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px rgba(0,0,0,.42);
display:flex; align-items:flex-start; justify-content:space-between; gap:5px }
.tv-jack{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px }
.tv-jack i{ width:19px; height:19px; border-radius:50%; background:radial-gradient(circle at 40% 34%, #2b313a, #05070a 72%);
border:2px solid #1f242c; box-shadow:inset 0 0 4px #000 }
.tv-jack.dc i{ background:radial-gradient(circle, #6b7480 0 2.5px, #07090c 3.5px 72%) }
.tv-jack.usb i{ width:23px; height:9px; border-radius:4px; border:2px solid #1f242c; background:#05070a; margin-top:5px }
.tv-jack b{ font-size:7px; font-weight:700; color:var(--silk); letter-spacing:.04em; text-transform:uppercase; text-align:center; line-height:1.25; opacity:.9 }
.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 }
/* ---- controls: encoder above (under the screen), arcade buttons spread below ----
wheel never hides the readout · PREV far-left / NEXT far-right · big central PLAY */
.controls{ display:flex; flex-direction:column; align-items:center; gap:13px; margin:14px 0 2px }
@ -125,8 +141,7 @@
box-shadow:0 0 0 3px #0b0d11, 0 0 0 4px #363c46, 0 2px 3px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.2) }
.abtn.nav{ --c1:#33d0ff; --c2:#0a7fb0 }
.abtn.tap{ --c1:#ffd56a; --c2:#c98a1f; color:#3a2a00; text-shadow:0 1px 1px rgba(255,255,255,.35); font-size:12px; font-weight:800; letter-spacing:.04em }
.abtn.play{ --c1:#4ce08e; --c2:#178f49; width:66px; height:66px; font-size:26px }
.abtn.play.on{ --c1:#ff6a6a; --c2:#a82828 }
.abtn.play{ --c1:#4ce08e; --c2:#178f49; width:66px; height:66px; font-size:26px } /* static: no play/stop change (plain arcade button; screen shows state) */
.key small{ font-size:8px; color:var(--silk); letter-spacing:.1em; text-transform:uppercase; opacity:.85 }
/* ---- monitor speaker + rear I/O (1/4" jacks + USB-C) ---- */
@ -182,12 +197,27 @@
<div class="cols">
<div class="col-left">
<!-- ===================== 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="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>
<div class="tv-jack" title="Main out — 1/4&quot; balanced TRS (instrument + click); the shared output plug"><i></i><b>Out TRS</b></div>
<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>≈ 45<br>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">
<span class="screw bl"></span><span class="screw br"></span>
<div class="brandrow">
<div class="silk"><span class="vk">VARASYS</span> <span class="model">PM‑1 Polymeter Player</span></div>
<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>
<div class="pwr"><span class="dot"></span>PWR</div>
</div>
@ -199,11 +229,11 @@
<div class="tft-cap">2.0″ 320×240 IPS TFT (ST7789) — beat &amp; subdivisions on‑screen</div>
<div class="controls">
<div class="enc-wrap"><div class="roller" id="enc" title="Tempo — roll it (scroll or drag)"></div><small>TEMPO</small></div>
<div class="key"><button class="abtn play" id="bPlay" title="play / stop (Space)">▶</button><small>Play / Stop</small></div>
<div class="keys">
<div class="key"><button class="abtn nav" id="bPrev" title="previous item">⏮</button><small>Prev</small></div>
<div class="key-mid">
<div class="key"><button class="abtn play" id="bPlay" title="play / stop (Space)">▶</button><small>Play</small></div>
<div class="enc-wrap"><div class="roller" id="enc" title="Tempo — roll it (scroll or drag)"></div><small>TEMPO</small></div>
<div class="key"><button class="abtn tap" id="bTap" title="tap tempo (T)">TAP</button><small>Tap</small></div>
</div>
<div class="key"><button class="abtn nav" id="bNext" title="next item">⏭</button><small>Next</small></div>
@ -211,14 +241,6 @@
</div>
<div class="grille"></div>
<div class="io">
<div class="jack" title="External trigger in — footswitch to start/stop or tap tempo"><i></i><b>Trig In</b></div>
<div class="jack" title="Instrument in — 1/4&quot; pass-through; the click is mixed into your signal"><i></i><b>Inst In</b></div>
<div class="jack" title="Main out — 1/4&quot; balanced TRS (instrument + click); the shared output plug"><i></i><b>Out TRS</b></div>
<div class="jack dc" title="9 V DC in — standard 2.1 mm centre-negative pedal power; drop it on your pedalboard"><i></i><b>9V DC</b></div>
<div class="jack usb" title="USB-C — power &amp; set-list transfer"><i></i><b>USB-C</b></div>
</div>
<div class="ledbar-cap">Trig in · 1/4″ inst pass‑through (click injected) · shared 1/4″ balanced‑TRS out · 9 V DC or USB‑C power</div>
</div>
<!-- ===================== LOAD CONFIG ===================== -->
@ -415,7 +437,7 @@ function drawTFT(){
tc.fillText((state.running?rem:segBars)+" BARS", TFT_W-14, 226); }
}
function renderAll(){ drawTFT(); $("bPlay").textContent=state.running?"■":"▶"; $("bPlay").classList.toggle("on",state.running);
function renderAll(){ drawTFT(); /* PLAY button is static hardware — transport state is shown on the screen */
$("enc").style.setProperty("--rib", rollPos+"px"); }
function draw(){
if(audioCtx&&state.running){ const now=audioCtx.currentTime;