207 lines
7.6 KiB
HTML
207 lines
7.6 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 Mapping Settings</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="technical-shell">
|
|
<header class="topbar topbar-technical">
|
|
<div class="topbar-brand">
|
|
<div class="brand-title">Infinity Vis Mapping Settings</div>
|
|
<div id="technical-project-name" class="brand-project">Loading technical surface...</div>
|
|
</div>
|
|
|
|
<div class="topbar-strip">
|
|
<div class="toolbar-group">
|
|
<span class="toolbar-label">Backend</span>
|
|
<span id="technical-backend-pill" class="status-chip status-chip-warning">loading</span>
|
|
</div>
|
|
<div class="toolbar-group">
|
|
<span class="toolbar-label">Output</span>
|
|
<span id="technical-output-pill" class="status-chip status-chip-warning">loading</span>
|
|
</div>
|
|
<div class="toolbar-group">
|
|
<span class="toolbar-label">Nodes</span>
|
|
<span id="technical-nodes-pill" class="status-chip status-chip-warning">0/0 online</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="topbar-actions">
|
|
<a href="/" class="toolbar-button toolbar-link">Creative Surface</a>
|
|
<button id="technical-refresh-button" class="toolbar-button toolbar-button-ghost" type="button">
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="technical-workspace">
|
|
<section class="technical-stack">
|
|
<section class="dock-section technical-section">
|
|
<div class="dock-header">
|
|
<div>
|
|
<h2>Backend & Output</h2>
|
|
<p>Preview Only and DDP (WLED) stay explicit and honest.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="technical-summary-grid" class="technical-summary-grid"></div>
|
|
|
|
<div class="technical-form-grid">
|
|
<label class="technical-field">
|
|
<span class="toolbar-label">Backend Mode</span>
|
|
<select id="backend-mode-select">
|
|
<option value="preview_only">Preview Only</option>
|
|
<option value="ddp_wled">DDP (WLED)</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="technical-field">
|
|
<span class="toolbar-label">Output FPS</span>
|
|
<input id="output-fps-input" type="number" min="1" max="240" step="1" />
|
|
</label>
|
|
|
|
<label class="technical-checkbox technical-field-wide">
|
|
<input id="output-enabled-input" type="checkbox" />
|
|
<span>Output Enabled</span>
|
|
</label>
|
|
|
|
<div class="technical-field technical-field-wide">
|
|
<span class="toolbar-label">Live Status</span>
|
|
<div id="technical-live-status" class="status-banner">Waiting for state...</div>
|
|
</div>
|
|
|
|
<div class="technical-field technical-field-wide">
|
|
<span class="toolbar-label">Semantics</span>
|
|
<div id="technical-backend-semantics" class="technical-note">
|
|
Preview Only means no live output. DDP (WLED) is armed only when explicitly enabled.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="save-output-settings-button" class="toolbar-button toolbar-button-primary" type="button">
|
|
Apply Output Settings
|
|
</button>
|
|
</div>
|
|
<div id="technical-feedback-banner" class="status-banner hidden"></div>
|
|
</section>
|
|
|
|
<section class="dock-section technical-section">
|
|
<div class="dock-header">
|
|
<div>
|
|
<h2>Node / IP Discovery</h2>
|
|
<p>Scan subnet ranges and assign discovered IPs explicitly to node slots.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="technical-form-grid">
|
|
<label class="technical-field">
|
|
<span class="toolbar-label">Subnet</span>
|
|
<input id="discovery-subnet-input" type="text" value="192.168.40.0/24" />
|
|
</label>
|
|
<div class="technical-field">
|
|
<span class="toolbar-label">Discovery</span>
|
|
<button id="discovery-scan-button" class="toolbar-button toolbar-button-primary" type="button">
|
|
Discover / Scan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="discovery-summary" class="technical-note">
|
|
No scan executed yet.
|
|
</div>
|
|
|
|
<div class="technical-table-wrap">
|
|
<table class="technical-table technical-table-dense">
|
|
<thead>
|
|
<tr>
|
|
<th>IP</th>
|
|
<th>Reachable</th>
|
|
<th>Type</th>
|
|
<th>Hostname / mDNS</th>
|
|
<th>Assign to Node Slot</th>
|
|
<th>Apply</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="discovery-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="dock-section technical-section">
|
|
<div class="dock-header">
|
|
<div>
|
|
<h2>Node Targets</h2>
|
|
<p>Reserved IPs and honest connection status per node.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="technical-table-wrap">
|
|
<table class="technical-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Node</th>
|
|
<th>Display</th>
|
|
<th>Reserved IP</th>
|
|
<th>Status</th>
|
|
<th>Live Note</th>
|
|
<th>Apply</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="node-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="technical-stack technical-stack-wide">
|
|
<section class="stage-panel technical-section">
|
|
<div class="stage-header">
|
|
<div>
|
|
<h2>Panel Mapping</h2>
|
|
<p>Real output slots with backend-facing routing details.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="technical-table-wrap technical-table-wrap-grow">
|
|
<table class="technical-table technical-table-dense">
|
|
<thead>
|
|
<tr>
|
|
<th>Node</th>
|
|
<th>Panel</th>
|
|
<th>Output</th>
|
|
<th>Driver Kind</th>
|
|
<th>GPIO / Channel</th>
|
|
<th>LEDs</th>
|
|
<th>Direction</th>
|
|
<th>Color</th>
|
|
<th>Enabled</th>
|
|
<th>Validation</th>
|
|
<th>Status</th>
|
|
<th>Apply</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="panel-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="stage-panel technical-section technical-events-panel">
|
|
<div class="stage-header">
|
|
<div>
|
|
<h2>Recent Events</h2>
|
|
<p>Live backend and mapping changes without fake node traffic.</p>
|
|
</div>
|
|
</div>
|
|
<div id="technical-event-list" class="event-list technical-event-list"></div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/technical.js"></script>
|
|
</body>
|
|
</html>
|