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

Move live status into the display under the BPM (drop bottom status line)

Browse source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-24 18:01:55 -05:00
parent 3f04383e2b
commit 7010ba7cb8
1 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
index.html
View file

@ -55,7 +55,8 @@
.card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; } .card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; }
.display { background:#0a0d11; border:1px solid #000; border-radius:8px; padding:8px 14px; text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.7); } .display { background:#0a0d11; border:1px solid #000; border-radius:8px; padding:8px 14px; text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.7); }
.display .big { font-family:"Courier New",monospace; font-weight:700; font-size:40px; color:#ffd166; letter-spacing:3px; text-shadow:0 0 12px rgba(255,209,102,.5); } .display .big { font-family:"Courier New",monospace; font-weight:700; font-size:40px; color:#ffd166; letter-spacing:3px; text-shadow:0 0 12px rgba(255,209,102,.5); }
.display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; height:15px; } .display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; min-height:15px; line-height:1.3; }
.display .ctx.muted-cue { color:#ffb454; }
.knob { margin-bottom:10px; } .knob { margin-bottom:10px; }
.knob label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; } .knob label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.knob label b { color:#fff; font-variant-numeric:tabular-nums; } .knob label b { color:#fff; font-variant-numeric:tabular-nums; }
@ -223,10 +224,8 @@
<div id="meters"></div> <div id="meters"></div>
<div style="margin-top:10px"><button class="add" id="addMeterBtn">+ Add meter</button></div> <div style="margin-top:10px"><button class="add" id="addMeterBtn">+ Add meter</button></div>
<!-- (presets moved into the Transport card; set lists live in the slide-out tray) --> <!-- (presets moved into the Transport card; set lists live in the slide-out tray;
status now shows under the BPM in the display) -->
<div style="height:14px"></div>
<div class="sub" id="statusLine">Stopped.</div>
</div> </div>
<!-- Set-list panel: docked beside the metronome; drawer on narrow screens --> <!-- Set-list panel: docked beside the metronome; drawer on narrow screens -->
@ -940,21 +939,24 @@ function drawLoop() {
requestAnimationFrame(drawLoop); requestAnimationFrame(drawLoop);
} }
function updateCtx() { // Status shows in the display, under the BPM. Stopped → meter count; running →
ctxDisplay.textContent = meters.length ? `${meters.length} meter${meters.length > 1 ? "s" : ""}` : "no meters"; // bar + trainer/ramp flags (kept short for the narrow display column).
}
function updateStatus() { function updateStatus() {
if (!state.running) { statusLine.textContent = meters.length ? "Stopped." : "Add a meter to begin."; return; } if (!state.running) {
ctxDisplay.textContent = meters.length ? (meters.length + " meter" + (meters.length > 1 ? "s" : "") + " · ready") : "no meters";
ctxDisplay.classList.remove("muted-cue");
return;
}
const mbpb = masterBeatsPerBar(); const mbpb = masterBeatsPerBar();
const barIndex = Math.floor(Math.max(0, masterBeat - 1) / mbpb); const barIndex = Math.floor(Math.max(0, masterBeat - 1) / mbpb);
let s = `Running · bar ${barIndex + 1} · ${meters.map((m) => m.groups.join("+")).join(" vs ")}`; const muted = trainer.on && isMutedAt(audioCtx.currentTime);
if (trainer.on) { let s = "▶ bar " + (barIndex + 1);
const muted = isMutedAt(audioCtx.currentTime); if (trainer.on) s += muted ? " · mute — count!" : " · play";
s += muted ? " — TRAINER: muted (count!)" : " — TRAINER: playing"; if (ramp.on) s += " · ramp";
} ctxDisplay.textContent = s;
if (ramp.on) s += ` — ramp ${ramp.amount >= 0 ? "+" : ""}${ramp.amount}/${ramp.everyBars} bars`; ctxDisplay.classList.toggle("muted-cue", muted);
statusLine.textContent = s;
} }
function updateCtx() { updateStatus(); }
/* ========================================================================= /* =========================================================================
UI WIRING UI WIRING