Ampel mit einem Ethernet-Shield im Webbrowser schalten (Lösung) – Projekte für Arduino und ESP32-Mikrocontroller

#include "Ethernet.h"

int ROT = 5;
int GELB = 6;
int GRUEN  = 7;

// MAC-Adresse und IP definieren
byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};

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

// statische IP
IPAddress ip(192, 168, 1, 200);

// Name des Servers vergeben
EthernetServer server(80);

// SchaltungLesen beinhaltet den Befehl zum Schalten der LED
String SchaltungLesen;

void setup()
{
  Serial.begin(9600);

  pinMode(ROT, OUTPUT);
  pinMode(GELB, OUTPUT);
  pinMode(GRUEN, OUTPUT);

  // Ethernet starten statische IP
  if (statischeIP) Ethernet.begin(mac, ip);

  // Ethernet starten DHCP
  else Ethernet.begin(mac);

  // Server starten
  server.begin();

  // zur Kontrolle IP-Adresse anzeigen
  // localIP -> Adresse, die im Browser eingegeben wird
  Serial.print(F("IP des Ethernet-Shields: "));
  Serial.println(Ethernet.localIP());
}

void loop()
{
  // auf Clienten warten ...
  EthernetClient Client = server.available();

  // neue Anfrage
  if (Client)
  {
    // solange der Client verbunden ist ...
    while (Client.connected())
    {
      if (Client.available())
      {
        // Anforderung vom Clienten lesen ...
        char Zeichen = Client.read();
        // ... und dem String hinzufügen
        // SchaltungLesen beinhaltet den Befehl zum Schalten der LED
        SchaltungLesen += Zeichen;
        // return gesendet
        if (Zeichen == '\n')
        {
          /*
            HTML-Seite aufbauen
            die folgenden Anweisungen müssen
            mit print oder println gesendet werden
            println "verschönert" den Quelltext
            (erzeugt einen Zeilenumbruch im Quelltext)
            " müssen mit \ maskiert werden " -> \"
          */
          Client.println(F("HTTP/1.1 200 OK"));
          Client.println(F("Content-Type: text/html"));
          Client.println("Connection: close");
          // Leerzeile zwingend erforderlich
          Client.println();
          Client.println(F("<!doctype html>"));
          Client.println(F("<html>"));
          Client.println(F("<body>"));
          Client.println(F("<h2>Ampel mit Ethernet-Shield schalten</h2>"));
          Client.println(F("<hr />"));
          Client.println(F("<table><tr>"));

          // Button rot ein
          Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));
          Client.print(F(" background-color:#FF6565;"));
          Client.print(F(" width:200px; cursor:pointer;"));
          Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));
          Client.println(F(" onClick=\"location.href='RotEin'\""));
          Client.println(F(" value='rot einschalten'>"));
          Client.println(F("</td>"));

          // Button rot aus
          Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));
          Client.print(F(" background-color:white;"));
          Client.print(F(" width:200px; cursor:pointer;"));
          Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));
          Client.println(F(" onClick=\"location.href='RotAus'\""));
          Client.println(F(" value='rot ausschalten'>"));
          Client.println(F("</td></tr>"));

          // Button gelb ein
          Client.print(F("<tr><td><input style='font-size:14pt; font-weight:bold;"));
          Client.print(F(" background-color:#FFFB65;"));
          Client.print(F(" width:200px; cursor:pointer;"));
          Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));
          Client.println(F(" onClick=\"location.href='GelbEin'\""));
          Client.println(F(" value='gelb einschalten'>"));
          Client.println(F("</td>"));
          // Button gelb aus
          Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));
          Client.print(F(" background-color:white;"));
          Client.print(F(" width:200px; cursor:pointer;"));
          Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));
          Client.println(F(" onClick=\"location.href='GelbAus'\""));
          Client.println(F(" value='gelb ausschalten'>"));
          Client.println(F("</td></tr>"));

          // Button grün ein
          Client.print(F("<tr><td><input style='font-size:14pt; font-weight:bold;"));
          Client.print(F(" background-color:#76FA5F;"));
          Client.print(F(" width:200px; cursor:pointer;"));
          Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));
          Client.println(F(" onClick=\"location.href='GruenEin'\""));
          Client.println(F(" value='gr&uuml;n einschalten'>"));
          Client.println(F("</td>"));

          // Button grün aus
          Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));
          Client.print(F(" background-color:white;"));
          Client.print(F(" width:200px; cursor:pointer;"));
          Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));
          Client.println(F(" onClick&nbsp;=\"location.href='GruenAus'\""));
          Client.println(F(" value='gr&uuml;n ausschalten'>"));
          Client.println(F("</td></tr>"));
          Client.println(F("</table>"));
          Client.println(F("<hr />"));

          // IPs anzeigen
          Client.print(F("<b>Eigene IP: "));
          Client.print(Client.remoteIP());
          Client.print(F("</b>"));
          Client.print(F("<br><b>IP des Ethernet-Shields: "));
          Client.print(Ethernet.localIP());
          Client.print(F("</b>"));
          Client.println(F("</body>"));
          Client.println(F("</html>"));
          delay(1);
          Client.stop();

          /*
            ein Klick auf einen der Buttons erzeugt eine GET-Anweisung in der Form
            GET /RotEin HTTP/1.1 -> Button rot ein auswerten
            GET /RotAus HTTP/1.1 -> Button rot aus auswerten
            indexOf durchsucht den String nach diesen Zeichen (> 0 = Zeichen gefunden)
          */
          if (SchaltungLesen.indexOf("RotEin") > 0) digitalWrite(ROT, HIGH);
          if (SchaltungLesen.indexOf("RotAus") > 0) digitalWrite(ROT, LOW);
          if (SchaltungLesen.indexOf("GelbEin") > 0) digitalWrite(GELB, HIGH);
          if (SchaltungLesen.indexOf("GelbAus") > 0) digitalWrite(GELB, LOW);
          if (SchaltungLesen.indexOf("GruenEin") > 0) digitalWrite(GRUEN, HIGH);
          if (SchaltungLesen.indexOf("GruenAus") > 0) digitalWrite(GRUEN, LOW);
          
          // String SchaltungLesen leeren
          SchaltungLesen = "";
        }
      }
    }
  }
}

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

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

