
Ziel des Projekts
Das Programm erstellt eine Webseite, die mit der WiFi-Funktion der ESPs angezeigt wird. Ein Klick auf den Button schaltet die LED.
Das Programm wurde für den ESP32-Wroom geschrieben.
Programme für andere Mikrocontroller findest du ⇒hier
So sieht es im Browser aus:

Der Schaltplan
(Fahre mit der Maus über das Bild, um die Bezeichnungen der Bauteile zu sehen)
Konfiguration der Mikrocontroller
Das Programm
Bibliotheken und Variable
Du musst die SSID (Service Set Identifier) des Routers und das Passwort anpassen.
Im Programm kannst du entscheiden, ob du dem Router die Vergabe der IP-Adresse überlassen willst (statischeIP = false) oder selbst eine IP-Adresse festlegen willst (statischeIP = true).
#include "WiFi.h"
#include "WebServer.h"
// Router-SSID/Passwort anpassen
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";
// Name des Servers auf Port 80
WebServer Server(80);
int LED = 18;
// LED beim Start ausgeschaltet
bool LEDStatus = false;
// statischeIP = false -> IP-Adresse über DHCP vergeben
// statischeIP = true -> statische IP festlegen
bool statischeIP = false;
// ip und gateway müssen an das lokale Netz angepasst werden
IPAddress ip(192, 168, 1, 100);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
Die IP-Adresse wird im Seriellen Monitor angezeigt, du musst sie in der Adresszeile eines Browsers deiner Wahl eingeben.
Der setup-Teil
Im setup-Teil erhält der Mikrocontroller eine IP-Adresse.
Je nach Zustand der Variable statischeIP wird sie dynamisch vom Router vergeben oder statisch festgelegt.


