mirror of
https://github.com/HendrikRauh/dmx-interface.git
synced 2025-05-18 21:55:34 +00:00
296 lines
13 KiB
HTML
296 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Konfiguration</title>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
<script type="module" src="/input-visibility.js" defer></script>
|
|
<script type="module" src="/loading-screen.js" defer></script>
|
|
<script type="module" src="/load-data.js" defer></script>
|
|
<script type="module" src="/networks.js" defer></script>
|
|
<script type="module" src="/submit.js" defer></script>
|
|
<script type="module" src="/reset.js" defer></script>
|
|
<script type="module" src="/range-input.js" defer></script>
|
|
<script type="module" src="/status.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="loading-screen">
|
|
<div class="spinner-container">
|
|
<!-- h2 is filled dynamically -->
|
|
<h2></h2>
|
|
<div class="spinner"></div>
|
|
<button
|
|
class="reload"
|
|
type="button"
|
|
onclick="window.location.reload()"
|
|
>
|
|
Seite neu laden
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content hidden">
|
|
<div class="status">
|
|
<!-- placeholder for wifi icon -->
|
|
<img class="connection-icon" src="" alt="" />
|
|
<span>Temp.: <span class="cpu-temp"></span> °C</span>
|
|
<span>Heap: <span class="heap-percentage"></span> %</span>
|
|
<span>PSRAM: <span class="psram-percentage"></span> %</span>
|
|
<span>Uptime: <span class="uptime"></span></span>
|
|
|
|
<button type="button" class="expand-status">Mehr</button>
|
|
</div>
|
|
|
|
<dialog class="dialog-status">
|
|
<h2 class="model"></h2>
|
|
|
|
<div class="dialog-status-content">
|
|
<div class="card">
|
|
<span>Signalstärke</span>
|
|
<!-- placeholder for wifi icon -->
|
|
<img class="connection-icon" src="" alt="" />
|
|
<span><span class="rssi"></span> dBm</span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>Uptime</span>
|
|
<span class="uptime"></span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>CPU-Temperatur</span>
|
|
<span><span class="cpu-temp"></span> °C</span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>CPU-Taktfrequenz</span>
|
|
<span><span class="cpu-freq"></span> MHz</span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>CPU Cycle Count</span>
|
|
<span class="cpu-cycle-count"></span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>Heap</span>
|
|
<span><span class="heap-percentage"></span> %</span>
|
|
<span
|
|
><span class="heap-used"></span> /
|
|
<span class="heap-total"></span
|
|
></span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>PSRAM</span>
|
|
<span
|
|
><span class="psram-percentage"></span> %</span
|
|
>
|
|
<span
|
|
><span class="psram-used"></span> /
|
|
<span class="psram-total"></span
|
|
></span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>MAC-Adresse</span>
|
|
<span class="mac"></span>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<span>SDK-Version</span>
|
|
<span class="sdk-version"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="dialog">
|
|
<button type="submit">Schließen</button>
|
|
</form>
|
|
</dialog>
|
|
|
|
<form class="config">
|
|
<h1>Konfiguration</h1>
|
|
<fieldset>
|
|
<legend>Verbindung</legend>
|
|
<label>
|
|
<span>IP-Zuweisung:</span>
|
|
<select
|
|
name="ip-method"
|
|
id="input-ip-method"
|
|
title="IP-"
|
|
required
|
|
>
|
|
<option value="0">Statisch</option>
|
|
<option value="1">DHCP</option>
|
|
</select>
|
|
</label>
|
|
<div data-field="input-ip-method" data-values="0">
|
|
<label>
|
|
<span>IP-Adresse:</span>
|
|
<input
|
|
type="text"
|
|
name="ip"
|
|
id="input-ip"
|
|
placeholder="IP-Adresse"
|
|
required
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>Subnetzmaske:</span>
|
|
<input
|
|
type="text"
|
|
name="subnet"
|
|
id="input-subnet"
|
|
placeholder="Subnetzmaske"
|
|
required
|
|
/>
|
|
</label>
|
|
<label>
|
|
<span>Gateway:</span>
|
|
<input
|
|
type="text"
|
|
name="gateway"
|
|
id="input-gateway"
|
|
placeholder="Gateway"
|
|
required
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label>
|
|
<span>Verbindungsmethode:</span>
|
|
<select
|
|
name="connection"
|
|
id="input-connection"
|
|
title="Verbindung"
|
|
required
|
|
>
|
|
<option value="0">WiFi-Station</option>
|
|
<option value="1">WiFi-AccessPoint</option>
|
|
<option value="2">Ethernet</option>
|
|
</select>
|
|
</label>
|
|
<div data-field="input-connection" data-values="1">
|
|
<label>
|
|
<span>SSID:</span>
|
|
<input
|
|
type="text"
|
|
name="ssid"
|
|
id="input-ssid"
|
|
placeholder="SSID"
|
|
required
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div data-field="input-connection" data-values="0">
|
|
<label>
|
|
<span>Netzwerk:</span>
|
|
<select
|
|
name="ssid"
|
|
id="select-network"
|
|
title="Netzwerk"
|
|
required
|
|
></select>
|
|
<button
|
|
type="button"
|
|
id="refresh-networks"
|
|
class="icon-button"
|
|
>
|
|
<img
|
|
src="/icons/refresh.svg"
|
|
alt="Neu laden"
|
|
/>
|
|
</button>
|
|
</label>
|
|
</div>
|
|
<div data-field="input-connection" data-values="0|1">
|
|
<label>
|
|
<span>Password:</span>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="input-password"
|
|
placeholder="Passwort"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Input/Output 1</legend>
|
|
<label class="switch">
|
|
<span>Output</span>
|
|
<input
|
|
type="checkbox"
|
|
name="direction-1"
|
|
id="input-direction-1"
|
|
data-value-not-checked="0"
|
|
data-value-checked="1"
|
|
/>
|
|
<span class="slider"></span>
|
|
<span>Input</span>
|
|
</label>
|
|
<label>
|
|
ArtNet-Universe:
|
|
<input
|
|
type="number"
|
|
name="universe-1"
|
|
id="universe-1"
|
|
placeholder="Universe"
|
|
min="0"
|
|
max="15"
|
|
/>
|
|
</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Input/Output 2</legend>
|
|
<label class="switch">
|
|
<span>Output</span>
|
|
<input
|
|
type="checkbox"
|
|
name="direction-2"
|
|
id="input-direction-2"
|
|
data-value-not-checked="0"
|
|
data-value-checked="1"
|
|
/>
|
|
<span class="slider"></span>
|
|
<span>Input</span>
|
|
</label>
|
|
<label>
|
|
ArtNet-Universe:
|
|
<input
|
|
type="number"
|
|
name="universe-2"
|
|
id="universe-2"
|
|
placeholder="Universe"
|
|
min="0"
|
|
max="15"
|
|
/>
|
|
</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Sonstiges</legend>
|
|
<label>
|
|
LED-Helligkeit
|
|
<div>
|
|
<input
|
|
type="range"
|
|
name="led-brightness"
|
|
id="led-brightness"
|
|
min="0"
|
|
max="255"
|
|
class="range"
|
|
/>
|
|
<span class="range-value"></span>
|
|
</div>
|
|
</label>
|
|
</fieldset>
|
|
<div class="buttons">
|
|
<button type="reset">Zurücksetzen</button>
|
|
<button type="submit">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|