ESP LED mit HTML-Button schalten - Programmieren mit Arduino

Inhalt

ESP32-Wroom
Arduino Nano ESP32
ESP32-C6
Wemos D1 Mini/NodeMCU

ESP32-Wroom

Das Programm schaltet eine LED an Pin 18

#include "WiFi.h"
#include "WebServer.h"

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

// ESP32
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() 
{
  LEDStatus = !LEDStatus;

  digitalWrite(LED, LEDStatus); 

  // Seite neu aufbauen
  SeiteBauen();
}

Arduino Nano ESP32

Das Programm schaltet die Farbe blau der internen ⇒RGB-LED.

#include "WiFi.h"
#include "WebServer.h"

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

WebServer Server(80);

// 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() 
{
  // Arduino Nano ESP32 blaue RGB
  pinMode(LED_BLUE, 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 += "<input style=\"background-color: blue;";

  // LED an -> LEDStatus true -> weißer Hintergrund
  else Seite += "<input style=\"background-color: white;";
  Seite += " width:150px;height:150px; cursor:pointer;";
  Seite += " border-radius:50%;border: 2px solid black;\"";
  Seite += " type=\"button\">";

  // Seite anzeigen
  Server.send(200, "text/html", Seite);
}

void LEDSchalten() 
{
  /*
    die LED wird bei LOW eingeschaltet
    zunächst schalten, dann LEDStatus ändern
  */
  digitalWrite(LED_BLUE, LEDStatus);

  LEDStatus = !LEDStatus;

  // Seite neu aufbauen
  SeiteBauen();
}

ESP32-C6

Das Programm schaltet die weiße Farbe der internen RGB-LED.

#include "WiFi.h"
#include "WebServer.h"

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

WebServer Server(80);

// 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_BUILTIN, 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 += "<input style=\"background-color: yellow;";

  // LED an -> LEDStatus true -> weißer Hintergrund
  else Seite += "<input style=\"background-color: white;";
  Seite += " width:150px;height:150px; cursor:pointer;";
  Seite += " border-radius:50%;border: 2px solid black;\"";
  Seite += " type=\"button\">";

  // Seite anzeigen
  Server.send(200, "text/html", Seite);
}

void LEDSchalten() 
{   
  LEDStatus = !LEDStatus;

  digitalWrite(LED_BUILTIN, LEDStatus); 

  // Seite neu aufbauen
  SeiteBauen();
}

Wemos D1 Mini/NodeMCU

Das Programm schalte die interne blaue LED.

#include "ESP8266WebServer.h"

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

ESP8266WebServer Server(80);

// 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_BUILTIN, 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 += "<input style=\"background-color: blue;";

  // LED an -> LEDStatus true -> weißer Hintergrund
  else Seite += "<input style=\"background-color: white;";
  Seite += " width:150px;height:150px; cursor:pointer;";
  Seite += " border-radius:50%;border: 2px solid black;\"";
  Seite += " type=\"button\">";

  // Seite anzeigen
  Server.send(200, "text/html", Seite);
}

void LEDSchalten() 
{
  digitalWrite(LED_BUILTIN, LEDStatus); 
  
  LEDStatus = !LEDStatus;

  // Seite neu aufbauen
  SeiteBauen();
}

Letzte Aktualisierung: Nov. 24, 2024 @ 13:16

ESP32-Wroom

Ardui­no Nano ESP32

ESP32-C6

Wemos D1 Mini/NodeMCU

Arduino Nano ESP32