ESP - LED mit einem HTML-Button schalten – Projekte für Arduino und ESP32-Mikrocontroller

Inhalt

8 Minuten

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

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

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.

Server.on("/LEDSchalten", LEDSchalten);

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: Dez. 11, 2025 @ 20:30