Am häufigsten wird die Funktion des WebServers gebraucht.
Das ermöglicht dir den NodeMCU über ein im Netzwerk verbundenes Gerät zu Steuern (z.b. Smartphone, Computer…).
Klingt Kompliziert, aber im Prinzip ist es ganz einfach.
Um dieses Tutorial weiter verfolgen zu können, solltet ihr die
[NodeMCU] Vorbereiten für das Programmieren/ bereits gemacht haben, falls nicht wird das leider nicht funktionieren.
Schritt 1
verbinde deinen NodeMCU mit den PC. Aus Bequemlichkeit Stecke ich es auf ein Entwicklerboard, dass ist aber nicht zwingend Notwendig.
Schritt 2
Schaut ob ihr die richtigen Settings unter Werkzeuge eingestellt habt.
Board: NodeMCU 1.0 (ESP-12E Module)
Upload Speed: „115200“
CPU-Frequency: „80 MHz“
Flash Size: „4M (3M SPIFFS)“
Port: Port den ihr Verbunden habt. (Bei mir COM5)
Tipp: Es wäre schon Hilfreich wenn ihr jetzt schon den „Serieller Monitor“ öffnet.
Schritt 3: Wir fangen das Programmieren an.
Erstmal bauen wir eine Verbindung via WiFi auf und testen, ob dieses auch funktioniert.
#include <ESP8266WiFi.h>
const char* ssid = "DeinWLAN-Name";
const char* password = "DeinWLANPasswort";
String header;
WiFiServer server(80);
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
Serial.print("Netmask: ");
Serial.println(WiFi.subnetMask());
Serial.print("Gateway: ");
Serial.println(WiFi.gatewayIP());
server.begin();
}
void loop() {
// put your main code here, to run repeatedly:
}
Schritt 4
Bevor ihr den Sketch nun auf den NodeMCU bringt, solltet ihr den Seriellen Monitor (Siehe Schritt 1) offen haben.
Zum Hochladen einfach diesen Button benutzen.
Wenn alles geklappt hat, solltet ihr nun eine WLan Verbindung hergestellt haben. Im Seriellen Monitor müsste eure Netzwerk-Adresse erscheinen. (Siehe Bild oben: Ansicht nach den Hochladen des Sketches )
Alternativ könnt ihr auch bei euren Router nachschauen, ob ein weiteres Gerät hinzugefügt wurde. Ihr solltet den Sketch nun Speichern.
Ich habe es WifiServer genannt.
Schritt 5
Den folgenden Code müsst ihr im „void loop(){}“ haben.
Dieser Code erstellt die Anzeige, wenn ihr die Netzwerkadresse aufruft.
void loop() {
WiFiClient client = server.available(); /
if (client) {
Serial.println("New Client.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}</style></head>");
client.println("<body><h1>ESP8266 Web Server by Jan Zumdick</h1></body>");
client.println("<p><a href=\"/sinnloser/befehl\"><button class=\"button\">Sinnloser Button</button></a></p>");
Serial.println("Client connected.");
Serial.print("");
if (header.indexOf("GET /sinnloser/befehl") >= 0) {
Serial.println("Der Button wurde gedrückt, ich kann nun was machen.");
}
header = "";
client.stop();
Serial.print("");
Serial.println("Client disconnected.");
Serial.println("");
break;
}
}
}
}
}
}
Den ursprüngliche Code habe ich bei https://randomnerdtutorials.com gefunden.
Habe ihn etwas umgeschrieben, um es etwas zu vereinfachen.
Fertig
Sobald ich die Netzwerkadresse aufrufe, erscheint eine Website (Lokale Website) und wenn ich den „Sinnlosen Button“ drücke, sagt mir mein Serieller Monitor, dass der Knopf gedrückt wurde.
Hier könnten wir dann noch LEDs steuern oder andere Befehle ausführen (Daten via GET holen, senden oder oder oder….)
