demo.git/tools/track_visualizer/index.html, branch main

refactor(tools): consolidate common CSS for HTML tools

2026-02-15T16:09:57Z

Extract common styles from various tool HTML files (timeline, spectral, cnn_v2_test, etc.) into a shared stylesheet. This reduces code duplication and improves maintainability of the tool frontends. - Create a new 'tools/common/style.css' to house the shared rules. - Update all tool HTML files to link to the new stylesheet. - Remove redundant inline styles from individual HTML files.

refactor(audio): Convert tracker to unit-less timing system

2026-02-07T18:22:43Z

Changes tracker timing from beat-based to unit-less system to separate musical structure from BPM-dependent playback speed. TIMING CONVENTION: - 1 unit = 4 beats (by convention) - Conversion: seconds = units * (4 / BPM) * 60 - At 120 BPM: 1 unit = 2 seconds BENEFITS: - Pattern structure independent of BPM - BPM changes only affect playback speed, not structure - Easier pattern composition (0.00-1.00 for typical 4-beat pattern) - Fixes issue where patterns played for 2s instead of expected duration DATA STRUCTURES (tracker.h): - TrackerEvent.beat → TrackerEvent.unit_time - TrackerPattern.num_beats → TrackerPattern.unit_length - TrackerPatternTrigger.time_sec → TrackerPatternTrigger.unit_time RUNTIME (tracker.cc): - Added BEATS_PER_UNIT constant (4.0) - Convert units to seconds at playback time using BPM - Pattern remains active for full unit_length duration - Fixed premature pattern deactivation bug COMPILER (tracker_compiler.cc): - Parse LENGTH parameter from PATTERN lines (defaults to 1.0) - Parse unit_time instead of beat values - Generate code with unit-less timing ASSETS: - test_demo.track: converted to unit-less (8 score triggers) - music.track: converted to unit-less (all patterns) - Events: beat/4 conversion (e.g., beat 2.0 → unit 0.50) - Score: seconds/unit_duration (e.g., 4s → 2.0 units at 120 BPM) VISUALIZER (track_visualizer/index.html): - Parse LENGTH parameter and BPM directive - Convert unit-less time to seconds for rendering - Update tick positioning to use unit_time - Display correct pattern durations DOCUMENTATION (doc/TRACKER.md): - Added complete .track format specification - Timing conversion reference table - Examples with unit-less timing - Pattern LENGTH parameter documentation FILES MODIFIED: - src/audio/tracker.{h,cc} (data structures + runtime conversion) - tools/tracker_compiler.cc (parser + code generation) - assets/{test_demo,music}.track (converted to unit-less) - tools/track_visualizer/index.html (BPM-aware rendering) - doc/TRACKER.md (format documentation) - convert_track.py (conversion utility script) TEST RESULTS: - test_demo builds and runs correctly - demo64k builds successfully - Generated code verified (unit-less values in music_data.cc) Co-Authored-By: Claude Sonnet 4.5

Revert "fix(track_visualizer): Convert beats to seconds correctly"

2026-02-07T17:57:05Z

This reverts commit de6fc77a1b4becf5841881fa4fb7bd78141d81dc.

fix(track_visualizer): Convert beats to seconds correctly

2026-02-07T17:56:08Z

- Added beatsToSeconds() helper function - Renamed getPatternDuration to getPatternDurationBeats for clarity - Pattern durations now correctly calculated in seconds (was treating beats as seconds) - Fixes visualization showing incorrect pattern box widths

feat(tools): Add music track visualizer

2026-02-07T17:50:55Z

Created HTML-based visualizer for .track files with: Features: - Load .track files via file input button - Zoomable timeline (horizontal zoom with mouse wheel) - Scrollable view (Shift+wheel for horizontal scroll) - Vertical zoom controls for pattern boxes - Click & drag panning Visualization: - Color-coded pattern boxes (deterministic HSL colors from name hash) - Automatic stack-based layout (prevents overlapping patterns) - Beat grid lines within each pattern (vertical lines at beat boundaries) - Beat numbers displayed when zoomed in - Sample ticks showing when events trigger (height varies with volume) - Alternating beat background (full-height rectangles for easy counting) - Time ruler with second markers at top Technical: - Single standalone HTML file (13KB, no dependencies) - Pure HTML5 Canvas + JavaScript - Parses .track format: SAMPLE, PATTERN, SCORE sections - Responsive canvas sizing based on track duration - 120 BPM timing (2 beats per second) Files: - tools/track_visualizer/index.html (visualizer) - tools/track_visualizer/README.md (documentation) Usage: Open index.html in browser, load assets/music.track