Webserver mit Eingabe

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();

}

Hallo Rentner

War es beabsichtigt das du dein PW und SSID mit einstellst?

Da man schnell mal nicht daran denkt, stehen diese Daten bei mir in einer settings.h und es gibt eine zentrale settings_offen.h mit char passwort="geheim"; usw.

Das hilft mir hoffentlich etwas, evtl. auch anderen.

Gruß Tommy

Rentner, jag deinen HTML Code mal durch einen V3 - Validierer

metode='POST'
auf die schnelle gesehen.

abschließende Zeilenumbrüche machen den HTML Quellcode wesentlich lesbarer

Serial.print("Buton gedrückt");
ist auch nicht schön.

Danke für den Hinweis , Geheim ist geändert

Heinz

Rentner:
// zwei input
buff += "Text eingeben ";
buff += "

";
buff += "Zahl eingeben ";
buff += "

";
// sende button hier mal mit input button
buff += "
";
buff += “”;

Input type=‘text’ kannst du für “Text” weglassen, es ist der Standartwert.

Für deine “Eingabe Integer” solltest du als Typ type=“number” nehmen, so vermeidest du versehentliche Falscheingaben schon vor dem senden.

Gruß Fips

Danke für den Hinweis , da gibt's dann wieder was zum probieren .
Heinz