HTML Eingabeaufforderung

Hallo Leute

Ich weiß, zu demtheme gibt es im Internet schon Zahlreiche Threads, Anleitungen und Videos.
Aber da ich nach drei Wochen Recherche und Versuchen immer noch nicht weiter bin bitte ich euch um Hilfe. Ich würde es Bestimmt durch irgend ein Beispiel ans laufen bekommen aber ich möchte es ja auch
verstehen, warum es funktioniert, sonst könnt ich mir ja gleich ne Zeitschaltuhr kaufen. :wink:

Ich habe bei mir auf dem Hof statt einem Bewegungsmelder eine Lichtschranke verwendet, da nachts wegen der Tiere die Lampe sonst die ganze Zeit ein und ausschalten würde.
Dieses habe ich mit einem NODEMCU V0.9 realisiert.

Mein Programm:
Wenn eine Lichtschranke betätigt wird (Eingang D1) läuft eine Zeit (“Ausloesezeit”) ab.
//diese ist notwendig, damit durchfliegende Spatzen die Lichtschranke nicht auslösen. :wink:

Wenn die Lichtschranke bis zum ablaufen der Zeit betätigt bleibt, wird die Beleuchtung (Ausgang D0) eingeschaltet,
und es läuft eine zweite Zeit (“Laufzeit”) ab.
Wenn die zweite Zeit abgelaufen ist, wird die Beleuchtung (Ausgang D0) ausgeschaltet.
dieses Läuft nun seit einem 1/2 Jahr Stabil.

Meine Veränderung
Ich möchte nun zur Einstellung der Zeiten einen HTML_Webserver (AP) einrichten, auf den ich mich einfach mit dem Handy einstellen kann.
Es sollen einfach 2 Eingabefelder vorhanden sein, in die ich meine Auslösezeit und Laufzeit eintippen kann. Diese sollen dann über einen Button in das Programm übernommen werden.
Die aktuellen Werte sollen im jeweiligen Eingabefeld angezeigt werden.
Die Web-Server habe ich auch schon erstellt und ich kann die Seite aufrufen.

Mein Problem:
Ich bekomme es einfach nicht hin, mein Programm mit der HTML Datei zu verbinden, so das die Werte hin und her geschrieben werden. Ich sehe in den verschiedenen Beispielen immer eine ganze Reihe if-Bedingungen im Loop die ich nicht verstehe und nirgends weiter Beschrieben sind. Wenn ich diese versuche auf meine Bedürfnisse anzupassen funktioniert das beispiel nicht mehr.

Danke für eure Hilfe
Gruß Daniel.

index.h (851 Bytes)

Lichtschranke.ino (1.88 KB)

Dann versuche doch erst mal aus den Beispielen des ESP8266-Webservers die Verbindung mit Deinem Browser zu realisieren. Vorerst ohne AP.

Dann probierst Du den AP aus.

Dann verheiratest Du beide mit Deinem bestehenden Sketch. Immer beim Lernen in kleinen Schritten vorgehen.

Gruß Tommy

naja. Viel ist das noch nicht oder?

Du hast eine Seite mit ein paar Felder. Schön.

Pack die Felder in ein Form und schick sie an den ESP

im einfachsten form in etwa mit

form abschließen nicht vergessen.

in deinem handleRoot fragst dann die Parameter ab, validierst die Usereingabe und übernimmst gegebenenfalls die Werte in deine Variablen.

wenn es mit GET funktioniert hat, baust das ganze auf POST um.

Google mal nach ESPimatic.
Das Programm ist zwar für deine Zwecke etwas überdimensioniert, aber es sind viele brauchbare Funktionen drin und die Settings werden im Eerom gespeichert. Damit bleiben sie auch nach einem Reset auf den eingestellten Werten.
Das habe ich auf einem NodeMCU 1.0 (ESP-12E) am laufen, funktioniert 1A.
ESP startet im AP Mode(192.168.4.1, SSID: ESPimatic, PW: espimatic). Mit AP verbinden und im Browser http://192.168.4.1 aufrufen, dann in dem Form deine WiFi Zugangsdaten eingeben und Reset. Danach sollte der ESP in deinem LAN vorhanden sein.
Evtl. mit WNetWatcher die IP des ESP suchen, da er DHCP verwendet.

Musst eben die dort schon vorhandenen Sensoren raus schmeißen und durch deine Lichtschranke ersetzen.
HTML und jQuery Kenntnisse sind aber erforderlich, um die Seiten umzustricken.

Gruß
Fred

Dankeschön für die schnellen Antworten ich werde das mal alles testen.

Hallo Leute

Es funktioniert wie ich es mir vorgestellt habe.
Das ist schon ein großes Erfolgserlebnis nach all den erfolglosen Versuchen.
Ich glaube ich habe zu Kompliziert gedacht.

@Tommy 56:Das hatte ich schon versucht aber ich hatte bis jetzt einiges nicht verstanden.

@noiaska: Deine Antwort hat mich auf den richtigen Weg gebracht.
Allerdings nicht mit der GET Methode sondern gleich mit der POST Methode, da ich hie ein Beispiel habe, wo damit gearbeitet wurde.

@freddy64: Leider ist mir das wirklich etwas zu umfangreich und ich möchte es ja auch lernen und das ist mit Plug & Play ja etwas schwierig.

Danke euch noch mal für die Antworten.

ich hatte anfangs noch das Problem mit server.hasArg, dass ich hier mit den Wert nicht in eine int Variable senden konnte, dieses habe ich aber mit .toInt() gelöst,

Gruß Daniel

index.h (941 Bytes)

Lichtschranke.ino (2.49 KB)

sehr schön dass es dann gleich mit dem POST geklappt hat!

Da du nun Erfahrung gesammelt hast würde ich an deiner Stelle noch die Formularfelder mit den aktuellen Werten befüllen (also den value= mit dem aktuellen Wert belegen). Dazu müsstest du aber die index.h ablösen und direkt im Code anwenden.

Nur Fragmente

string s;
s += F("<head>\n"
          "<title>Lichtschranke Stall 1</title>\n"
          "<body>");    // bzw. alles runter bis zum form

s+= F("<label for='Laufzeit'>Laufzeit:</label><input type='number' id='Laufzeit" name='Laufzeit' placeholder='min' min='0' max='100' value='); // hier ergänzt du das value field
s+= Laufzeit; // dann gibst deine Variable aus
s+= "'/> <span class='validity'></span> <b>min</b>\n" // schließt mit ' das value feld ab und setzt mit deinem HTML Code fort

Beim Adaptieren aufpassen auf deine "
Entweder escapen oder ersetzen durch ’

Das F Makro verschiebt die Fixtexte in den Flash - vergleichbar mit dem PROGMEM, sollte daher vom Speicherbedarf keinen wesentlichen Unterschied bedeuten.