Arduino AsyncWebServer Values von Website beziehen?
Hallo, ich bin momentan ein wenig am rumspielen' mit dem ESP32 Mikrocontroller. Ich möchte eine LED Leiste mit Hilfe einer Webseite steuern. Die Webseite ist bereits fertig und die Steuerung für die LED Bar ebenfalls. Nun möchte ich ein
<input type="range">
verwenden um auf der Webseite die Helligkeit der LED Leiste zu regeln.
Frage ist: Wie kann ich mit dem ESP32 Development Board die Value der Range abfragen und weiter in der Arduino IDE verwenden?
Hinweis: Ich habe den gesamten Website Code in einer
const char index_html[] PROGMEM = R"rawliteral( HTML CODE )rawliteral";
in der Arduino IDE gespeichert.
Danke im Vorraus!
1 Antwort
Du verwendest den ESPAsyncWebserver? Hast du dir zu diesem einmal das Beispiel sowie die Dokumentation durchgelesen?
In der index.htm wird eine Eingabe aus einem Textfeld ausgelesen. So wie bei dem Beispiel müsstest du dein input-Element zunächst mit einer ID ausstatten, um darauf zugreifen zu können.
Mit einem Event Listener kannst du so auf Veränderungen des Feldes lauschen und diese dann via WebSocket abschicken:
var slider = ge("yourID");
slider.addEventListener("change", function(e) {
ws.send(slider.value);
});
Der Server dürfte diese Anfrage dann empfangen können.
Es handelt sich ja um einen WebSocket-Server. Beispiele für das Empfangen von Daten findest du hier:
Wenn du die Daten an dieser Stelle eindeutig identifizieren möchtest, hänge bspw. die ID des Elements in der Nachricht vorn mit an. Wenn sie auf Serverseite ausgelesen wird, weißt du, um welche Information es sich handelt.
Alternativ könntest du die Daten auch einfach via POST/GET verschicken. Das dürfte auf Clientseite so in etwa aussehen:
<form method="post">
<input name="slider" type="range">
</form>
<script>
var form = document.forms[0];
form.slider.addEventListener("change", e => form.submit());
</script>
Der (simple) Server, der im GitHub-Beispielprojekt zu finden ist, liest POST-Daten aus, kann von dir also als Vorlage verwendet werden.
Den Event Listener hatte ich auch bereits erstellt, jedoch wusste ich nichts von dem AsyncWebSocketPlugin, also schon mal Danke dafür!
Wenn ich nun auf dem Webserver via JavaScript einen Wert gesendet habe, wie empfängt dann der ESP32 diesen? Empfängt er ihn automatisch und wenn, wie kann ich diesen deklarieren/zuordnen/benennen?