116 lines
4.7 KiB
HTML
116 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LED Controller Config</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="icon" href="data/favicon.ico">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>✈️ LED Controller</h1>
|
|
<p class="subtitle">Model Aircraft LED Configuration via Web-BLE</p>
|
|
</header>
|
|
|
|
<div class="card">
|
|
<h2>🔗 Connection</h2>
|
|
<div class="connection-status">
|
|
<span id="status-indicator" class="status-indicator disconnected"></span>
|
|
<span id="connection-status">Disconnected</span>
|
|
</div>
|
|
<button id="connect-btn" class="btn btn-primary">Connect via BLE</button>
|
|
</div>
|
|
|
|
<div id="config-section" class="card hidden">
|
|
<h2>⚙️ Configuration</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="led-pin-a">LED Strip A GPIO Pin</label>
|
|
<input type="number" id="led-pin-a" min="-1" max="48" value="-1">
|
|
<small>-1 = Disabled</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="led-pin-b">LED Strip B GPIO Pin</label>
|
|
<input type="number" id="led-pin-b" min="-1" max="48" value="-1">
|
|
<small>-1 = Disabled</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="pwm-pin">PWM Input GPIO Pin</label>
|
|
<input type="number" id="pwm-pin" min="-1" max="48" value="-1">
|
|
<small>-1 = Disabled</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="ble-timeout">BLE Auto-Off Timeout</label>
|
|
<select id="ble-timeout">
|
|
<option value="0">Never</option>
|
|
<option value="60">1 Minute</option>
|
|
<option value="300">5 Minutes</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button id="save-config-btn" class="btn btn-success">💾 Save Configuration</button>
|
|
</div>
|
|
|
|
<div id="control-section" class="card hidden">
|
|
<h2>🎮 Control</h2>
|
|
|
|
<div class="current-mode">
|
|
<strong>Current Mode:</strong> <span id="current-mode">Black</span>
|
|
</div>
|
|
|
|
<div class="button-grid">
|
|
<button class="btn btn-mode" data-mode="0">⚫ Black</button>
|
|
<button class="btn btn-mode" data-mode="1">🔴 Red</button>
|
|
<button class="btn btn-mode" data-mode="2">🔵 Blue</button>
|
|
<button class="btn btn-mode" data-mode="3">🟢 Green</button>
|
|
<button class="btn btn-mode" data-mode="4">⚪ White</button>
|
|
<button class="btn btn-mode" data-mode="5">🌈 Rainbow</button>
|
|
<button class="btn btn-mode" data-mode="6">✨ Rainbow Glitter</button>
|
|
<button class="btn btn-mode" data-mode="7">🎊 Confetti</button>
|
|
<button class="btn btn-mode" data-mode="8">🌀 Sinelon</button>
|
|
<button class="btn btn-mode" data-mode="9">💓 BPM Pulse</button>
|
|
<button class="btn btn-mode" data-mode="10">🛩️ Navigation</button>
|
|
<button class="btn btn-mode" data-mode="11">🏃 Chase (Red)</button>
|
|
<button class="btn btn-mode" data-mode="12">🏃 Chase (RGB)</button>
|
|
<button class="btn btn-mode" data-mode="13">🎲 Random</button>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<button id="pwm-emulate-btn" class="btn btn-secondary">⏭️ Next Mode (PWM Emulation)</button>
|
|
</div>
|
|
|
|
<div id="ota-section" class="card hidden">
|
|
<h2>🔄 Firmware Update</h2>
|
|
<div class="warning">
|
|
⚠️ Warning: Firmware update will reset all settings!
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="firmware-file">Select Firmware File (.bin)</label>
|
|
<input type="file" id="firmware-file" accept=".bin">
|
|
</div>
|
|
|
|
<div id="ota-progress" class="progress-container hidden">
|
|
<div class="progress-bar" id="ota-progress-bar"></div>
|
|
<div class="progress-text" id="ota-progress-text">0%</div>
|
|
</div>
|
|
|
|
<button id="ota-upload-btn" class="btn btn-warning" disabled>📤 Upload Firmware</button>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>ESP32 LED Controller © 2026</p>
|
|
<p><small>Supports ESP32 DevKitC & ESP32-C3 MINI</small></p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app/app.js"></script>
|
|
</body>
|
|
</html>
|