#include "Ethernet.h"

int ROT = 5;

int GELB = 6;

int GRUEN = 7;

// MAC-Adresse und IP definieren

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};

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

bool statischeIP = false;

// statische IP

IPAddress ip(192, 168, 1, 200);

// Name des Servers vergeben

EthernetServer server(80);

// SchaltungLesen beinhaltet den Befehl zum Schalten der LED

String SchaltungLesen;

void setup()

{

Serial.begin(9600);

pinMode(ROT, OUTPUT);

pinMode(GELB, OUTPUT);

pinMode(GRUEN, OUTPUT);

// Ethernet starten statische IP

if (statischeIP) Ethernet.begin(mac, ip);

// Ethernet starten DHCP

else Ethernet.begin(mac);

// Server starten

server.begin();

// zur Kontrolle IP-Adresse anzeigen

// localIP -> Adresse, die im Browser eingegeben wird

Serial.print(F("IP des Ethernet-Shields: "));

Serial.println(Ethernet.localIP());

}

void loop()

{

// auf Clienten warten ...

EthernetClient Client = server.available();

// neue Anfrage

if (Client)

{

// solange der Client verbunden ist ...

while (Client.connected())

{

if (Client.available())

{

// Anforderung vom Clienten lesen ...

char Zeichen = Client.read();

// ... und dem String hinzufügen

// SchaltungLesen beinhaltet den Befehl zum Schalten der LED

SchaltungLesen += Zeichen;

// return gesendet

if (Zeichen == '\n')

{

HTML-Seite aufbauen

die folgenden Anweisungen müssen

mit print oder println gesendet werden

println "verschönert" den Quelltext

(erzeugt einen Zeilenumbruch im Quelltext)

" müssen mit \ maskiert werden " -> \"

Client.println(F("HTTP/1.1 200 OK"));

Client.println(F("Content-Type: text/html"));

Client.println("Connection: close");

// Leerzeile zwingend erforderlich

Client.println();

Client.println(F("<!doctype html>"));

Client.println(F("<html>"));

Client.println(F("<body>"));

Client.println(F("<h2>Ampel mit Ethernet-Shield schalten</h2>"));

Client.println(F("<hr />"));

Client.println(F("<table><tr>"));

// Button rot ein

Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));

Client.print(F(" background-color:#FF6565;"));

Client.print(F(" width:200px; cursor:pointer;"));

Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));

Client.println(F(" onClick=\"location.href='RotEin'\""));

Client.println(F(" value='rot einschalten'>"));

Client.println(F("</td>"));

// Button rot aus

Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));

