1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
# Timeline Editor
Interactive web-based editor for `timeline.seq` files with Sequence V2 format support.
## Quick Start
```bash
cd tools/timeline_editor
python3 -m http.server 8080
# Open http://localhost:8080
```
Or with auto-load: `index.html?seq=../../workspaces/main/timeline.seq&wav=audio.wav`
## Features
**Editing:**
- Drag/drop sequences and effects, resize with handles
- Add/delete sequences and effects
- Edit NODE declarations (typed buffers: u8x4_norm, f32x4, f16x8, depth24, compute_f32)
- Edit effect routing: inputs/outputs with buffer chain visualization
- Properties panel with validation for undeclared nodes
- Collapsible sequences (double-click), re-order by time
**Timeline:**
- Beat-based timing with BPM slider (60-200)
- Quantize grid (Off, 1/32-1 beat), snap-to-grid with hotkeys 0-6
- Zoom 10%-200% (Ctrl/Cmd + wheel)
- CPU load visualization (effect density)
- Show beats/seconds toggle
**Audio:**
- WAV playback with waveform visualization
- Seek by clicking waveform or double-clicking timeline
- Auto-expand/collapse sequences during playback
- Dual playback indicators (timeline + waveform)
**Shortcuts:**
- **Spacebar**: Play/pause
- **0-6**: Quantize (0=Off, 1=1beat, etc.)
- **Ctrl/Cmd + Wheel**: Zoom
## File Format (V2)
⚠️ **Complete spec:** `doc/SEQUENCE.md`
```
# BPM 120
SEQUENCE <start_time> <priority> ["name"]
NODE <name> <type> # Optional: u8x4_norm|f32x4|f16x8|depth24|compute_f32
EFFECT <+|=|-> <Class> <in...> -> <out...> <start> <end> [params]
```
**Reserved nodes:** `source` (input), `sink` (output)
**Priority:** `+` increment, `=` same, `-` decrement
**Time:** Beats by default, `4b` explicit beats, `2.0s` seconds
**Example:**
```
SEQUENCE 0.0 0 "Scene"
NODE temp1 u8x4_norm
NODE depth depth24
EFFECT + Hybrid3D source depth -> temp1 0.0 4.0
EFFECT + Blur temp1 -> sink 0.0 4.0
```
**Auto-inferred nodes** (no NODE declarations needed):
```
SEQUENCE 0.0 0
EFFECT + Blur source -> temp1 0.0 4.0 # temp1 auto-inferred
EFFECT + Flash temp1 -> sink 0.0 4.0
```
## Architecture
- `index.html` - Main editor (1200+ lines)
- `timeline-format.js` - V2 parser/serializer/validator
- `timeline-viewport.js` - Zoom/scroll control
- `timeline-playback.js` - Audio playback
Pure ES6 modules, no dependencies, requires HTTP server (not file://).
|
