blob: 1c73c530523213411d71daacb8372bed312caabc (
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
# Timeline Editor
Interactive web-based editor for `demo.seq` timeline files.
## Features
✅ **Implemented:**
- 📂 Load/save `demo.seq` files
- 📊 Visual Gantt-style timeline
- 🎯 Drag & drop sequences along timeline
- 🎯 Drag & drop effects along timeline
- ⏱️ Edit timing (start/end times)
- ⚙️ Edit priorities
- ⚙️ Edit effect class names and constructor arguments
- 🔍 Zoom in/out (10% - 200%)
- 📋 Real-time statistics
- 🗑️ Delete sequences/effects
- ➕ Add new sequences
## Usage
1. **Open the editor:**
```bash
open tools/timeline_editor/index.html
```
Or double-click `index.html` in Finder.
2. **Load a timeline:**
- Click "📂 Load demo.seq"
- Select your `assets/demo.seq` file
3. **Edit the timeline:**
- **Drag sequences/effects** to move them along the timeline
- **Click an item** to select it and view properties
- **Edit properties** in the panel below
- **Click "Apply"** to save property changes
4. **Save your changes:**
- Click "💾 Save demo.seq"
- Choose where to save the modified file
5. **Zoom controls:**
- Use the zoom slider to adjust timeline scale
- Higher zoom = more pixels per second
## Keyboard Shortcuts
- **Delete key**: Delete selected item (when implemented)
- **Escape**: Deselect current item
## 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)
```
## Color Coding
- **Blue boxes**: Sequences (container for effects)
- **Gray boxes**: Effects (visual elements)
- **Green highlight**: Selected sequence
- **Orange highlight**: Selected effect
## Tips
- **Sequences** have absolute start times
- **Effects** have start/end times **relative to their sequence**
- Priority determines rendering order (higher = rendered later = on top)
- Effect constructor arguments are passed as-is to the C++ code
## Limitations
- No preview rendering (this is intentional - it's just a timeline editor)
- No automatic overlap detection yet
- No undo/redo (coming soon)
- Cannot add effects to sequences (manually edit properties for now)
## Future Enhancements
- [ ] Undo/redo functionality
- [ ] Add effect button
- [ ] Overlap detection warnings
- [ ] Snap-to-grid
- [ ] Timeline playback indicator
- [ ] Multiple file comparison
- [ ] Export to different formats
## Technical Details
- Pure HTML/CSS/JavaScript (no dependencies)
- No backend required
- Works offline
- All processing happens in the browser
- Files are saved via browser download API
## Integration
After editing in the timeline editor:
1. Save the modified `demo.seq`
2. Copy it to `assets/demo.seq`
3. Rebuild the project: `cmake --build build`
4. The new timeline will be compiled into the demo
No code changes needed - the `seq_compiler` automatically processes the updated file.
|
