<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cthuloid Lights</title>
<link rel="stylesheet" href="/app.css">
</head>
<body>
<header class="bar">
<h1>Cthuloid Lights</h1>
<div class="bar-actions">
<label class="me" title="Shown to others while you hold a slot">You <input id="my-name" type="text" maxlength="32" spellcheck="false"></label>
<button id="connect" class="connect" type="button">CONNECT</button>
<button id="blackout-all" class="danger" type="button" title="Stop fades and drive every unit to zero, connected or not">Blackout all</button>
</div>
</header>
<p id="banner" class="banner">Not connected: nothing is sent to the lights.</p>
<p id="discovery" class="notice" hidden></p>
<p id="offline" class="notice" hidden>Lost contact with the server. Retrying…</p>
<main>
<section id="units" aria-label="Light units"></section>
<p id="no-units" class="muted" hidden>No units found yet. Units with current firmware appear here on their own; older ones can be added below.</p>
<section class="panel" aria-labelledby="looks-h">
<h2 id="looks-h">Looks</h2>
<form id="save-look" class="row">
<input id="look-name" placeholder="Name this look" maxlength="64" required>
<button type="submit">Save current</button>
</form>
<label class="row">Recall fade <input id="recall-fade" type="number" min="0" max="600" step="0.1" value="1"> s</label>
<ul id="looks" class="looks"></ul>
</section>
<section class="panel" aria-labelledby="add-h">
<h2 id="add-h">Add a unit by address</h2>
<form id="add-unit" class="row">
<input id="add-host" placeholder="showlight01.local or 192.168.50.x" required>
<button type="submit">Add</button>
</form>
<p class="muted small">For units on firmware that does not announce itself. Connecting briefly takes over a unit on old single-client firmware.</p>
<p id="add-result" class="small"></p>
</section>
</main>
<template id="unit-tpl">
<article class="unit">
<div class="unit-head">
<label class="include" title="Include this unit: drive it while connected"><input type="checkbox" class="enabled"> <span class="label"></span></label>
<span class="status"></span>
</div>
<p class="where muted small"></p>
<p class="note small" hidden></p>
<div class="slots"></div>
<div class="unit-actions row">
<label>Fade <input type="number" class="fade" min="0" max="10000" step="10"> ms</label>
<button type="button" class="adopt" title="Set the controls to what the unit is actually showing">Match lights</button>
<button type="button" class="danger blackout">Blackout</button>
</div>
<details class="firmware">
<summary>Firmware settings</summary>
<div class="grid">
<label>Name <input type="text" class="label-in" maxlength="64"></label>
<label>Red max <input type="number" class="redmax" min="0" max="45000" step="500"></label>
<label>Gamma B <input type="number" class="gb" min="0.5" max="5" step="0.05"></label>
<label>Gamma G <input type="number" class="gg" min="0.5" max="5" step="0.05"></label>
<label>Gamma R <input type="number" class="gr" min="0.5" max="5" step="0.05"></label>
<label>PWM Hz <input type="number" class="freq" min="1" max="40000" step="100"></label>
</div>
<button type="button" class="push-settings">Send gamma & frequency</button>
<p class="muted small">Red max caps the red diodes, which take less drive than green and blue. The firmware rejects anything above 45000. PWM above ~1.2 kHz dims this hardware.</p>
</details>
</article>
</template>
<template id="slot-tpl">
<div class="slot">
<div class="slot-row">
<span class="slot-n"></span>
<button type="button" class="swatch" title="Edit colour" aria-label="Edit colour"></button>
<input type="range" class="level" min="0" max="100" step="1" aria-label="Brightness">
<span class="pct small"></span>
<span class="actual" title="What the unit is actually showing"></span>
</div>
<div class="slot-holder small" hidden></div>
<div class="slot-picker" hidden></div>
</div>
</template>
<script type="module" src="/app.js"></script>
</body>
</html>