Hallo,
seit ein paar Tagen schwebt mir ein derzeit noch recht difuses Projetk vor bei dem ich ein paar Werte über eine Webseite eingeben müsste und zusätzlich ein paar Buttons habe um was schalten zu können. Also hab ich mich mal (wieder) mit dem Thema HTML beschäftigt.Zusätzlich hatte ich vor einen ESP8266 Wemos mini einzusetzen und als Webserver auf das Beispiel "Hello Server" aufzubauen. Das Beispiel ist ja recht einfach und gut verständlich gehalten. Das was da jetzt bei rausgekommen ist möchte ich Euch gerne vorstellen.
Das Ganze funktioniert ohne Skript, ist eigendlich recht flexiebel und lässt sich sicher einfach ausbauen, so dass man es auch gut als Vorlage nutzen kann. Enthaten sind 2 Buttons die man z.B als Ein/Aus nutzen kann , zwei Input , einer als Text einer als Zahl, und ein Sende Button für die beiden Inputs.
Heinz
/* Webserver mit Eingabe und Buttons
Diese Beispiel basiert auf dem Hello Server aus den Beispielen
für ESP8266.
Sketch wurde ergänzt um mehrer Eingabemöglichkeiten auf der Webseite
verwendet 2 Buttons , 2 Input , sende Button
erforderliche zus. Hardware keine
*/
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char* ssid = "xxxx";
const char* password = "xxxx";
String zustand = "aus";
String text1 = "Probetext";
int wert = 100;
ESP8266WebServer server(80);
// HTLML Seite erstelen alles in einen String
void handleRoot() { // Benutzer HTML Seite
String buff = "<!DOCTYPE html><html lang='de'>";
buff += "<head>";
buff += "<title>HTML DEMO</title>";
buff += "</head> ";
buff += "<body>";
buff += "<h1>Testseite mit Buton und Input</h1>
";
buff += "Der Zustand wird mit den buttons ein und aus geschaltet
";
buff += " Zustand ist derzeit : ";
buff += zustand;
// -----------Form mit dem Handle button erstellen
buff += "<form action='/buton' method='POST'>";
// zwei buttons mit htlm button
buff += "<button style='width:120px' name='action' value='1'> Ein </button> ";
buff += "<button style='width:120px' name='action' value='2'> Aus </button> ";
buff += "
";
// zwei input
buff += "Text eingeben ";
buff += "<input type='text' name='TEXT' value='"; // eingabe String
buff += text1;
buff += "' size='20'>
";
buff += "Zahl eingeben ";
buff += "<input type='text' name='TEXT2' value='";// Eingabe Interger
buff += wert;
buff += "' size='10'>
";
// sende button hier mal mit input button
buff += "<input type='submit' name='SUBMIT' value='senden'>
";
buff += "</form></body></html>";
server.send(200, "text/html", buff);
}
// -------------Auswertung der Antwort
void handleanswer() {
if (server.hasArg ("action")) { // Button gedrückt
String a = server.arg("action");
Serial.print("Button gedrückt");
Serial.println(a);
if (a == "1") { // Button mit Wert=1
zustand = ("Ein");
}
else if (a == "2") {// Button mit Wert=2
zustand = ("Aus");
}
}
if (server.hasArg("SUBMIT")) { // sende button gedrückt
text1 = server.arg("TEXT");
Serial.println(text1);
String text2 = server.arg("TEXT2");
wert = text2.toInt();
if (wert < 0) wert = 0; // Eingabegrenzen 0-1000
if (wert > 1000) wert = 1000;
Serial.println(wert);
}
handleRoot(); // Seite auf Client aktualisieren
}
// ------------ Fehler Seite
void handleNotFound() {
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
void setup(void) {
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
if (MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}
server.on("/", handleRoot); // Webseite bearbeiten
server.on("/buton", handleanswer); // Antwort vom Client bearbeiten
server.onNotFound(handleNotFound); // Fehler bearbeiten
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
server.handleClient();
}