Gitea-Admin/led2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(02): controller UI — vertical anim list, play/pause, browser audio, terminal aesthetic

Browse Source 
- Replace waveform+DAW layout with animation controller
- Animations as vertical list with > cursor, no icons
- Transport: play/pause button, seek slider, time display
- Browser <audio> handles playback, 10Hz ticks to server
- Sidebar: devices only (200px)
- python:3.11-slim base (replaces Alpine, fixes librosa/numba build)
- libsndfile symlink kept for soundfile
- Remove python-mpv, add librosa for beat detection
This commit is contained in:
Claude
2026-04-06 17:32:11 +00:00
parent 9c1ca03957
commit 37f483e880
4 changed files with 435 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
lightsync/frontend/index.html
View File

@@ -1,13 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIGHTSYNC</title>
<link rel="stylesheet" href="/style.css">
<!-- JetBrains Mono via Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-shell">
@@ -16,20 +13,23 @@
<span class="header-title">&#9632; LIGHTSYNC</span>
<div class="status-dot" id="status-dot"></div>
<span id="status-text" class="text-dim">OFFLINE</span>
<span id="show-name" class="text-dim">&#8212; no show loaded &#8212;</span>
<div id="beat-indicator" class="beat-indicator" title="Beat pulse"></div>
<span class="header-sep">|</span>
<span id="show-name" class="text-dim">&#8212; no file loaded &#8212;</span>
<div style="flex:1"></div>
<div id="beat-indicator" class="beat-indicator" title="Beat"></div>
<span id="beat-label" class="text-dim beat-label">BEAT</span>
</header>
<aside class="sidebar">
<div class="panel" id="devices-panel" style="flex: 0 0 auto;">
<div class="panel" style="flex: 1; min-height: 0;">
<div class="panel-header">DEVICES</div>
<div class="panel-content" id="device-list">
<span class="text-dim">loading...</span>
</div>
<details class="device-manage-section">
<summary>&#9881; MANAGE DEVICES</summary>
<summary>&#9881; MANAGE</summary>
<form id="add-device-form" class="device-form">
<input type="text" name="name" placeholder="Device name" required>
<input type="text" name="name" placeholder="Name" required>
<select name="strip_type" required>
<option value="sk6812">SK6812</option>
<option value="ws2801">WS2801</option>
@@ -38,47 +38,71 @@
<input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
<input type="text" name="ip" placeholder="IP address" required>
<input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
<button type="submit">+ ADD DEVICE</button>
<button type="submit">+ ADD</button>
</form>
</details>
</div>
<div class="panel" id="animations-panel" style="flex: 1; min-height: 0;">
<div class="panel-header">ANIMATIONS</div>
<div class="panel-content">
<select id="animation-select" class="animation-select-input">
<option value="beat_pulse">Beat Pulse</option>
<option value="strobe">Strobe</option>
<option value="color_wave">Color Wave</option>
<option value="rainbow">Rainbow</option>
</select>
</div>
</div>
</aside>
<main class="main-area">
<div class="panel" id="timeline-panel" style="flex: 1; display: flex; flex-direction: column;">
<div class="panel-header">TIMELINE</div>
<div class="waveform-container" style="flex: 1; position: relative; min-height: 100px;">
<canvas id="waveform-canvas" style="width: 100%; height: 100%;"></canvas>
<div id="playback-cursor" class="playback-cursor"></div>
</div>
<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>
</main>
<footer class="transport-bar" id="transport-panel">
<!-- Hidden native audio element — browser handles playback -->
<footer class="transport-bar">
<audio id="player" style="display:none;"></audio>
<div class="transport-file">
<label class="transport-btn" title="Upload MP3/WAV/FLAC/OGG from your computer" style="cursor:pointer;">
+ UPLOAD
<input type="file" id="audio-upload" accept=".mp3,.wav,.flac,.ogg" style="display:none;">
</label>
<select id="audio-select" class="audio-path-input">
<option value="">&#8212; no files yet, upload first &#8212;</option>
</select>
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
</div>
<button id="btn-play" class="transport-btn transport-playpause" title="Play/Pause">&#9654;</button>
<span id="time-current" class="transport-time">0:00</span>
<span class="text-dim">/</span>
<span id="time-duration" class="transport-time">0:00</span>
<input type="range" id="seek-bar" min="0" max="100" value="0" step="0.1" class="seek-slider">
<div class="transport-sep"></div>
<label class="transport-btn" title="Upload MP3/WAV/FLAC/OGG" style="cursor:pointer;">
+ UPLOAD
<input type="file" id="audio-upload" accept=".mp3,.wav,.flac,.ogg" style="display:none;">
</label>
<select id="audio-select" class="transport-file-select">
<option value="">&#8212; no files &#8212;</option>
</select>
<button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
</footer>
</div>