Client.print(F(" background-color:white;"));

Client.print(F(" width:200px; cursor:pointer;"));

Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));

Client.println(F(" onClick=\"location.href='RotAus'\""));

Client.println(F(" value='rot ausschalten'>"));

Client.println(F("</td></tr>"));

// Button gelb ein

Client.print(F("<tr><td><input style='font-size:14pt; font-weight:bold;"));

Client.print(F(" background-color:#FFFB65;"));

Client.print(F(" width:200px; cursor:pointer;"));

Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));

Client.println(F(" onClick=\"location.href='GelbEin'\""));

Client.println(F(" value='gelb einschalten'>"));

Client.println(F("</td>"));

// Button gelb aus

Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));

Client.print(F(" background-color:white;"));

Client.print(F(" width:200px; cursor:pointer;"));

Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));

Client.println(F(" onClick=\"location.href='GelbAus'\""));

Client.println(F(" value='gelb ausschalten'>"));

Client.println(F("</td></tr>"));

// Button grün ein

Client.print(F("<tr><td><input style='font-size:14pt; font-weight:bold;"));

Client.print(F(" background-color:#76FA5F;"));

Client.print(F(" width:200px; cursor:pointer;"));

Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));

Client.println(F(" onClick=\"location.href='GruenEin'\""));

Client.println(F(" value='grün einschalten'>"));

Client.println(F("</td>"));

// Button grün aus

Client.print(F("<td><input style='font-size:14pt; font-weight:bold;"));

Client.print(F(" background-color:white;"));

Client.print(F(" width:200px; cursor:pointer;"));

Client.print(F(" border-radius:5px;border: 2px solid black;' type='button'"));

Client.println(F(" onClick =\"location.href='GruenAus'\""));

Client.println(F(" value='grün ausschalten'>"));

Client.println(F("</td></tr>"));

Client.println(F("</table>"));

Client.println(F("<hr />"));

// IPs anzeigen

Client.print(F("<b>Eigene IP: "));

Client.print(Client.remoteIP());

Client.print(F("</b>"));

Client.print(F("<br><b>IP des Ethernet-Shields: "));

Client.print(Ethernet.localIP());

Client.print(F("</b>"));

Client.println(F("</body>"));

Client.println(F("</html>"));

delay(1);

Client.stop();

ein Klick auf einen der Buttons erzeugt eine GET-Anweisung in der Form

GET /RotEin HTTP/1.1 -> Button rot ein auswerten

GET /RotAus HTTP/1.1 -> Button rot aus auswerten

indexOf durchsucht den String nach diesen Zeichen (> 0 = Zeichen gefunden)

if (SchaltungLesen.indexOf("RotEin") > 0) digitalWrite(ROT, HIGH);

if (SchaltungLesen.indexOf("RotAus") > 0) digitalWrite(ROT, LOW);

if (SchaltungLesen.indexOf("GelbEin") > 0) digitalWrite(GELB, HIGH);

if (SchaltungLesen.indexOf("GelbAus") > 0) digitalWrite(GELB, LOW);

if (SchaltungLesen.indexOf("GruenEin") > 0) digitalWrite(GRUEN, HIGH);

if (SchaltungLesen.indexOf("GruenAus") > 0) digitalWrite(GRUEN, LOW);

// String SchaltungLesen leeren

SchaltungLesen = "";

}

Letzte Aktualisierung: Aug. 8, 2026 @ 8:52