ESP - LED mit einem HTML-But­ton schalten

Lese­zeit: 7 Minu­ten

Lösung
Seite als PDF

Ziel des Projekts

Das Pro­gramm erstellt eine Web­sei­te, die mit der WiFi-Funk­ti­on der ESPs ange­zeigt wird. Ein Klick auf den But­ton schal­tet die LED.
Das Pro­gramm wur­de für den ESP32-Wroom geschrie­ben.
Pro­gram­me für ande­re Mikro­con­trol­ler fin­dest du hier

So sieht es im Brow­ser aus:

Der Schalt­plan

(Fah­re mit der Maus über das Bild, um die Bezeich­nun­gen der Bau­tei­le zu sehen)

Kon­fi­gu­ra­ti­on der Mikrocontroller

Das Pro­gramm

Biblio­the­ken und Variable

Du musst die SSID (Ser­vice Set Iden­ti­fier) des Rou­ters und das Pass­wort anpas­sen.
Im Pro­gramm kannst du ent­schei­den, ob du dem Rou­ter die Ver­ga­be der IP-Adres­se über­las­sen willst (sta­tischeIP = fal­se) oder selbst eine IP-Adres­se fest­le­gen willst (sta­tischeIP = 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-Adres­se wird im Seri­el­len Moni­tor ange­zeigt, du musst sie in der Adress­zei­le eines Brow­sers dei­ner Wahl eingeben.

Der set­up-Teil

Im set­up-Teil erhält der Mikro­con­trol­ler eine IP-Adres­se.
Je nach Zustand der Varia­ble sta­tischeIP wird sie dyna­misch vom Rou­ter ver­ge­ben oder sta­tisch festgelegt.

Der / bezeich­net die Web­adres­se (URL = Uni­form Resour­ce Loca­tor). Wird sie auf­ge­ru­fen, baut die Funk­ti­on Sei­te­Bau­en die Web­sei­te auf.

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


Die Funk­ti­on LED­Schal­ten schal­tet die LED ein oder aus.. Sie wird aus­ge­führt, wenn im Brow­ser an die IP-Adres­se /LEDSchalten ange­hängt wird.

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

Zu die­sem Zweck wird in der Funk­ti­on Sei­te­Bau­en ein Link erstellt. Sobald der But­ton ange­klickt wird, führt der Brow­ser die Funk­ti­on LED­Schal­ten aus.
Anfüh­rungs­zei­chen in einer Anwei­sung müs­sen mit \" „mas­kiert“ werden.

<a href=\"/LEDSchalten\">

Der voll­stän­di­ge 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 Funk­ti­on SeiteBauen

Sei­te­Bau­en erstellt die Web­sei­te mit einer Über­schrift und einem run­den But­ton. Je nach Zustand der Varia­ble LED­Sta­tus wird der But­ton mit wei­ßem oder gel­ben Hin­ter­grund dar­ge­stellt.
Die Varia­ble LED­Sta­tus ist eine Varia­ble vom Typ bool. Sie kennt zwei Zustän­de: true (LED ist ein­ge­schal­tet) oder fal­se (LED ist aus­ge­schal­tet).
Die Inhal­te wer­den nach und nach dem String Sei­te (+=) hin­zu­ge­fügt.
Server.send sen­det den String Sei­te im For­mat text/html, wird der Code 200 bestä­tigt, wur­de die Sei­te erfolg­reich übertragen.

Der But­ton wird mit CSS gestaltet:

  • back­ground-color: Hintergrundfarbe
  • width/height: Brei­te und Höhe
  • cur­sor: Form des Cur­sors (poin­ter)
  • bor­der-radi­us: Form der Linie (50% -> Kreis)
  • bor­der: Brei­te in Pixel , Dar­stel­lung und Far­be 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 Funk­ti­on LEDSchalten

LED­Sta­tus = !LED­Sta­tus; ändert den Zustand der Varia­ble LED­Sta­tus: ist er true ändert er sich zu fal­se, ist er fal­se wird er zu true.

Es ist die Kurz­form von:

 if (LEDStatus == true) LEDStatus = false;
 else if (LEDStatus  == false) LEDStatus = true;

Die LED wird ent­spre­chend dem Wert von LED­Sta­tus geschal­tet: true ent­spricht 1 oder HIGH, fal­se 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 war­tet auf die Anfra­gen der Klienten.

void loop()
{
  // auf Anfragen warten
  Server.handleClient(); 
}

Das voll­stän­di­ge 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();
}

Startseite
Aufgaben A-Z
Suchen
Downloads
Fehlermeldungen
Seite als PDF

Letzte Aktualisierung: Dez. 23, 2024 @ 7:22