summaryrefslogtreecommitdiff
path: root/tools/timeline_editor/index.html
AgeCommit message (Collapse)Author
19 hoursfix(timeline-editor): Fix parser to handle actual demo.seq formatskal
Fixed critical parsing bugs that prevented loading real demo.seq files. Issues fixed: 1. Beat notation support: Parse '0b', '4b' as beats and convert to seconds - Added BPM parsing from '# BPM 120' comments - Helper function: parseTime() converts beats to seconds using BPM 2. Priority modifiers: Handle '+', '=', '-' modifiers correctly - '+' increments priority - '=' keeps same priority - '-' decrements priority (for background effects) - Store both absolute priority and modifier for round-trip 3. Inline comments: Strip comments from end of lines with '#' - Effect lines like 'EFFECT + FlashEffect 0.0 1.0 # comment' now parse 4. Sequence names: Parse optional sequence names in quotes - Format: SEQUENCE <time> <priority> "name" [end] 5. Updated serializer: Output correct format with modifiers - Generate 'EFFECT + ClassName ...' instead of 'EFFECT ClassName ... priority' - Preserve BPM comment in output - Preserve sequence names Parser now correctly handles: - SEQUENCE 0b 0 → Start at beat 0, priority 0 - SEQUENCE 4b 0 → Start at beat 4 (2 seconds @ 120 BPM) - EFFECT - FlashCubeEffect .2 3 → Background effect (priority -1) - EFFECT + FlashEffect 0.0 1. → Normal effect (priority 0) - EFFECT = GaussianBlur 0 8 → Same priority as previous Testing: Load assets/demo.seq should now work correctly.
19 hoursfeat(tools): Implement Task #57 - Interactive Timeline Editorskal
Created a functional web-based timeline editor for demo.seq files. Features implemented: ✅ Load/save demo.seq files via browser file API ✅ Visual Gantt-style timeline with time markers ✅ Drag & drop sequences and effects along timeline ✅ Properties panel for editing timing, priorities, arguments ✅ Zoom controls (10% - 200%) ✅ Add/delete sequences and effects ✅ Real-time statistics (sequence count, effect count, duration) ✅ Dark theme matching VSCode aesthetic ✅ Color-coded items (sequences blue, effects gray) ✅ Selection highlighting Technical details: - Pure HTML/CSS/JavaScript (no dependencies, no build step) - ~600 lines in single self-contained HTML file - Works offline, no backend needed - Parser converts demo.seq text → JavaScript objects - Serializer converts JavaScript objects → demo.seq text Usage: 1. Open tools/timeline_editor/index.html in browser 2. Load assets/demo.seq 3. Drag items, edit properties 4. Save modified file 5. Copy to assets/demo.seq and rebuild Limitations (acceptable for v1): - No undo/redo yet - No effect creation UI (must use properties panel) - No overlap detection warnings - No snap-to-grid - No preview rendering (intentional - editor only) This provides a quick way to experiment with demo timing without recompiling, and better visualization of sequence/effect relationships. Size: ~25KB (HTML + embedded JS/CSS) Status: Task #57 basic implementation complete