276 lines
11 KiB
HTML
276 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Infinity Vis Control</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<header class="topbar topbar-creative">
|
|
<div class="topbar-actions">
|
|
<a href="/technical" class="toolbar-button toolbar-link">Mapping Settings</a>
|
|
|
|
<label class="toolbar-control toolbar-control-inline">
|
|
<span class="toolbar-label">Tempo</span>
|
|
<input id="tempo-bpm-input" type="number" min="10" max="300" step="1" />
|
|
<strong id="tempo-bpm-label">120 BPM</strong>
|
|
</label>
|
|
|
|
<label class="toolbar-control toolbar-control-inline">
|
|
<span class="toolbar-label">Mode</span>
|
|
<select id="work-mode-select">
|
|
<option value="test_edit">Test/Edit</option>
|
|
<option value="show_event">Show/Event</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="toolbar-control toolbar-control-inline">
|
|
<span class="toolbar-label">Master</span>
|
|
<input id="brightness-slider" type="range" min="0" max="1" step="0.01" />
|
|
<strong id="brightness-value">0%</strong>
|
|
</label>
|
|
|
|
<button id="go-button" class="toolbar-button" type="button">Go</button>
|
|
<button id="fade-go-button" class="toolbar-button toolbar-button-primary" type="button">
|
|
Fade Go
|
|
</button>
|
|
|
|
<label class="toolbar-control toolbar-control-inline toolbar-control-fade">
|
|
<span class="toolbar-label">Fade</span>
|
|
<input id="transition-seconds-input" type="number" min="0.1" max="30" step="0.1" />
|
|
<strong id="transition-seconds-label">2.0 s</strong>
|
|
</label>
|
|
|
|
<label class="toolbar-control toolbar-control-inline">
|
|
<span class="toolbar-label">Style</span>
|
|
<select id="transition-style-select">
|
|
<option value="snap">Snap</option>
|
|
<option value="crossfade">Crossfade</option>
|
|
<option value="chase">Chase</option>
|
|
</select>
|
|
</label>
|
|
|
|
<span id="edit-context-label" class="status-chip status-chip-edit">Edit: Live</span>
|
|
|
|
<button id="blackout-button" class="toolbar-button toolbar-button-alert" type="button">
|
|
Blackout
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<aside class="workspace-rail workspace-rail-left">
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Pattern</h2>
|
|
<p>Old-tool style mode access on top of the stable show-control primitives.</p>
|
|
</div>
|
|
<label class="control-field">
|
|
<span>Pattern</span>
|
|
<select id="pattern-select"></select>
|
|
</label>
|
|
</section>
|
|
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Look & Motion</h2>
|
|
<p>Pattern behavior and movement parameters.</p>
|
|
</div>
|
|
<div id="motion-params" class="parameter-stack"></div>
|
|
</section>
|
|
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Colors</h2>
|
|
<p>Palette and color-facing controls.</p>
|
|
</div>
|
|
<div id="color-params" class="parameter-stack"></div>
|
|
</section>
|
|
|
|
</aside>
|
|
|
|
<section class="workspace-stage">
|
|
<section class="stage-panel stage-panel-preview">
|
|
<div class="stage-header">
|
|
<div>
|
|
<h2>Preview</h2>
|
|
<p id="project-name">Loading project...</p>
|
|
<p id="topology-label">Shared host API bootstrap in progress.</p>
|
|
</div>
|
|
<div class="stage-meta">
|
|
<span class="stage-meta-label">Refresh</span>
|
|
<strong id="preview-updated">waiting for data</strong>
|
|
<button id="refresh-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-stage">
|
|
<div id="preview-grid" class="preview-grid preview-grid-mode-leds"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stage-panel stage-panel-events">
|
|
<div class="stage-header">
|
|
<div>
|
|
<h2>Status & Eventfeed</h2>
|
|
<p>Live status messages stay hot without rebuilding the whole workbench.</p>
|
|
</div>
|
|
<div class="status-chip-row">
|
|
<span id="connection-pill" class="status-chip status-chip-warning">connecting</span>
|
|
<span id="control-mode-pill" class="status-chip status-chip-live">Test/Edit</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-filter-bar">
|
|
<select id="event-kind-filter">
|
|
<option value="all">All kinds</option>
|
|
<option value="info">Info</option>
|
|
<option value="warning">Warning</option>
|
|
<option value="error">Error</option>
|
|
</select>
|
|
<input
|
|
id="event-search-filter"
|
|
class="filter-input"
|
|
type="text"
|
|
placeholder="Filter by code or message"
|
|
/>
|
|
</div>
|
|
<div id="event-list" class="event-list"></div>
|
|
</section>
|
|
</section>
|
|
|
|
<aside class="workspace-rail workspace-rail-right">
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Pending Transition</h2>
|
|
<p id="pending-panel-description">Stage direct edits locally and commit them consciously.</p>
|
|
</div>
|
|
<div class="pending-status-row">
|
|
<div class="mini-status">
|
|
<span class="toolbar-label">Scope</span>
|
|
<strong id="session-scope-label">local browser session</strong>
|
|
</div>
|
|
<div class="mini-status">
|
|
<span class="toolbar-label">Buffer</span>
|
|
<strong id="pending-compact-label">empty</strong>
|
|
</div>
|
|
<div class="mini-status">
|
|
<span class="toolbar-label">Commit</span>
|
|
<span id="pending-commit-pill" class="status-chip status-chip-idle">idle</span>
|
|
</div>
|
|
</div>
|
|
<div id="pending-session-summary" class="pending-session-summary"></div>
|
|
<div id="primitive-error-banner" class="primitive-error-banner hidden"></div>
|
|
<div class="button-stack">
|
|
<button id="trigger-transition-button" class="toolbar-button toolbar-button-primary" type="button">
|
|
Trigger Transition
|
|
</button>
|
|
<button id="clear-staged-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Clear Staged
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Presets</h2>
|
|
<p>Quick recall for curated looks plus compact save controls.</p>
|
|
</div>
|
|
<div id="preset-list" class="list-stack"></div>
|
|
<div class="compact-form compact-form-presets">
|
|
<input id="preset-id-input" type="text" placeholder="preset id" />
|
|
<label class="inline-toggle">
|
|
<input id="preset-overwrite-input" type="checkbox" />
|
|
<span>Overwrite</span>
|
|
</label>
|
|
</div>
|
|
<div class="button-row">
|
|
<button id="save-preset-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Save Current
|
|
</button>
|
|
<button id="load-preset-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Load
|
|
</button>
|
|
<button id="delete-preset-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Selected Tile</h2>
|
|
<p>Stable tile focus for operator actions and diagnostics.</p>
|
|
</div>
|
|
<div id="selected-tile-card" class="selected-tile-card empty-state">
|
|
Click a tile in the preview.
|
|
</div>
|
|
<div class="button-row">
|
|
<button id="white-test-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
White Test
|
|
</button>
|
|
<button id="live-pattern-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Live Pattern
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Utilities</h2>
|
|
<p>Fast operator actions aligned with the old desk workflow.</p>
|
|
</div>
|
|
<div class="button-stack">
|
|
<button id="utility-blackout-button" class="toolbar-button toolbar-button-alert" type="button">
|
|
Blackout
|
|
</button>
|
|
<button id="utility-go-button" class="toolbar-button" type="button">Go</button>
|
|
<button id="utility-fade-go-button" class="toolbar-button toolbar-button-primary" type="button">
|
|
Fade Go
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>Creative Snapshots</h2>
|
|
<p>Capture and recall exploratory variants without changing architecture.</p>
|
|
</div>
|
|
<div class="compact-form compact-form-two">
|
|
<input id="snapshot-id-input" type="text" placeholder="snapshot id" />
|
|
<input id="snapshot-label-input" type="text" placeholder="label" />
|
|
<label class="inline-toggle">
|
|
<input id="snapshot-overwrite-input" type="checkbox" />
|
|
<span>Overwrite</span>
|
|
</label>
|
|
<button id="save-snapshot-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Save Snapshot
|
|
</button>
|
|
</div>
|
|
<div id="snapshot-list" class="list-stack"></div>
|
|
</section>
|
|
|
|
<section class="dock-section">
|
|
<div class="dock-header">
|
|
<h2>View & Output</h2>
|
|
<p>Read-only state and output context for live operation.</p>
|
|
</div>
|
|
<span id="preview-mode-label" class="hidden">LEDs Only</span>
|
|
<div id="view-output-list" class="info-list"></div>
|
|
<details class="raw-snapshot">
|
|
<summary>Raw Snapshot</summary>
|
|
<pre id="snapshot-json" class="snapshot-json"></pre>
|
|
</details>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|