Stabilize control surface and external bridge v1
This commit is contained in:
@@ -3,219 +3,276 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Infinity Vis Creative Console</title>
|
||||
<title>Infinity Vis Control</title>
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-shell">
|
||||
<header class="hero">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Infinity Vis / Creative Surface</p>
|
||||
<h1 id="project-name">Loading project...</h1>
|
||||
<p id="topology-label" class="hero-subtitle">
|
||||
Shared host API bootstrap in progress.
|
||||
</p>
|
||||
</div>
|
||||
<div class="hero-status">
|
||||
<div class="status-card">
|
||||
<span class="status-label">API stream</span>
|
||||
<span id="connection-pill" class="pill pill-offline">connecting</span>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<span class="status-label">Preview refresh</span>
|
||||
<span id="preview-updated">waiting for data</span>
|
||||
</div>
|
||||
<button id="refresh-button" class="ghost-button" type="button">
|
||||
Refresh snapshot
|
||||
<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>
|
||||
|
||||
<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="layout">
|
||||
<section class="panel controls-panel">
|
||||
<div class="section-heading">
|
||||
<h2>Global Look</h2>
|
||||
<p>Pattern, preset, group and transition control against the shared host API.</p>
|
||||
</div>
|
||||
|
||||
<div class="control-grid">
|
||||
<label class="field">
|
||||
<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>
|
||||
|
||||
<label class="field">
|
||||
<span>Transition Duration</span>
|
||||
<input id="transition-slider" type="range" min="0" max="3000" step="10" />
|
||||
<strong id="transition-value">0 ms</strong>
|
||||
</label>
|
||||
<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>
|
||||
|
||||
<label class="field">
|
||||
<span>Transition Style</span>
|
||||
<select id="transition-style-select">
|
||||
<option value="snap">Snap</option>
|
||||
<option value="crossfade">Crossfade</option>
|
||||
<option value="chase">Chase</option>
|
||||
</select>
|
||||
</label>
|
||||
<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>
|
||||
|
||||
<label class="field">
|
||||
<section class="dock-section">
|
||||
<div class="dock-header">
|
||||
<h2>Brightness</h2>
|
||||
<p>Global intensity plus pattern-level brightness controls.</p>
|
||||
</div>
|
||||
<label class="control-field">
|
||||
<span>Master Brightness</span>
|
||||
<input id="brightness-slider" type="range" min="0" max="1" step="0.01" />
|
||||
<strong id="brightness-value">0%</strong>
|
||||
</label>
|
||||
<div id="brightness-params" class="parameter-stack"></div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<div class="field">
|
||||
<span>Blackout</span>
|
||||
<button id="blackout-button" class="danger-button" type="button">
|
||||
Enable blackout
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="subsection">
|
||||
<div class="subsection-heading">
|
||||
<h3>Pending Transition</h3>
|
||||
<p>Stage primitives locally and commit them with one explicit trigger.</p>
|
||||
<section class="dock-section">
|
||||
<div class="dock-header">
|
||||
<h2>Presets</h2>
|
||||
<p>Quick recall for curated looks plus compact save controls.</p>
|
||||
</div>
|
||||
<div class="session-panel">
|
||||
<div class="session-status-row">
|
||||
<div class="status-card">
|
||||
<span class="status-label">Control mode</span>
|
||||
<span id="control-mode-pill" class="pill pill-online">stateful</span>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<span class="status-label">Commit state</span>
|
||||
<span id="pending-commit-pill" class="pill pill-offline">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="session-actions">
|
||||
<button id="trigger-transition-button" class="ghost-button" type="button">
|
||||
Trigger Transition
|
||||
</button>
|
||||
<button id="clear-staged-button" class="ghost-button" type="button">
|
||||
Clear Staged
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div class="subsection-heading">
|
||||
<h3>Presets</h3>
|
||||
<p>Recall look snapshots without leaving the creative console.</p>
|
||||
</div>
|
||||
<div id="preset-list" class="pill-row"></div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div class="subsection-heading">
|
||||
<h3>Preset Capture</h3>
|
||||
<p>Store or overwrite the current scene as a reusable preset through the same API.</p>
|
||||
</div>
|
||||
<div class="capture-grid">
|
||||
<label class="field">
|
||||
<span>Preset ID</span>
|
||||
<input id="preset-id-input" type="text" placeholder="e.g. sunset_chase" />
|
||||
</label>
|
||||
<label class="field inline-checkbox">
|
||||
<span>Overwrite Existing</span>
|
||||
<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>
|
||||
<button id="save-preset-button" class="ghost-button" type="button">
|
||||
Save Current Scene As Preset
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="subsection">
|
||||
<div class="subsection-heading">
|
||||
<h3>Groups</h3>
|
||||
<p>Focus looks on a subset while keeping the core scene model shared.</p>
|
||||
<section class="dock-section">
|
||||
<div class="dock-header">
|
||||
<h2>Selected Tile</h2>
|
||||
<p>Stable tile focus for operator actions and diagnostics.</p>
|
||||
</div>
|
||||
<input
|
||||
id="group-filter-input"
|
||||
class="filter-input"
|
||||
type="text"
|
||||
placeholder="Filter groups by id or tag"
|
||||
/>
|
||||
<div id="group-list" class="pill-row"></div>
|
||||
</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>
|
||||
|
||||
<div class="subsection">
|
||||
<div class="subsection-heading">
|
||||
<h3>Creative Snapshots</h3>
|
||||
<p>Capture exploratory variants without replacing curated presets.</p>
|
||||
<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="capture-grid">
|
||||
<label class="field">
|
||||
<span>Snapshot ID</span>
|
||||
<input id="snapshot-id-input" type="text" placeholder="e.g. variant_afterglow" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Label</span>
|
||||
<input id="snapshot-label-input" type="text" placeholder="Readable label" />
|
||||
</label>
|
||||
<label class="field inline-checkbox">
|
||||
<span>Overwrite Existing</span>
|
||||
<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="ghost-button" type="button">
|
||||
Save Creative Snapshot
|
||||
<button id="save-snapshot-button" class="toolbar-button toolbar-button-ghost" type="button">
|
||||
Save Snapshot
|
||||
</button>
|
||||
</div>
|
||||
<div id="snapshot-list" class="snapshot-list"></div>
|
||||
</div>
|
||||
<div id="snapshot-list" class="list-stack"></div>
|
||||
</section>
|
||||
|
||||
<div class="subsection">
|
||||
<div class="subsection-heading">
|
||||
<h3>Scene Parameters</h3>
|
||||
<p>Rendered from the active scene schema, not hardcoded per frontend.</p>
|
||||
<section class="dock-section">
|
||||
<div class="dock-header">
|
||||
<h2>View & Output</h2>
|
||||
<p>Read-only state and output context for live operation.</p>
|
||||
</div>
|
||||
<div id="scene-params" class="parameter-grid"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel preview-panel">
|
||||
<div class="section-heading">
|
||||
<h2>Preview</h2>
|
||||
<p>Live panel previews from the host snapshot and stream feed.</p>
|
||||
</div>
|
||||
<div id="preview-grid" class="preview-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel summary-panel">
|
||||
<div class="section-heading">
|
||||
<h2>Snapshot</h2>
|
||||
<p>Operator-friendly scene state with a raw API view underneath.</p>
|
||||
</div>
|
||||
<div id="summary-cards" class="summary-cards"></div>
|
||||
<pre id="snapshot-json" class="snapshot-json"></pre>
|
||||
</section>
|
||||
|
||||
<section class="panel event-panel">
|
||||
<div class="section-heading">
|
||||
<h2>Event Stream</h2>
|
||||
<p>Recent notices from the websocket feed.</p>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user