blob: aed140e5d007b746a02393b7f5b2c47aabe7167f (
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
|
# 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
The editor parses and generates `.seq` files with this format:
```
SEQUENCE <start_time> <priority>
EFFECT <ClassName> <start_time> <end_time> <priority> [args...]
EFFECT <ClassName> <start_time> <end_time> <priority> [args...]
```
Example:
```
SEQUENCE 0.0 0
EFFECT FlashEffect 0.0 1.0 0
EFFECT FadeEffect 0.5 2.0 1
SEQUENCE 3.0 1
EFFECT HeptagonEffect 0.0 0.5 0
```
## 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.
|
