blob: a76a5ed53eceab0ca9450f3b8ba2aa687b7d5bd9 (
plain)
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
|
# Timeline Editor
Interactive web-based editor for `timeline.seq` files.
## Features
- 📂 Load/save `timeline.seq` files
- 📊 Visual Gantt-style timeline with sticky time markers
- 🎯 Drag & drop sequences and effects
- 🎯 Resize effects with handles
- 📦 Collapsible sequences (double-click to collapse)
- 📏 Vertical grid lines synchronized with time ticks
- ⏱️ Edit timing and properties
- ⚙️ Stack-order based priority system
- 🔍 Zoom (10%-500%) with mouse wheel + Ctrl/Cmd
- 🎵 Audio waveform visualization
- 🎼 Snap-to-beat mode
- 🔄 Re-order sequences by time
- 🗑️ Delete sequences/effects
## Usage
1. **Open:** `open tools/timeline_editor/index.html` or double-click in browser
2. **Load timeline:** Click "📂 Load timeline.seq" → select `workspaces/main/timeline.seq`
3. **Edit:**
- Drag sequences/effects to reposition
- Double-click sequence header to collapse/expand
- Click item to edit properties in side panel
- Drag effect handles to resize
4. **Zoom:** Ctrl/Cmd + mouse wheel (zooms at cursor position)
5. **Audio:** Load WAV file for waveform visualization
6. **Save:** Click "💾 Save timeline.seq"
## File Format
⚠️ **For complete format specification, see:** `doc/SEQUENCE.md`
The editor parses and generates `.seq` files with this format:
```
# BPM 120
SEQUENCE <start_time> <priority> ["optional_name"] [optional_end]
EFFECT <+|=|-> <ClassName> <start_time> <end_time> [args...]
EFFECT <+|=|-> <ClassName> <start_time> <end_time> [args...]
```
**Priority Modifiers:**
- `+` = Increment priority (normal effects)
- `=` = Keep same priority as previous
- `-` = Decrement priority (background layers)
**Time Notation:**
- `0b`, `4b`, `64b` = Beats (converted using BPM)
- `0.0`, `2.0`, `32.0` = Seconds
- Integer without 'b': treated as beats
- Decimal point: treated as seconds
Example:
```
# BPM 120
SEQUENCE 0b 0 "Opening Scene"
EFFECT - FlashCubeEffect .2 3 # Background (priority -1)
EFFECT + FlashEffect 0.0 1.0 # Foreground (priority 0)
EFFECT + FadeEffect 0.5 2.0 # Overlay (priority 1)
SEQUENCE 4b 1 "Beat Drop"
EFFECT + HeptagonEffect 0.0 0.5 # Priority 0
EFFECT = ParticlesEffect 0.0 2.0 # Priority 0 (same layer)
```
## Technical Notes
- Pure HTML/CSS/JavaScript (no dependencies, works offline)
- Sequences have absolute times, effects are relative to parent sequence
- Priority determines render order (higher = on top)
- Collapsed sequences show 35px title bar, expanded show full effect stack
- Time markers sticky at top when scrolling
- Vertical grid lines aid alignment
|
