From 0957b138af0bb1c217aeab90171e36e9fc2f54e9 Mon Sep 17 00:00:00 2001 From: skal Date: Thu, 5 Feb 2026 21:06:20 +0100 Subject: feat(tools): Implement Task #57 - Interactive Timeline Editor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- tools/timeline_editor/index.html | 675 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 675 insertions(+) create mode 100644 tools/timeline_editor/index.html (limited to 'tools/timeline_editor/index.html') diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html new file mode 100644 index 0000000..0d10e4a --- /dev/null +++ b/tools/timeline_editor/index.html @@ -0,0 +1,675 @@ + + + + + + Timeline Editor - demo.seq + + + +
+
+

📊 Timeline Editor

+

Interactive editor for demo.seq files

+
+ +
+ + + + +
+ +
+ + 100% + +
+ +
+ +
+
+
+
+ + + +
+
+ + + + -- cgit v1.2.3