Audio Wave: skip overlapping segment labels (readable when splits are close)

Labels crowded when splits are near each other. Now labels are shortened to S{n} and
skipped if within ~26px (canvas) / 30px (image) of the previous drawn label; notes gated
wider. Lines still drawn for every split.
This commit is contained in:
2026-07-04 23:56:51 +02:00
parent ea099ccac4
commit c4d7224118
2 changed files with 9 additions and 7 deletions
+5 -3
View File
@@ -167,14 +167,16 @@ def _render(rms_n, times, duration, beats, bounds, segs,
for b in beats: # beat ticks (faint, centre band) for b in beats: # beat ticks (faint, centre band)
if t0 <= b <= t1: if t0 <= b <= t1:
d.line([(X(b), mid - 4), (X(b), mid + 4)], fill=(150, 90, 60), width=1) d.line([(X(b), mid - 4), (X(b), mid + 4)], fill=(150, 90, 60), width=1)
last_lx, last_nx = -999, -999 # skip labels/notes that would overlap
for s in segs: # segment line + label top + note bottom for s in segs: # segment line + label top + note bottom
if not (t0 <= s["start_s"] <= t1): if not (t0 <= s["start_s"] <= t1):
continue continue
x = X(s["start_s"]) x = X(s["start_s"])
d.line([(x, 0), (x, H)], fill=(120, 190, 150), width=1) d.line([(x, 0), (x, H)], fill=(120, 190, 150), width=1)
d.text((x + 3, 3), f"S{s['segment']} {s['start_s']}s/{s['frames']}f", fill=(240, 240, 240)) if x - last_lx > 30:
if s.get("note"): d.text((x + 2, 3), f"S{s['segment']}", fill=(240, 240, 240)); last_lx = x
d.text((x + 3, H - 13), s["note"][:28], fill=(255, 210, 110)) if s.get("note") and x - last_nx > 70:
d.text((x + 2, H - 13), s["note"][:22], fill=(255, 210, 110)); last_nx = x
arr = np.asarray(img, dtype=np.float32) / 255.0 arr = np.asarray(img, dtype=np.float32) / 255.0
return torch.from_numpy(arr)[None, ...] # [1, H, W, 3] return torch.from_numpy(arr)[None, ...] # [1, H, W, 3]
+4 -4
View File
@@ -145,13 +145,13 @@ function setupWave(node) {
const { seg } = parseNotes(getW(node, "notes")?.value); const { seg } = parseNotes(getW(node, "notes")?.value);
ctx.font = "10px monospace"; ctx.font = "10px monospace";
const nseg = nSegs(); const nseg = nSegs();
let lastLabelX = -999, lastNoteX = -999; // skip labels that would overlap
pts.forEach((s, i) => { // split line; label seg i+1 (skip tail) pts.forEach((s, i) => { // split line; label seg i+1 (skip tail)
const x = t2x(s); const x = t2x(s);
ctx.strokeStyle = "#7ec8a0"; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); ctx.strokeStyle = "#7ec8a0"; ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
if (i < nseg) { if (i >= nseg) return;
ctx.fillStyle = "#fff"; ctx.fillText(`S${i + 1} ${s.toFixed(1)}s`, x + 3, 11); if (x - lastLabelX > 26) { ctx.fillStyle = "#fff"; ctx.fillText(`S${i + 1}`, x + 2, 11); lastLabelX = x; }
if (seg[i + 1]) { ctx.fillStyle = "#ffd27a"; ctx.fillText(seg[i + 1].slice(0, 22), x + 3, H - 4); } if (seg[i + 1] && x - lastNoteX > 60) { ctx.fillStyle = "#ffd27a"; ctx.fillText(seg[i + 1].slice(0, 16), x + 2, H - 4); lastNoteX = x; }
}
}); });
ctx.strokeStyle = "#ff5a3c"; const px = t2x(st.audio.currentTime || 0); // playhead ctx.strokeStyle = "#ff5a3c"; const px = t2x(st.audio.currentTime || 0); // playhead
ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke(); ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, H); ctx.stroke();