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> </form>
</details> </details>
</div> </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> </aside>
<main class="main-area"> <main class="main-area">
<div class="section-header">ANIMATIONS</div> <div id="timeline-toolbar" class="timeline-toolbar">
<div class="animation-list" id="animation-grid"> <label class="toolbar-field">
<button class="anim-tile active" data-anim="beat_pulse"> <span class="toolbar-label">ZOOM</span>
<span class="anim-cursor">&gt;</span> <input type="range" id="zoom-slider" min="20" max="400" step="10" value="100">
<span class="anim-name">BEAT_PULSE</span> </label>
<span class="anim-desc">flash on every beat</span> <div class="toolbar-sep"></div>
</button> <label class="toolbar-field">
<button class="anim-tile" data-anim="strobe"> <span class="toolbar-label">BEAT OFFSET</span>
<span class="anim-cursor">&gt;</span> <input type="number" id="beat-offset" step="0.005" min="-0.2" max="0.2" value="0.030">
<span class="anim-name">STROBE</span> <span class="toolbar-unit">s</span>
<span class="anim-desc">rapid flash burst</span> </label>
</button> <div class="toolbar-sep"></div>
<button class="anim-tile" data-anim="color_wave"> <button id="btn-snap" class="transport-btn snap-btn active" title="Snap to beat">SNAP</button>
<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> </div>
<canvas id="timeline-canvas"></canvas>
<div id="block-inspector" class="block-inspector" style="display:none;"></div>
</main> </main>
<footer class="transport-bar"> <footer class="transport-bar">

View File

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