|
|
|
@@ -149,7 +149,34 @@ const String getSetupPage(String macAddress) { |
|
|
|
.toggle-eye:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bar_white { |
|
|
|
background: white; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bar_red { |
|
|
|
background: red; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bar_green { |
|
|
|
background: green; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bar_blue { |
|
|
|
background: blue; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
@keyframes fadeIn { |
|
|
|
from {opacity: 0; transform: translateY(10px);} |
|
|
|
to {opacity: 1; transform: translateY(0);} |
|
|
|
@@ -160,22 +187,29 @@ const String getSetupPage(String macAddress) { |
|
|
|
<body> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div style="display: flex"> |
|
|
|
<div class="bar_green"></div> |
|
|
|
<div class="bar_white"></div> |
|
|
|
<div class="bar_red"></div> |
|
|
|
<div class="bar_blue"></div> |
|
|
|
</div> |
|
|
|
<h2>Wemos LEDLamp Setup</h2> |
|
|
|
<div class="mac">Device: )rawliteral" |
|
|
|
<div class="mac">Device: )rawliteral" |
|
|
|
+ macAddress |
|
|
|
+ R"rawliteral(</div> |
|
|
|
|
|
|
|
<form action="/save" method="POST"> |
|
|
|
<input name="ssid" placeholder="WLAN Name (SSID)"> |
|
|
|
|
|
|
|
<div class="pw-wrapper"> |
|
|
|
<input id="pass" name="pass" type="password" placeholder="Passwort"> |
|
|
|
<span class="toggle-eye" onclick="togglePassword()">👁</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<button type="submit">Speichern & Verbinden</button> |
|
|
|
</form> |
|
|
|
<div class="info">Verbinde den LEDLamp Wemos mit einem WLAN Netzwerk</div> |
|
|
|
<form action="/save" method="POST"> |
|
|
|
<input name="ssid" placeholder="WLAN Name (SSID)"> |
|
|
|
|
|
|
|
<div class="pw-wrapper"> |
|
|
|
<input id="pass" name="pass" type="password" placeholder="Passwort"> |
|
|
|
<span class="toggle-eye" onclick="togglePassword()">👁</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<button type="submit">Speichern & Verbinden</button> |
|
|
|
</form> |
|
|
|
<div class="info">Verbinde den LEDLamp Wemos mit einem WLAN Netzwerk</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</body> |
|
|
|
</html> |
|
|
|
@@ -191,8 +225,8 @@ const String getSTAControlPage(String macAddress) { |
|
|
|
<!DOCTYPE html> |
|
|
|
|
|
|
|
<html> |
|
|
|
|
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
|
<title>Wemos LEDLamp Control</title> |
|
|
|
|
|
|
|
@@ -231,6 +265,7 @@ const String getSTAControlPage(String macAddress) { |
|
|
|
.info { |
|
|
|
font-size: 12px; |
|
|
|
opacity: 0.8; |
|
|
|
margin-top: 8px; |
|
|
|
margin-bottom: 15px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
@@ -253,7 +288,6 @@ const String getSTAControlPage(String macAddress) { |
|
|
|
button { |
|
|
|
width: 100%; |
|
|
|
padding: 12px; |
|
|
|
margin-top: 10px; |
|
|
|
border: none; |
|
|
|
border-radius: 10px; |
|
|
|
background: #00c6ff; |
|
|
|
@@ -265,8 +299,15 @@ const String getSTAControlPage(String macAddress) { |
|
|
|
|
|
|
|
button:hover { |
|
|
|
background: #0072ff; |
|
|
|
transform: translateY(-2px); |
|
|
|
transform: translateY(-1px) translateX(1px); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-row { |
|
|
|
display: flex; |
|
|
|
gap: 10px; |
|
|
|
align-items: center; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.mac { |
|
|
|
font-size: 11px; |
|
|
|
@@ -275,7 +316,35 @@ const String getSTAControlPage(String macAddress) { |
|
|
|
opacity: 0.7; |
|
|
|
word-break: break-all; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bar_white { |
|
|
|
background: white; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bar_red { |
|
|
|
background: red; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bar_green { |
|
|
|
background: green; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.bar_blue { |
|
|
|
background: blue; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
|
from {opacity: 0; transform: translateY(10px);} |
|
|
|
to {opacity: 1; transform: translateY(0);} |
|
|
|
@@ -286,27 +355,54 @@ const String getSTAControlPage(String macAddress) { |
|
|
|
<body> |
|
|
|
|
|
|
|
<div class="card"> |
|
|
|
<div style="display: flex"> |
|
|
|
<div class="bar_green"></div> |
|
|
|
<div class="bar_white"></div> |
|
|
|
<div class="bar_red"></div> |
|
|
|
<div class="bar_blue"></div> |
|
|
|
</div> |
|
|
|
<h2>Wemos LEDLamp Control</h2> |
|
|
|
<div class="mac">Device: )rawliteral" |
|
|
|
<div class="mac">Device: )rawliteral" |
|
|
|
+ macAddress |
|
|
|
+ R"rawliteral(</div> |
|
|
|
|
|
|
|
<div class="btn-row"> |
|
|
|
<button type="button" onclick="ledOn()">LED EIN</button> |
|
|
|
<button type="button" onclick="ledOff()">LED AUS</button> |
|
|
|
|
|
|
|
<div class="btn-row"> |
|
|
|
<button type="button" onclick="ledOn()">LED EIN</button> |
|
|
|
<div id="led_status">⚫</div> |
|
|
|
<button type="button" onclick="ledOff()">LED AUS</button> |
|
|
|
</div> |
|
|
|
<div class="btn-row"> |
|
|
|
<button type="button" onclick="resetWifiCfg()">Wifi-Konfiguration löschen</button> |
|
|
|
</div> |
|
|
|
<div id="reset_status" class="info">-</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
let ws; |
|
|
|
|
|
|
|
function connectWS() { |
|
|
|
ws = new WebSocket("ws://" + location.hostname + ":81/"); |
|
|
|
|
|
|
|
ws.onopen = () => { |
|
|
|
console.log("WebSocket connected"); |
|
|
|
}; |
|
|
|
|
|
|
|
ws.onmessage = (e) => { |
|
|
|
console.log("ESP:", e.data); |
|
|
|
|
|
|
|
if (e.data === "LED ON") { |
|
|
|
document.getElementById("led_status").innerHTML = "🟢"; |
|
|
|
} |
|
|
|
|
|
|
|
if (e.data === "LED OFF") { |
|
|
|
document.getElementById("led_status").innerHTML = "⚫"; |
|
|
|
} |
|
|
|
|
|
|
|
if (e.data === "Wifi_Reset_Success") { |
|
|
|
document.getElementById("reset_status").innerHTML = "Die Wifi-Konfiguration wurde erfolgreich zurückgesetzt."; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
ws.onclose = () => { |
|
|
|
console.log("WS disconnected → reconnect"); |
|
|
|
setTimeout(connectWS, 1000); |
|
|
|
@@ -326,6 +422,12 @@ const String getSTAControlPage(String macAddress) { |
|
|
|
ws.send("/ledOff"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function resetWifiCfg() { |
|
|
|
if (ws && ws.readyState === 1) { |
|
|
|
ws.send("/resetWifiCfg"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|