From 26febe604f517816acae0cb70db04668cc1bdb27 Mon Sep 17 00:00:00 2001
From: skal <pascal.massimino@gmail.com>
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 <noreply@anthropic.com>
---
 tools/timeline_editor/index.html | 116 +++++++++++++++++++++++++++++++++------
 1 file changed, 99 insertions(+), 17 deletions(-)

(limited to 'tools/timeline_editor/index.html')

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index 45c9f1f..d2bac0e 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Timeline Editor - timeline.seq</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%231e1e1e'/><rect x='10' y='30' width='15' height='40' fill='%234ec9b0'/><rect x='30' y='20' width='15' height='60' fill='%234ec9b0'/><rect x='50' y='35' width='15' height='30' fill='%234ec9b0'/><rect x='70' y='15' width='15' height='70' fill='%234ec9b0'/></svg>">
     <style>
         :root {
             --bg-dark: #1e1e1e;
@@ -45,7 +46,8 @@
 
         .sticky-header { position: sticky; top: 0; background: var(--bg-medium); z-index: 100; padding: 20px 20px 10px 20px; border-bottom: 2px solid var(--bg-light); flex-shrink: 0; }
         .waveform-container { position: relative; height: 80px; overflow: hidden; background: rgba(0, 0, 0, 0.3); border-radius: var(--radius); cursor: crosshair; }
-        #waveformCanvas { position: absolute; left: 0; top: 0; height: 80px; display: block; }
+        #cpuLoadCanvas { position: absolute; left: 0; top: 0; height: 80px; display: block; z-index: 1; }
+        #waveformCanvas { position: absolute; left: 0; top: 0; height: 80px; display: block; z-index: 2; }
 
         .playback-indicator { position: absolute; top: 0; left: 0; width: 2px; background: var(--accent-red); box-shadow: 0 0 4px rgba(244, 135, 113, 0.8); pointer-events: none; z-index: 90; display: block; }
 
@@ -111,6 +113,7 @@
                 <label class="file-label">🎵 Load Audio (WAV)<input type="file" id="audioInput" accept=".wav"></label>
                 <button id="clearAudioBtn" disabled>✖ Clear Audio</button>
                 <button id="addSequenceBtn" disabled>➕ Add Sequence</button>
+                <button id="addEffectBtn" disabled>✨ Add Effect</button>
                 <button id="deleteBtn" disabled>🗑️ Delete Selected</button>
                 <button id="reorderBtn" disabled>🔄 Re-order by Time</button>
             </div>
@@ -145,9 +148,10 @@
 
         <div class="timeline-container">
             <div class="sticky-header">
-                <div class="waveform-container" id="waveformContainer" style="display: none;">
-                    <div class="playback-indicator" id="waveformPlaybackIndicator"></div>
+                <div class="waveform-container" id="waveformContainer">
+                    <canvas id="cpuLoadCanvas"></canvas>
                     <canvas id="waveformCanvas"></canvas>
+                    <div class="playback-indicator" id="waveformPlaybackIndicator"></div>
                 </div>
                 <div class="time-markers" id="timeMarkers"></div>
             </div>
@@ -175,7 +179,7 @@
         const state = {
             sequences: [], currentFile: null, selectedItem: null, pixelsPerSecond: 100,
             showBeats: true, quantizeUnit: 1, bpm: 120, isDragging: false, dragOffset: { x: 0, y: 0 },
-            lastActiveSeqIndex: -1, isDraggingHandle: false, handleType: null,
+            lastActiveSeqIndex: -1, isDraggingHandle: false, handleType: null, handleDragOffset: 0,
             audioBuffer: null, audioDuration: 0, audioSource: null, audioContext: null,
             isPlaying: false, playbackStartTime: 0, playbackOffset: 0, animationFrameId: null,
             lastExpandedSeqIndex: -1, dragMoved: false
@@ -191,7 +195,9 @@
             clearAudioBtn: document.getElementById('clearAudioBtn'),
             waveformCanvas: document.getElementById('waveformCanvas'),
             waveformContainer: document.getElementById('waveformContainer'),
+            cpuLoadCanvas: document.getElementById('cpuLoadCanvas'),
             addSequenceBtn: document.getElementById('addSequenceBtn'),
+            addEffectBtn: document.getElementById('addEffectBtn'),
             deleteBtn: document.getElementById('deleteBtn'),
             reorderBtn: document.getElementById('reorderBtn'),
             propertiesPanel: document.getElementById('propertiesPanel'),
@@ -291,7 +297,6 @@
                 state.audioBuffer = await state.audioContext.decodeAudioData(arrayBuffer);
                 state.audioDuration = state.audioBuffer.duration;
                 renderWaveform();
-                dom.waveformContainer.style.display = 'block';
                 dom.playbackControls.style.display = 'flex';
                 dom.clearAudioBtn.disabled = false;
                 showMessage(`Audio loaded: ${state.audioDuration.toFixed(2)}s`, 'success');
@@ -332,10 +337,66 @@
             ctx.moveTo(0, centerY); ctx.lineTo(canvasWidth, centerY); ctx.stroke();
         }
 
+        function computeCPULoad() {
+            if (state.sequences.length === 0) return { maxTime: 60, loads: [] };
+            let maxTime = 60;
+            for (const seq of state.sequences) {
+                for (const effect of seq.effects) {
+                    maxTime = Math.max(maxTime, seq.startTime + effect.endTime);
+                }
+            }
+            if (state.audioDuration > 0) maxTime = Math.max(maxTime, state.audioDuration * state.bpm / 60.0);
+            const resolution = 0.1;
+            const numSamples = Math.ceil(maxTime / resolution);
+            const loads = new Array(numSamples).fill(0);
+            for (const seq of state.sequences) {
+                for (const effect of seq.effects) {
+                    const startBeat = seq.startTime + effect.startTime;
+                    const endBeat = seq.startTime + effect.endTime;
+                    const startIdx = Math.floor(startBeat / resolution);
+                    const endIdx = Math.ceil(endBeat / resolution);
+                    for (let i = startIdx; i < endIdx && i < numSamples; i++) {
+                        loads[i] += 1.0;
+                    }
+                }
+            }
+            return { maxTime, loads, resolution };
+        }
+
+        function renderCPULoad() {
+            const canvas = dom.cpuLoadCanvas, ctx = canvas.getContext('2d');
+            const { maxTime, loads, resolution } = computeCPULoad();
+            const canvasWidth = maxTime * state.pixelsPerSecond, canvasHeight = 80;
+            canvas.width = canvasWidth; canvas.height = canvasHeight;
+            canvas.style.width = `${canvasWidth}px`; canvas.style.height = `${canvasHeight}px`;
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+            if (loads.length === 0) return;
+            const barWidth = resolution * state.pixelsPerSecond;
+            for (let i = 0; i < loads.length; i++) {
+                const load = loads[i];
+                const normalizedLoad = Math.min(load / 8, 1.0);
+                let r, g, b;
+                if (normalizedLoad < 0.5) {
+                    r = Math.floor(normalizedLoad * 2 * 160);
+                    g = 160;
+                } else {
+                    r = 160;
+                    g = Math.floor((1 - (normalizedLoad - 0.5) * 2) * 160);
+                }
+                b = 0;
+                const x = i * barWidth;
+                ctx.fillStyle = load === 0 ? 'rgba(0, 0, 0, 0.3)' : `rgb(${r}, ${g}, ${b})`;
+                ctx.fillRect(x, 0, barWidth, canvasHeight);
+            }
+        }
+
         function clearAudio() {
             stopPlayback(); state.audioBuffer = null; state.audioDuration = 0;
-            dom.waveformContainer.style.display = 'none'; dom.playbackControls.style.display = 'none';
-            dom.clearAudioBtn.disabled = true; renderTimeline(); showMessage('Audio cleared', 'success');
+            dom.playbackControls.style.display = 'none';
+            dom.clearAudioBtn.disabled = true;
+            const ctx = dom.waveformCanvas.getContext('2d');
+            ctx.clearRect(0, 0, dom.waveformCanvas.width, dom.waveformCanvas.height);
+            renderTimeline(); showMessage('Audio cleared', 'success');
         }
 
         async function startPlayback() {
@@ -407,6 +468,7 @@
 
         // Render
         function renderTimeline() {
+            renderCPULoad();
             dom.timeline.innerHTML = ''; document.getElementById('timeMarkers').innerHTML = '';
             let maxTime = 60;
             for (const seq of state.sequences) {
@@ -533,13 +595,19 @@
         function startHandleDrag(e, type, seqIndex, effectIndex) {
             e.preventDefault(); state.isDraggingHandle = true; state.handleType = type;
             state.selectedItem = { type: 'effect', seqIndex, effectIndex, index: seqIndex };
+            const seq = state.sequences[seqIndex], effect = seq.effects[effectIndex];
+            const timelineRect = dom.timeline.getBoundingClientRect();
+            const mouseTimeBeats = (e.clientX - timelineRect.left + dom.timelineContent.scrollLeft) / state.pixelsPerSecond;
+            const handleTimeBeats = seq.startTime + (type === 'left' ? effect.startTime : effect.endTime);
+            state.handleDragOffset = handleTimeBeats - mouseTimeBeats;
             document.addEventListener('mousemove', onHandleDrag); document.addEventListener('mouseup', stopHandleDrag);
         }
 
         function onHandleDrag(e) {
             if (!state.isDraggingHandle || !state.selectedItem) return;
             const timelineRect = dom.timeline.getBoundingClientRect();
-            let newTime = Math.max(0, (e.clientX - timelineRect.left + dom.timelineContent.scrollLeft) / state.pixelsPerSecond);
+            let newTime = (e.clientX - timelineRect.left + dom.timelineContent.scrollLeft) / state.pixelsPerSecond + state.handleDragOffset;
+            newTime = Math.max(0, newTime);
             if (state.quantizeUnit > 0) newTime = Math.round(newTime * state.quantizeUnit) / state.quantizeUnit;
             const seq = state.sequences[state.selectedItem.seqIndex], effect = seq.effects[state.selectedItem.effectIndex];
             const relativeTime = newTime - seq.startTime;
@@ -556,7 +624,9 @@
 
         function selectItem(type, seqIndex, effectIndex = null) {
             state.selectedItem = { type, index: seqIndex, seqIndex, effectIndex };
-            renderTimeline(); updateProperties(); dom.deleteBtn.disabled = false;
+            renderTimeline(); updateProperties();
+            dom.deleteBtn.disabled = false;
+            dom.addEffectBtn.disabled = type !== 'sequence';
         }
 
         // Properties
@@ -566,11 +636,13 @@
             if (state.selectedItem.type === 'sequence') {
                 const seq = state.sequences[state.selectedItem.index];
                 dom.propertiesContent.innerHTML = `
-                    <div class="property-group"><label>Name</label><input type="text" id="propName" value="${seq.name || ''}" placeholder="Sequence name"></div>
-                    <div class="property-group"><label>Start Time (seconds)</label><input type="number" id="propStartTime" value="${seq.startTime}" step="0.1" min="0"></div>
+                    <div class="property-group"><label>Name</label><input type="text" id="propName" value="${seq.name || ''}" placeholder="Sequence name" inputmode="text"></div>
+                    <div class="property-group"><label>Start Time (beats)</label><input type="number" id="propStartTime" value="${seq.startTime}" step="0.1" min="0"></div>
+                    <div class="property-group"><button id="propDeleteBtn" style="width: 100%; background: var(--accent-red);">🗑️ Delete Sequence</button></div>
                 `;
                 document.getElementById('propName').addEventListener('input', applyProperties);
                 document.getElementById('propStartTime').addEventListener('input', applyProperties);
+                document.getElementById('propDeleteBtn').addEventListener('click', () => dom.deleteBtn.click());
             } else if (state.selectedItem.type === 'effect') {
                 const effect = state.sequences[state.selectedItem.seqIndex].effects[state.selectedItem.effectIndex];
                 const effects = state.sequences[state.selectedItem.seqIndex].effects;
@@ -588,6 +660,7 @@
                         </div>
                         <button id="togglePriorityBtn" style="width: 100%;">${samePriority ? '✓ Same as Above (=)' : 'Increment (+)'}</button>
                     </div>
+                    <div class="property-group"><button id="propDeleteBtn" style="width: 100%; background: var(--accent-red);">🗑️ Delete Effect</button></div>
                 `;
                 document.getElementById('propClassName').addEventListener('input', applyProperties);
                 document.getElementById('propStartTime').addEventListener('input', applyProperties);
@@ -596,6 +669,7 @@
                 document.getElementById('moveUpBtn').addEventListener('click', moveEffectUp);
                 document.getElementById('moveDownBtn').addEventListener('click', moveEffectDown);
                 document.getElementById('togglePriorityBtn').addEventListener('click', toggleSamePriority);
+                document.getElementById('propDeleteBtn').addEventListener('click', () => dom.deleteBtn.click());
             }
         }
 
@@ -734,11 +808,19 @@
             renderTimeline(); showMessage('New sequence added', 'success');
         });
 
+        dom.addEffectBtn.addEventListener('click', () => {
+            if (!state.selectedItem || state.selectedItem.type !== 'sequence') return;
+            const seq = state.sequences[state.selectedItem.index];
+            seq.effects.push({ type: 'effect', className: 'Effect', startTime: 0, endTime: 10, priority: 0, priorityModifier: '+', args: '' });
+            seq._collapsed = false;
+            renderTimeline(); showMessage('New effect added', 'success');
+        });
+
         dom.deleteBtn.addEventListener('click', () => {
             if (!state.selectedItem) return;
             if (state.selectedItem.type === 'sequence') state.sequences.splice(state.selectedItem.index, 1);
             else if (state.selectedItem.type === 'effect') state.sequences[state.selectedItem.seqIndex].effects.splice(state.selectedItem.effectIndex, 1);
-            state.selectedItem = null; dom.deleteBtn.disabled = true; renderTimeline(); updateProperties();
+            state.selectedItem = null; dom.deleteBtn.disabled = true; dom.addEffectBtn.disabled = true; renderTimeline(); updateProperties();
             showMessage('Item deleted', 'success');
         });
 
@@ -768,7 +850,7 @@
         dom.quantizeSelect.addEventListener('change', e => { state.quantizeUnit = parseFloat(e.target.value); });
         dom.panelToggle.addEventListener('click', () => { dom.propertiesPanel.classList.add('collapsed'); dom.panelCollapseBtn.classList.add('visible'); dom.panelToggle.textContent = '▲ Expand'; });
         dom.panelCollapseBtn.addEventListener('click', () => { dom.propertiesPanel.classList.remove('collapsed'); dom.panelCollapseBtn.classList.remove('visible'); dom.panelToggle.textContent = '▼ Collapse'; });
-        dom.timeline.addEventListener('click', () => { state.selectedItem = null; dom.deleteBtn.disabled = true; renderTimeline(); updateProperties(); });
+        dom.timeline.addEventListener('click', () => { state.selectedItem = null; dom.deleteBtn.disabled = true; dom.addEffectBtn.disabled = true; renderTimeline(); updateProperties(); });
 
         dom.timeline.addEventListener('dblclick', async e => {
             if (e.target !== dom.timeline) return;
@@ -800,10 +882,10 @@
         });
 
         dom.timelineContent.addEventListener('scroll', () => {
-            if (dom.waveformCanvas) {
-                dom.waveformCanvas.style.left = `-${dom.timelineContent.scrollLeft}px`;
-                dom.waveformPlaybackIndicator.style.transform = `translateX(-${dom.timelineContent.scrollLeft}px)`;
-            }
+            const scrollLeft = dom.timelineContent.scrollLeft;
+            dom.cpuLoadCanvas.style.left = `-${scrollLeft}px`;
+            dom.waveformCanvas.style.left = `-${scrollLeft}px`;
+            dom.waveformPlaybackIndicator.style.transform = `translateX(-${scrollLeft}px)`;
         });
 
         dom.timelineContent.addEventListener('wheel', e => {
-- 
cgit v1.2.3