From 26febe604f517816acae0cb70db04668cc1bdb27 Mon Sep 17 00:00:00 2001 From: skal Date: Thu, 12 Feb 2026 12:57:02 +0100 Subject: Timeline editor: CPU load visualization + UX improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Features: - CPU load bar: Color-coded (greenβ†’yellowβ†’red) effect density visualization - Overlays under waveform to save space, always visible - Constant load (1.0) per active effect, 0.1 beat resolution - Add Effect button: Create new effects in selected sequence - Delete buttons in properties panel for quick access - Timeline favicon (green bars SVG) Fixes: - Handle drag no longer jumps on mousedown (offset tracking) - Sequence name input accepts numbers (explicit inputmode) - Start Time label corrected (beats, not seconds) Updated timeline.seq with beat-based timing adjustments. Co-Authored-By: Claude Sonnet 4.5 --- tools/timeline_editor/README.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'tools/timeline_editor/README.md') diff --git a/tools/timeline_editor/README.md b/tools/timeline_editor/README.md index cc13a41..72b5ae0 100644 --- a/tools/timeline_editor/README.md +++ b/tools/timeline_editor/README.md @@ -17,13 +17,26 @@ Interactive web-based editor for `timeline.seq` files. - 🎼 Quantize grid (Off, 1/32, 1/16, 1/8, 1/4, 1/2, 1 beat) - πŸŽ›οΈ BPM slider (60-200 BPM) - πŸ”„ Re-order sequences by time -- πŸ—‘οΈ Delete sequences/effects +- ✨ Add effects to sequences +- πŸ—‘οΈ Delete sequences/effects (toolbar + properties panel) +- πŸ“Š **CPU load visualization** (color-coded effect density) - ▢️ Audio playback with auto-expand/collapse - 🎚️ Sticky audio track and timeline ticks - πŸ”΄ **Playback indicator on waveform** (NEW) - 🎯 **Double-click seek during playback** (NEW) - πŸ“ **Click waveform to seek** (NEW) +## CPU Load Visualization + +The editor displays a **CPU load bar** at the top (underneath audio waveform if loaded): +- **Full-height bars** (80px) show effect density at each time point +- **Color-coded:** Green (low) β†’ Yellow (medium) β†’ Red (high load) +- **Load calculation:** Sum of all active effects across all sequences (1.0 per effect) +- **Updates automatically** when effects/sequences are moved +- **Collapsed sequences count** toward load + +This helps identify performance hotspots in your timeline. + ## Usage 1. **Open:** `open tools/timeline_editor/index.html` or double-click in browser @@ -37,6 +50,8 @@ Interactive web-based editor for `timeline.seq` files. - Watch sequences auto-expand/collapse during playback - Red playback indicators on both timeline and waveform show current position 5. **Edit:** + - **Add Effect:** Select sequence, click "✨ Add Effect" button + - **Delete:** Click item, use "πŸ—‘οΈ Delete Selected" or delete button in properties panel - Drag sequences/effects to reposition (works when collapsed or expanded) - Double-click anywhere on sequence to collapse/expand - Click item to edit properties in side panel -- cgit v1.2.3