JFly02
a37a3c5cbe
Darauf sitzt die erste Web-UI V1 direkt gegen diese API in [index.html](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/web/v1/index.html>), [app.js](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/web/v1/app.js>) und [styles.css](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/web/v1/styles.css>). Sie enthält Pattern-/Preset-Auswahl, globale Regler, Gruppenauswahl, Übergänge, Preview, Snapshot-Anzeige und Event-Feed. Die technische Desktop-GUI bleibt bewusst die Engineering-/Diagnoseoberfläche; die kreative Web-UI baut nicht an einer Parallelarchitektur vorbei. Contract-Tests liegen in [contract.rs](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/crates/infinity_host_api/tests/contract.rs>), und die API ist mit Beispiel-Responses in [docs/host_api.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/docs/host_api.md>) dokumentiert. Zusätzlich habe ich [README.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/README.md>), [docs/build_and_deploy.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/docs/build_and_deploy.md>) und [docs/architecture.md](</C:/Users/janni/Documents/RFP/Infinity_Vis _Rust/docs/architecture.md>) auf den neuen Stand gebracht. Verifiziert habe ich: - `cargo check -p infinity_host_api` - `cargo test -p infinity_host_api` - `cargo test -q` Nicht verifiziert habe ich eine separate JS-Syntaxprüfung mit `node --check`, weil `node` in dieser Umgebung nicht installiert ist.
122 lines
4.1 KiB
HTML
122 lines
4.1 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 Creative Console</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
|
|
</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">
|
|
<span>Pattern</span>
|
|
<select id="pattern-select"></select>
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>Transition</span>
|
|
<input id="transition-slider" type="range" min="0" max="3000" step="10" />
|
|
<strong id="transition-value">0 ms</strong>
|
|
</label>
|
|
|
|
<label class="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 class="field">
|
|
<span>Blackout</span>
|
|
<button id="blackout-button" class="danger-button" type="button">
|
|
Enable blackout
|
|
</button>
|
|
</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>Groups</h3>
|
|
<p>Focus looks on a subset while keeping the core scene model shared.</p>
|
|
</div>
|
|
<div id="group-list" class="pill-row"></div>
|
|
</div>
|
|
|
|
<div class="subsection">
|
|
<div class="subsection-heading">
|
|
<h3>Scene Parameters</h3>
|
|
<p>Rendered from the active scene schema, not hardcoded per frontend.</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 id="event-list" class="event-list"></div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|