// https://projecthub.arduino.cc/cetech11/esp32-web-server-with-slider-54c63f
// angepasst, kompiliert mit Espressif Core 3.1.1
// XIAO ESP32S3
#include <credentials.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
const int ledPin = LED_BUILTIN;
String sliderValue = "0";
// setting PWM properties
const int freq = 5000;
const int resolution = 8;
const char* PARAM_INPUT = "value";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32 PWM Controller</title>
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #2ad713;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #05abf8; cursor: pointer; }
</style>
</head>
<body>
<h2>ESP32 PWM Controller</h2>
<p><span id="textSliderValue">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if (var == "SLIDERVALUE"){
return sliderValue;
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
// configure LED PWM functionalitites
// attach the channel to the GPIO to be controlled
ledcAttach(ledPin, freq, resolution);
ledcWrite(ledPin, sliderValue.toInt());
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
ledcWrite(ledPin, sliderValue.toInt());
}
else {
inputMessage = "No message sent";
}
Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
Wenn ich den html Teil auf LittleFS auslagere, wie muss ich Zeile 90 request->send( ) ändern? Weil das index_html gibt ja nicht mehr im Sketch, liegt im LittleFS.
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", index_html, processor);
});
Wird bei Fips im LittleFS-Tab gezeigt für den "normalen" Webserver.
Warum muss es der Async sein?
Der ist durch die dynamische Speicherverwaltung oft instabil.
Weil das Bsp. den verwendet. Ich dachte der AsyncWebServer hätte Vorteile beim Datenaustausch in beide Richtungen ESP <> Webseite?
Ich weiß jedoch noch nicht worauf du beim Verweis auf den fips Tab hinaus möchtest.
Wenn Deine Startseite anders heißt, als üblich, dann ja.
Ansonsten: Ich kenne den Async nicht, weiß also nicht, was der wie macht.
Die Beispiele sind für den normalen Webserver.
Mal schnell Google befragt:
Hast Du Dir eigentlich schon das Beispiel StaticFile vom AsyncWebserver angeschaut? Da drin wird Deine Frage beantwortet. Es wird etwas anders gemacht.
"mein" Bsp. stammt von der "Rui Santos" Seite. Teilweise ist das leider veraltet, manche Bsp. konnte ich nur mit Mühe überhaupt zum kompilieren bekommen. Da werden Jahre alte Libs verwendet. Nach Recherche was denn nun die aktuellen Libs sind, bin ich auf diese gestoßen, alle von ESP32Async und alle aktuell. ESPAsyncWebServer @ 3.7.0 (ESP32, ESP8266, RP2040) AsyncTCP @ 3.3.5 (ESP32) ESPAsyncTCP @ 2.0.0 (ESP8266)
Tja und nun hängt es an der Auftrennung zwischen Sketch und html. Die Umsetzung sah eigentlich "einfach" aus. Die html Seiten alleine passen soweit im Browser. Nur ohne Bezug zum Sketch wertlos.
Den ESPAsyncWebServer.h muss ich nicht verwenden.
Das staticFile Beispiel kopiert Text in die index.html und die index.html zeigt dann im Browser den Text an. Meinst du der Kopiertrick ist eine saubere Idee? Am Ende bliebe der Aufruf im Sketch vom Bsp. übrig wie das gemacht wird.
Wenn ich es fips konform hinbekomme wäre schön.
Ich muss mir das nochmal alles überlegen.
Danke Euch soweit.
@agmue
Verwendest du den ESPAsyncWebServer schon länger?
Im Dauerlauf Problem festgestellt?
Nö. Das ist eine Lösung, um bei dem Beispiel keine extra html-Datei mit verwalten zu müssen. Die wird halt am Anfang erzeugt.
Mein Vorschlag wäre: Nutze den "normalen" Webserver aus dem Core des ESP32 und die Seite von Fips.
Alle seine Beispiele basieren auf dem Webserver-, Connect- und LittleFS-Tab mit OTA (ist schneller, hat aber kein Serial). Dazu ist im LittleFS-Tab auch gleich der Filemanager fs.html mit dabei, mit dem Du zur Laufzeit problemlos Deine Dateien im LittleFS verwalten kannst.
Die Verbindung zwischen HTML und Server wird über die Fetch-API hergestellt. Dabei werden vom Browser nur die Daten der Felder angefordert / Daten zum Server gesendet. Der statische Teil der Webseite bleibt immer unverändert bzw. wird über Javascript angepasst. Auch dazu gibt es viele Beispiele bei Fips.
Wenn Du erst mal die Beispiele von Fips nimmst, und Dich einarbeitest, lernst Du das nebenbei. Einfach anfangen.
Wenn Du unbedingt beim Async bleiben willst, dann gehe von den aktuellen Beispielen (mein Link- die sind umgezogen) aus. Die sind aber bei Weitem nicht so umfangreich, wie die von Fips. Was Du dazu im Netz findest ist größtenteils veraltet, wie Du schon gemerkt hast.
@agmue
achso. Nicht das ein anderes Missverständnis aufkommt. Funktionierende Bsp. mit Button und Eingabe habe ich. Das Bsp. hier hat einen Slider. Diesen html Teil möchte ich fips konform im LittleFS haben. Kann auch ein anderes Bsp. mit Slider sein mit Trennung zwischen html und Sketch. Das wäre sehr nett.
@Tommy56
Ich nutze doch schon fips als Basis. Das mit den Nebenbei lernen ist nicht so einfach. html ist eine völlig andere Welt. Die Verknüpfung html <> Sketch ist mein Problem. Ich habe übrigens nie gesagt das ich unbedingt Async verwenden möchte/muss.
Wenn alle Stricke reißen sollten, muss ich mir die Button und Slider Bsp. später nochmal anschauen. Vielleicht wird der Slider ja doch ähnlich behandelt wie ein Button und der Wert mit Fetch übertragen. Nur sehen alle Slider Bsp. die ich kenne erstmal vom Aufbau her komplett anders aus.
Wie sagen wir immer: Sag doch mal, worum es letztendlich geht.
Hier ist ein Beispiel mit 4 Slidern auf der Basis von Fips (allerdings für den ESP8266). Das sollte aber durch Austausch der Includes des ESP anpassbar sein (im Zip sind alle Files). Oder durch einfügen in einen ESP32-Webserver mit Connect, OTA, LittleFS.
Letztendlich liefert ein Slider auch nur einen Wert, wie ein Input.
Gruß Tommy
PS: Das letzte Zip ist entscheidend
Edit: Link eingefügt. Danke @agmue
es geht um die Erweiterung vom Bisherigen.
Die Led Spielerei hat noch eine Helligkeitseinstellung für den Maximalwert. Nun war ich am überlegen ob ich noch ein Eingabefeld hinzufüge oder einmal einen Slider ausprobiere.
Danke für das Slider Bsp. Schau ich mir natürlich an.
die adaptive Helligkeitsanpassung ist schon in einer korrigierten Tabelle hinterlegt. Der Slider soll einen Wert zwischen 0% ... 100% vorgeben. Der Rest ist schon alles in meinem Programm hinterlegt. Die Led Spielerei ist in sofern fertig das alles per Terminal steuerbar ist. Möchte ich nur meinem Kollegen nicht zumuten, deswegen möchte ich eine Browserbedienung machen. Jetzt schau ich mir mal dein Programm an ...
dein Programm ist ja praktisch die frei Haus Lieferung. Das muss ich verstehen und adaptieren können. Ich nehme mir paar Tage Zeit. Vielen Dank. Ich melde mich wieder.