Der / bezeichnet die Webadresse (URL = Uniform Resource Locator). Wird sie aufgerufen, baut die Funktion SeiteBauen die Webseite auf.
Server.begin();
Server.on("/", SeiteBauen);
Die Funktion LEDSchalten schaltet die LED ein oder aus.. Sie wird ausgeführt, wenn im Browser an die IP-Adresse /LEDSchalten angehängt wird.
Server.on("/LEDSchalten", LEDSchalten);
Zu diesem Zweck wird in der Funktion SeiteBauen ein Link erstellt. Sobald der Button angeklickt wird, führt der Browser die Funktion LEDSchalten aus.
Anführungszeichen in einer Anweisung müssen mit \" „maskiert“ werden.
<a href=\"/LEDSchalten\">
Der vollständige setup-Teil:
void setup()
{
pinMode(LED, OUTPUT);
Serial.begin(9600);
// auf serielle Verbindung warten
while (!Serial);
delay(1000);
// WiFi starten
WiFi.begin(Router, Passwort);
// statische IP vergeben
if (statischeIP)
{
WiFi.config(ip, gateway, subnet);
Serial.print("Verbunden mit ");
Serial.println(Router);
// IP anzeigen
Serial.print("Statische IP: ");
}
// IP über DHCP ermitteln
else
{
while (WiFi.status() != WL_CONNECTED)
{
delay(200);
Serial.print(".");
}
Serial.println();
Serial.print("Verbunden mit ");
Serial.println(Router);
Serial.print("IP über DHCP: ");
}
// IP anzeigen
Serial.println(WiFi.localIP());
// Webserver starten
// / -> Aufruf der URL, SeiteBauen -> Aufruf der Funktion
Server.begin();
Server.on("/", SeiteBauen);
// beim Aufruf der URL /LEDSchalten
// Funktion für die Schaltung der LED aufrufen
Server.on("/LEDSchalten", LEDSchalten);
}
Die Funktion SeiteBauen
SeiteBauen erstellt die Webseite mit einer Überschrift und einem runden Button. Je nach Zustand der Variable LEDStatus wird der Button mit weißem oder gelben Hintergrund dargestellt.
Die Variable LEDStatus ist eine Variable vom Typ bool. Sie kennt zwei Zustände: true (LED ist eingeschaltet) oder false (LED ist ausgeschaltet).
Die Inhalte werden nach und nach dem String Seite (+=) hinzugefügt.
Server.send sendet den String Seite im Format text/html, wird der Code 200 bestätigt, wurde die Seite erfolgreich übertragen.
Der Button wird mit CSS gestaltet:
- background-color: Hintergrundfarbe
- width/height: Breite und Höhe
- cursor: Form des Cursors (pointer)
- border-radius: Form der Linie (50% -> Kreis)
- border: Breite in Pixel , Darstellung und Farbe der Linie (2px solid black)
void SeiteBauen()
{
// Seite "zusammenbauen"
String Seite = "";
Seite += "<h1 align=\"left\">LED schalten</h1>";
// Link beim Anklicken des Buttons
// Aufruf der Funktion LEDSchalten
Seite += "<a href=\"/LEDSchalten\">";
// LED an -> LEDStatus true -> gelber Hintergrund
if (LEDStatus) Seite += "<button style=\"background-color: yellow;";
// LED aus -> LEDStatus false -> weißer Hintergrund
else Seite += "<button style=\"background-color: white;";
Seite += " width:150px;height:150px; cursor:pointer;";
Seite += " border-radius:50%;border: 2px solid black;\">";
Seite += "</button>";
// Seite anzeigen
Server.send(200, "text/html", Seite);
}
Die Funktion LEDSchalten
LEDStatus = !LEDStatus; ändert den Zustand der Variable LEDStatus: ist er true ändert er sich zu false, ist er false wird er zu true.
Es ist die Kurzform von:
if (LEDStatus == true) LEDStatus = false;
else if (LEDStatus == false) LEDStatus = true;
Die LED wird entsprechend dem Wert von LEDStatus geschaltet: true entspricht 1 oder HIGH, false hat den Wert 0 oder LOW.
void LEDSchalten()
{
// Status der LED setzen:
// true = 1 (HIGH), false = 0 (LOW)
LEDStatus = !LEDStatus;
// LED schalten
digitalWrite(LED, LEDStatus);
// Seite neu aufbauen
SeiteBauen();
}
Der loop-Teil
Der loop-Teil wartet auf die Anfragen der Klienten.
void loop()
{
// auf Anfragen warten
Server.handleClient();
}
Das vollständige Programm
#include "WiFi.h"
#include "WebServer.h"
// Router-SSID/Passwort anpassen
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";
WebServer Server(80);
int LED = 18;
// LED beim Start ausgeschaltet
bool LEDStatus = false;
// statischeIP = false -> IP-Adresse über DHCP vergeben
// statischeIP = true -> statische IP festlegen
bool statischeIP = false;
// ip und gateway müssen an das lokale Netz angepasst werden
IPAddress ip(192, 168, 1, 100);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
void setup()
{
pinMode(LED, OUTPUT);
Serial.begin(9600);
// auf serielle Verbindung warten
while (!Serial);
delay(1000);
// WiFi starten
WiFi.begin(Router, Passwort);
// statische IP vergeben
if (statischeIP)
{
WiFi.config(ip, gateway, subnet);
Serial.print("Verbunden mit ");
Serial.println(Router);
// IP anzeigen
Serial.print("Statische IP: ");
}
// IP über DHCP ermitteln
else
{
while (WiFi.status() != WL_CONNECTED)
{
delay(200);
Serial.print(".");
}
Serial.println();
Serial.print("Verbunden mit ");
Serial.println(Router);
Serial.print("IP über DHCP: ");
}
// IP anzeigen
Serial.println(WiFi.localIP());
// Webserver starten
// / -> Aufruf der URL, SeiteBauen -> Aufruf der Funktion
Server.begin();
Server.on("/", SeiteBauen);
// beim Aufruf der URL /LEDSchalten
// Funktion für die Schaltung der LED aufrufen
Server.on("/LEDSchalten", LEDSchalten);
}
void loop()
{
// auf Anfragen warten
Server.handleClient();
}
void SeiteBauen()
{
// Seite "zusammenbauen"
String Seite = "";
Seite += "<h1 align=\"left\">LED schalten</h1>";
// Link beim Anklicken des Buttons
// Aufruf der Funktion LEDSchalten
Seite += "<a href=\"/LEDSchalten\">";
// LED aus -> LEDStatus false -> gelber Hintergrund
if (LEDStatus) Seite += "<button style=\"background-color: yellow;";
// LED an -> LEDStatus true -> weißer Hintergrund
else Seite += "<button style=\"background-color: white;";
Seite += " width:150px;height:150px; cursor:pointer;";
Seite += " border-radius:50%;border: 2px solid black;\">";
Seite += " </button>";
// Seite anzeigen
Server.send(200, "text/html", Seite);
}
void LEDSchalten()
{
// Status der LED setzen:
// true = 1 (HIGH), false = 0 (LOW)
LEDStatus = !LEDStatus;
// LED schalten
digitalWrite(LED, LEDStatus);
// Seite neu aufbauen
SeiteBauen();
}
Letzte Aktualisierung: