feat(04-01): data model changes + HTML layout restructure

- Add CueModel.duration field (float = 4.0) for block length in seconds
- Add AnalysisBlock.calibration_offset field (float = 0.03) for librosa bias
- Replace main-area animation grid with timeline canvas layout (toolbar, canvas, inspector)
- Move ANIMATIONS panel into sidebar below DEVICES panel
- Add timeline-toolbar with zoom slider, beat offset input, snap toggle
This commit is contained in:
Claude
2026-04-06 23:30:55 +00:00
parent 22f31cdad0
commit 454fddc35e
2 changed files with 22 additions and 32 deletions

View File

@@ -42,42 +42,30 @@
</form>
</details>
</div>
<div class="panel" style="flex: 0 0 auto;">
<div class="panel-header">ANIMATIONS</div>
<div class="panel-content animation-list" id="animation-palette">
</div>
</div>
</aside>
<main class="main-area">
<div class="section-header">ANIMATIONS</div>
<div class="animation-list" id="animation-grid">
<button class="anim-tile active" data-anim="beat_pulse">
<span class="anim-cursor">&gt;</span>
<span class="anim-name">BEAT_PULSE</span>
<span class="anim-desc">flash on every beat</span>
</button>
<button class="anim-tile" data-anim="strobe">
<span class="anim-cursor">&gt;</span>
<span class="anim-name">STROBE</span>
<span class="anim-desc">rapid flash burst</span>
</button>
<button class="anim-tile" data-anim="color_wave">
<span class="anim-cursor">&gt;</span>
<span class="anim-name">COLOR_WAVE</span>
<span class="anim-desc">rolling color sweep</span>
</button>
<button class="anim-tile" data-anim="rainbow">
<span class="anim-cursor">&gt;</span>
<span class="anim-name">RAINBOW</span>
<span class="anim-desc">cycling hue rotation</span>
</button>
<button class="anim-tile" data-anim="fire">
<span class="anim-cursor">&gt;</span>
<span class="anim-name">FIRE</span>
<span class="anim-desc">warm flickering flames</span>
</button>
<button class="anim-tile" data-anim="chase">
<span class="anim-cursor">&gt;</span>
<span class="anim-name">CHASE</span>
<span class="anim-desc">single pixel chase</span>
</button>
<div id="timeline-toolbar" class="timeline-toolbar">
<label class="toolbar-field">
<span class="toolbar-label">ZOOM</span>
<input type="range" id="zoom-slider" min="20" max="400" step="10" value="100">
</label>
<div class="toolbar-sep"></div>
<label class="toolbar-field">
<span class="toolbar-label">BEAT OFFSET</span>
<input type="number" id="beat-offset" step="0.005" min="-0.2" max="0.2" value="0.030">
<span class="toolbar-unit">s</span>
</label>
<div class="toolbar-sep"></div>
<button id="btn-snap" class="transport-btn snap-btn active" title="Snap to beat">SNAP</button>
</div>
<canvas id="timeline-canvas"></canvas>
<div id="block-inspector" class="block-inspector" style="display:none;"></div>
</main>
<footer class="transport-bar">

View File

@@ -16,6 +16,7 @@ class AudioRef(BaseModel):
class CueModel(BaseModel):
id: UUID = Field(default_factory=uuid4)
timestamp: float
duration: float = 4.0 # block length in seconds; defaults for old files
mode: Literal["animation", "frame_sequence"] = "animation"
animation: str | None = None
params: dict[str, Any] = Field(default_factory=dict)
@@ -31,6 +32,7 @@ class AnalysisBlock(BaseModel):
tempo_bpm: float | None = None
beat_times: list[float] = Field(default_factory=list)
onset_times: list[float] = Field(default_factory=list)
calibration_offset: float = 0.03 # seconds; compensates librosa latency bias
class ShowModel(BaseModel):