Relais mit einem HTML-Button schalten (Lösung) – Projekte für Arduino und ESP32-Mikrocontroller

#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";
char Passwort[] = "xxxxxxx";

int Relais = 19;

// Relais beim Start ausgeschaltet
bool RelaisStatus = false;

// statischeIP = false -> IP-Adresse über DHCP vergeben
// statischeIP = true -> statische IP festlegen
bool statischeIP = true;

// 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(Relais, 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 /RelaisSchalten
  // Funktion für die Schaltung des Relais aufrufen
  Server.on("/RelaisSchalten", RelaisSchalten);
}

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

void SeiteBauen()
{
  // Seite "zusammenbauen"
  String Seite = "";

  // Relais an -> RelaisStatus true -> grüner Hintergrund
  if (RelaisStatus) 
  {
    Seite += "<h1 style=\"font-size: 24pt; color: green; background: #e9fdd4;padding: 10px;\">";
    Seite += "Relais eingeschaltet</h1>";
    
    // Link beim Anklicken des Buttons
    // Aufruf der Funktion RelaisSchalten
    Seite += "<a href=\"/RelaisSchalten\">";
    Seite += "<button style=\"background-color: green;";
    Seite += " width:150px;height:150px; cursor:pointer;";
    Seite += " border-radius:10%;border: 2px solid black;\">";
    Seite += " </button>";
  }

  // Relais aus -> RelaisStatus false -> roter Hintergrund
  else 
  {
    Seite += "<h1 style=\"font-size: 24pt; color: red; background: #fdebeb;padding: 10px;\">";
    Seite += "Relais ausgeschaltet</h1>";
    Seite += "<a href=\"/RelaisSchalten\">";
    Seite += "<button style=\"background-color: red;";
    Seite += " width:150px;height:150px; cursor:pointer;";
    Seite += " border-radius:10%;border: 2px solid black;\">";
    Seite += " </button>";
  }

  // Seite anzeigen
  Server.send(200, "text/html", Seite);
}
 
void RelaisSchalten() 
{
  RelaisStatus = !RelaisStatus;

  digitalWrite(Relais, RelaisStatus); 

  // Seite neu aufbauen
  SeiteBauen();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

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

char Passwort[] = "xxxxxxx";

int Relais = 19;

// Relais beim Start ausgeschaltet

bool RelaisStatus = false;

// statischeIP = false -> IP-Adresse über DHCP vergeben

// statischeIP = true -> statische IP festlegen

bool statischeIP = true;

// 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(Relais, 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 /RelaisSchalten

// Funktion für die Schaltung des Relais aufrufen

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

}

void loop()

{

// auf Anfragen warten

Server.handleClient();

}

void SeiteBauen()

{

// Seite "zusammenbauen"

String Seite = "";

// Relais an -> RelaisStatus true -> grüner Hintergrund

if (RelaisStatus)

{

Seite += "<h1 style=\"font-size: 24pt; color: green; background: #e9fdd4;padding: 10px;\">";

Seite += "Relais eingeschaltet</h1>";

// Link beim Anklicken des Buttons

// Aufruf der Funktion RelaisSchalten

Seite += "<a href=\"/RelaisSchalten\">";

Seite += "<button style=\"background-color: green;";

Seite += " width:150px;height:150px; cursor:pointer;";

Seite += " border-radius:10%;border: 2px solid black;\">";

Seite += " </button>";

}

// Relais aus -> RelaisStatus false -> roter Hintergrund

else

{

Seite += "<h1 style=\"font-size: 24pt; color: red; background: #fdebeb;padding: 10px;\">";

Seite += "Relais ausgeschaltet</h1>";

Seite += "<a href=\"/RelaisSchalten\">";

Seite += "<button style=\"background-color: red;";

Seite += " width:150px;height:150px; cursor:pointer;";

Seite += " border-radius:10%;border: 2px solid black;\">";

Seite += " </button>";

}

// Seite anzeigen

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

}

void RelaisSchalten()

{

RelaisStatus = !RelaisStatus;

digitalWrite(Relais, RelaisStatus);

// Seite neu aufbauen

SeiteBauen();

}

letzte Aktualisierung: Juli 25, 2026 @ 19:08