Relais mit Webbrowser schalten – Projekte für Arduino und ESP32-Mikrocontroller

Kategorie: Darstellung im Browser

Schlagwort: Relais

Ziel des Projekts

Ein ESP-Mikrocontroller schaltet auf einer Webseite mit einem Klick auf den Button ein Relais.

Benötigte Bauteile

Konfiguration der Mikrocontroller

Das Relais

Wenn das Relais ein HIGH-Signal empfängt, wird die Datenleitung zusammen mit NC aktiviert, die dort angeschlossene LED leuchtet. LOW wechselt zum Zusammenspiel der Datenleitung mit NO. Die dort angeschlossene LED leuchtet, eine an NC angeschlossene LED wird ausgeschaltet.

Der Schaltplan

Das Programm

Bibliotheken und Variable

Du musst die SSID 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[] = "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);

#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[] = "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);

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 RelaisSchalten schaltet das Relais ein oder aus.. Sie wird ausgeführt, wenn im Browser an die IP-Adresse /RalaisSchalten angehängt wird.

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

Zu diesem Zweck wird in der Funktion SeiteBauen ein Link erstellt. Sobald der Button angeklickt wird, führt der Browser die Funktion RelaisSchalten aus.
Anführungszeichen in einer Anweisung müssen mit \“ „maskiert“ werden.

<a href=\"/RelaisSchalten\">

1	<a href=\"/RelaisSchalten\">

Der vollständige setup-Teil:

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

}

Die Funktion SeiteBauen

SeiteBauen erstellt die Webseite mit einer Überschrift und einem quadratischen Button. Je nach Zustand der Variable RelaisStatus wird der Button mit rotem oder grünem Hintergrund dargestellt.
Die Variable RelaisStatus ist eine Variable vom Typ bool. Sie kennt zwei Zustände: true (Relais ist eingeschaltet) oder false (Relais 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 (10% -> Ecken abgerundet)
border: Breite in Pixel , Darstellung und Farbe der Linie (2px solid black)

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

}

Die Funktion RelaisSchalten

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

1 2	if (RelaisStatus == true) RelaisStatus = false; else if (RelaisStatus == false) RelaisStatus = true;

Das Relais wird entsprechend dem Wert von RelaisStatus geschaltet: true entspricht 1 oder HIGH, false hat den Wert 0 oder LOW.

void RelaisSchalten() 
{
  RelaisStatus = !RelaisStatus;

  digitalWrite(Relais, RelaisStatus); 

  // Seite neu aufbauen
  SeiteBauen();
}

void RelaisSchalten()

{

RelaisStatus = !RelaisStatus;

digitalWrite(Relais, RelaisStatus);

// 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

#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[] = "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_SSID";

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 23, 2026 @ 23:14