LED im Webbrowser schalten – Projekte für Arduino und ESP32-Mikrocontroller

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 mit DHCP überlassen willst (statischeIP = false) oder selbst eine IP-Adresse festlegst (statischeIP = true).
Die automatische Vergabe der IP-Adresse bedeutet, dass sich die IP-Adresse nach Ablauf der Gültigkeit ändern kann. Wenn das Programm an einem Netzteil oder Akku betrieben wird, kannst du die modifizierte IP-Adresse nur noch in der Übersicht des Heimnetzes im Router feststellen.

Die statische IP macht dich von der automatischen Adressvergabe mittels DHCP unabhängig, allerdings musst du herausfinden, welcher Bereich der IP-Adressen vom Router reserviert wird. Aus diesem Bereich darfst du keine IP-Adresse wählen.

Tipp

Das Programm arp (Windows) und arp-scan (Linux) listet die IP-Adressen auf:
Windows: arp -a
Linux: arp-scan -l

Die benötigten Bibliotheken werden nach Architektur des Mikrocontrollers automatisch ausgewählt.

#ifdef ESP8266
  #include "ESP8266WebServer.h"
  ESP8266WebServer Server(80);
#else
  #include "WiFi.h"
  #include "WebServer.h"
  WebServer Server(80);
#endif

// Router-SSID/Passwort anpassen
char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";

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

#ifdef ESP8266

#include "ESP8266WebServer.h"

ESP8266WebServer Server(80);

#else

#include "WiFi.h"

#include "WebServer.h"

WebServer Server(80);

#endif

// Router-SSID/Passwort anpassen

char Router[] = "Router_SSID";

char Passwort[] = "xxxxxxxx";

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

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.

Die IP-Adresse wird im Seriellen Monitor angezeigt, du musst sie in der Adresszeile eines Browsers deiner Wahl eingeben.
Der / bezeichnet die Webadresse (URL = Uniform Resource Locator). Wird sie aufgerufen, baut die Funktion SeiteBauen die Webseite auf.

Server.begin();
Server.on("/", SeiteBauen);

1 2	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.

1	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\">

1	<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.mode(WIFI_STA);
  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 setup()

{

pinMode(LED, OUTPUT);

Serial.begin(9600);

// auf serielle Verbindung warten

while (!Serial);

delay(1000);

// WiFi starten

WiFi.mode(WIFI_STA);

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

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;

1 2	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();
}

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

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.mode(WIFI_STA);
  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();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

#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.mode(WIFI_STA);

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: Aug. 8, 2026 @ 9:10