Ampel im Webbrowser mit UNO R4 WiFi schalten (Lösung) – Projekte für Arduino und ESP32-Mikrocontroller

#include "WiFiS3.h"

// Pins der LEDs
int ROT = 5;
int GELB = 6;
int GRUEN = 7;

// Schalter für den Zustand der LEDs (false->aus, true-> an
bool RotAn = false;
bool GelbAn = false;
bool GruenAn = false;

char Router[] = "Router_SSID";
char Passwort[] = "xxxxxxxx";

int status = WL_IDLE_STATUS;

WiFiServer WiFiServer(80);

WiFiClient WebClient = WiFiServer.accept();

void setup() 
{
  pinMode(ROT, OUTPUT);
  pinMode(GELB, OUTPUT);
  pinMode(GRUEN, OUTPUT);

  Serial.begin(9600);

  // auf serielle Verbindung warten
  while (!Serial);
  delay(1000);

  while (status != WL_CONNECTED)
  {
    Serial.print("Warte 10 Sekunden auf die Verbindung ...");
    status = WiFi.begin(Router, Passwort);
    delay(10000);
  }
  Serial.println();
  Serial.print("Verbunden mit ");
  Serial.println(Router);
  Serial.print("IP über DHCP: ");
  Serial.println(WiFi.localIP());

  WiFiServer.begin();
}

void loop() 
{
  // auf WebClienten warten ...
  WebClient = WiFiServer.available();
  if (WebClient) 
  {
    String SchaltungLesen;
    // solange der WebClient verbunden ist ...
    while (WebClient.connected()) 
    {
      if (WebClient.available()) 
      {
        // Anforderung vom WebClienten lesen ...
        char Zeichen = WebClient.read();

        // return (\n) gesendet
        if (Zeichen == '\n') 
        {
          // wenn der String SchaltungLesen leer ist
          if (SchaltungLesen == "") 
          {
            /*
              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 " -> \"
            */
            // HTML-Seite aufbauen
            WebClient.println("HTTP/1.1 200 OK");
            WebClient.println("Content-type:text/html");

            // Leerzeile zwingend erforderlich
            WebClient.println();

            // Gerüst der HTML-Seite:
            WebClient.println("<!doctype html>");
            WebClient.println("<html>");

            WebClient.println("<body>");

            // h2 -> Überschrift, hr horizontale Linie
            WebClient.println("<h2>Ampel mit WiFi-Modul schalten</h2>");
            WebClient.println("<hr>");

            // table = Tabelle, tr = Tabelle Zeile, td = Tabelle Zelle
            WebClient.println("<table><tr>");

            // rote LED ist eingeschaltet -> roter Hintergrund
            /*
              style = Stil des Buttons bestimmen:
              background-color = Hintergrundfarbe, width/height = Breite/Höhe
              cursor: pointer = Cursor als Hand darstellen, 
              border-radius: 50% = runder Button, 
              border = Rand des Buttons als 2 Pixel breite durchgezogene Linie (solid)
              onclick: beim Klick auf den Button wird die URL RotAus übergeben,
              sie wird später ausgewertet
            */
            if (RotAn) 
            {
              WebClient.print("<td><input style='background-color:#FF6565;");
              WebClient.print(" width:150px;height:150px; cursor:pointer;");
              WebClient.print(" font-size:14pt;");
              WebClient.print(" border-radius:50%;border: 2px solid black;'");
              WebClient.print(" type='button'");
              WebClient.println(" value='rot'");
              WebClient.println(" onClick=\"location.href='RotAus'\">");
              WebClient.println("</td><tr>");
            }

            // rote LED ist ausgeschaltet -> weißer Hintergrund
            else 
            {
              WebClient.print("<td><input style='background-color:white;");
              WebClient.print(" width:150px;height:150px; cursor:pointer;");
              WebClient.print(" font-size:14pt;");
              WebClient.print(" border-radius:50%;border: 2px solid black;'");
              WebClient.print(" type='button'");
              WebClient.println(" value='rot'");
              WebClient.println(" onClick=\"location.href='RotEin'\">");
              WebClient.println("</td><tr>");
            }

            // gelbe LED ist eingeschaltet -> gelber Hintergrund
            if (GelbAn) 
            {
              WebClient.print("<td><input style='background-color:#FFFB65;");
              WebClient.print(" width:150px;height:150px; cursor:pointer;");
              WebClient.print(" font-size:14pt;");
              WebClient.print(" border-radius:50%;border: 2px solid black;'");
              WebClient.print(" type='button'");
              WebClient.println(" value='gelb'");
              WebClient.println(" onClick=\"location.href='GelbAus'\">");
              WebClient.println("</td><tr>");
            }

            // gelbe LED ist ausgeschaltet -> weißer Hintergrund
            else 
            {
              WebClient.print("<td><input style='background-color:white;");
              WebClient.print(" width:150px;height:150px; cursor:pointer;");
              WebClient.print(" font-size:14pt;");
              WebClient.print(" border-radius:50%;border: 2px solid black;'");
              WebClient.print(" type='button'");
              WebClient.println(" value='gelb'");
              WebClient.println(" onClick=\"location.href='GelbEin'\">");
              WebClient.println("</td><tr>");
            }

            // grüne LED ist eingeschaltet -> grüner Hintergrund
            if (GruenAn) 
            {
              WebClient.print("<td><input style='background-color:green;");
              WebClient.print(" width:150px;height:150px; cursor:pointer;");
              WebClient.print(" font-size:14pt;");
              WebClient.print(" border-radius:50%;border: 2px solid black;'");
              WebClient.print(" type='button'");
              WebClient.println(" value='gr&uuml;n'");
              WebClient.println(" onClick=\"location.href='GruenAus'\">");
              WebClient.println("</td><tr>");
            }

            // grüne LED ist ausgeschaltet -> weißer Hintergrund
            else 
            {
              WebClient.print("<td><input style='background-color:white;");
              WebClient.print(" width:150px;height:150px; cursor:pointer;");
              WebClient.print(" font-size:14pt;");
              WebClient.print(" border-radius:50%;border: 2px solid black;'");
              WebClient.print(" type='button'");
              WebClient.println(" value='gr&uuml;n'");
              WebClient.println(" onClick=\"location.href='GruenEin'\">");
              WebClient.println("</td><tr>");
            }

            WebClient.println("</table>");
            WebClient.println("<hr />");

            // IPs anzeigen
            WebClient.print("<b>Eigene IP: ");
            WebClient.print(WebClient.remoteIP());
            WebClient.print("</b>");
            WebClient.print("<br><b>IP Arduino: ");
            WebClient.print(WiFi.localIP());
            WebClient.print("</b>");
            WebClient.println("</body>");
            WebClient.println("</html>");

            // HTTP-Antwort endet mit neuer Zeile
            WebClient.println();

            // Seite vollständig geladen -> loop verlassen
            break;
          }

          // wenn SchaltungLesen nicht leer ist -> Inhalt löschen
          else SchaltungLesen = "";
        }

        // bei einem anderen Zeichen als return (\r)
        // -> Zeichen dem String SchaltungLesen hinzufügen
        else if (Zeichen != '\r') SchaltungLesen += Zeichen;

        // indexOf überprüft, ob die Zeichenfolge
        // im String SchaltungLesen enthalten ist
        // der Zusatnd der jeweiligen LED (ein/aus) wird mit ! "umgedreht":
        // false->true, true->false
        if (SchaltungLesen.indexOf("RotEin") > 0) RotAn = !RotAn;
        if (SchaltungLesen.indexOf("RotAus") > 0) RotAn = !RotAn;
        if (SchaltungLesen.indexOf("GelbEin") > 0) GelbAn = !GelbAn;
        if (SchaltungLesen.indexOf("GelbAus") > 0) GelbAn = !GelbAn;
        if (SchaltungLesen.indexOf("GruenEin") > 0) GruenAn = !GruenAn;
        if (SchaltungLesen.indexOf("GruenAus") > 0) GruenAn = !GruenAn;
      }
    }
    WebClient.stop();
  }

  // LEDs schalten
  if (RotAn) digitalWrite(ROT, HIGH);
  if (!RotAn) digitalWrite(ROT, LOW);
  if (GelbAn) digitalWrite(GELB, HIGH);
  if (!GelbAn) digitalWrite(GELB, LOW);
  if (GruenAn) digitalWrite(GRUEN, HIGH);
  if (!GruenAn) digitalWrite(GRUEN, LOW);  
}

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

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

#include "WiFiS3.h"

// Pins der LEDs

int ROT = 5;

int GELB = 6;

int GRUEN = 7;

// Schalter für den Zustand der LEDs (false->aus, true-> an

bool RotAn = false;

bool GelbAn = false;

bool GruenAn = false;

char Router[] = "Router_SSID";

char Passwort[] = "xxxxxxxx";

int status = WL_IDLE_STATUS;

WiFiServer WiFiServer(80);

WiFiClient WebClient = WiFiServer.accept();

void setup()

{

pinMode(ROT, OUTPUT);

pinMode(GELB, OUTPUT);

pinMode(GRUEN, OUTPUT);

Serial.begin(9600);

// auf serielle Verbindung warten

while (!Serial);

delay(1000);

while (status != WL_CONNECTED)

{

Serial.print("Warte 10 Sekunden auf die Verbindung ...");

status = WiFi.begin(Router, Passwort);

delay(10000);

}

Serial.println();

Serial.print("Verbunden mit ");

Serial.println(Router);

Serial.print("IP über DHCP: ");

Serial.println(WiFi.localIP());

WiFiServer.begin();

}

void loop()

{

// auf WebClienten warten ...

WebClient = WiFiServer.available();

if (WebClient)

{

String SchaltungLesen;

// solange der WebClient verbunden ist ...

while (WebClient.connected())

{

if (WebClient.available())

{

// Anforderung vom WebClienten lesen ...

char Zeichen = WebClient.read();

// return (\n) gesendet

if (Zeichen == '\n')

{

// wenn der String SchaltungLesen leer ist

if (SchaltungLesen == "")

{

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 " -> \"

// HTML-Seite aufbauen

WebClient.println("HTTP/1.1 200 OK");

WebClient.println("Content-type:text/html");

// Leerzeile zwingend erforderlich

WebClient.println();

// Gerüst der HTML-Seite:

WebClient.println("<!doctype html>");

WebClient.println("<html>");

WebClient.println("<body>");

// h2 -> Überschrift, hr horizontale Linie

WebClient.println("<h2>Ampel mit WiFi-Modul schalten</h2>");

WebClient.println("<hr>");

// table = Tabelle, tr = Tabelle Zeile, td = Tabelle Zelle

WebClient.println("<table><tr>");

// rote LED ist eingeschaltet -> roter Hintergrund

style = Stil des Buttons bestimmen:

background-color = Hintergrundfarbe, width/height = Breite/Höhe

cursor: pointer = Cursor als Hand darstellen,

border-radius: 50% = runder Button,

border = Rand des Buttons als 2 Pixel breite durchgezogene Linie (solid)

onclick: beim Klick auf den Button wird die URL RotAus übergeben,

sie wird später ausgewertet

if (RotAn)

{

WebClient.print("<td><input style='background-color:#FF6565;");

WebClient.print(" width:150px;height:150px; cursor:pointer;");

WebClient.print(" font-size:14pt;");

WebClient.print(" border-radius:50%;border: 2px solid black;'");

WebClient.print(" type='button'");

WebClient.println(" value='rot'");

WebClient.println(" onClick=\"location.href='RotAus'\">");

WebClient.println("</td><tr>");

}

// rote LED ist ausgeschaltet -> weißer Hintergrund

else

{

WebClient.print("<td><input style='background-color:white;");

WebClient.print(" width:150px;height:150px; cursor:pointer;");

WebClient.print(" font-size:14pt;");

WebClient.print(" border-radius:50%;border: 2px solid black;'");

WebClient.print(" type='button'");

WebClient.println(" value='rot'");

WebClient.println(" onClick=\"location.href='RotEin'\">");

WebClient.println("</td><tr>");

}

// gelbe LED ist eingeschaltet -> gelber Hintergrund

if (GelbAn)

{

WebClient.print("<td><input style='background-color:#FFFB65;");

WebClient.print(" width:150px;height:150px; cursor:pointer;");

WebClient.print(" font-size:14pt;");

WebClient.print(" border-radius:50%;border: 2px solid black;'");

WebClient.print(" type='button'");

WebClient.println(" value='gelb'");

WebClient.println(" onClick=\"location.href='GelbAus'\">");

WebClient.println("</td><tr>");

}

// gelbe LED ist ausgeschaltet -> weißer Hintergrund

else

{

WebClient.print("<td><input style='background-color:white;");

WebClient.print(" width:150px;height:150px; cursor:pointer;");

WebClient.print(" font-size:14pt;");

WebClient.print(" border-radius:50%;border: 2px solid black;'");

WebClient.print(" type='button'");

WebClient.println(" value='gelb'");

WebClient.println(" onClick=\"location.href='GelbEin'\">");

WebClient.println("</td><tr>");

}

// grüne LED ist eingeschaltet -> grüner Hintergrund

if (GruenAn)

{

WebClient.print("<td><input style='background-color:green;");

WebClient.print(" width:150px;height:150px; cursor:pointer;");

WebClient.print(" font-size:14pt;");

WebClient.print(" border-radius:50%;border: 2px solid black;'");

WebClient.print(" type='button'");

WebClient.println(" value='grün'");

WebClient.println(" onClick=\"location.href='GruenAus'\">");

WebClient.println("</td><tr>");

}

// grüne LED ist ausgeschaltet -> weißer Hintergrund

else

{

WebClient.print("<td><input style='background-color:white;");

WebClient.print(" width:150px;height:150px; cursor:pointer;");

WebClient.print(" font-size:14pt;");

WebClient.print(" border-radius:50%;border: 2px solid black;'");

WebClient.print(" type='button'");

WebClient.println(" value='grün'");

WebClient.println(" onClick=\"location.href='GruenEin'\">");

WebClient.println("</td><tr>");

}

WebClient.println("</table>");

WebClient.println("<hr />");

// IPs anzeigen

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

WebClient.print(WebClient.remoteIP());

WebClient.print("</b>");

WebClient.print("<br><b>IP Arduino: ");

WebClient.print(WiFi.localIP());

WebClient.print("</b>");

WebClient.println("</body>");

WebClient.println("</html>");

// HTTP-Antwort endet mit neuer Zeile

WebClient.println();

// Seite vollständig geladen -> loop verlassen

break;

}

// wenn SchaltungLesen nicht leer ist -> Inhalt löschen

else SchaltungLesen = "";

}

// bei einem anderen Zeichen als return (\r)

// -> Zeichen dem String SchaltungLesen hinzufügen

else if (Zeichen != '\r') SchaltungLesen += Zeichen;

// indexOf überprüft, ob die Zeichenfolge

// im String SchaltungLesen enthalten ist

// der Zusatnd der jeweiligen LED (ein/aus) wird mit ! "umgedreht":

// false->true, true->false

if (SchaltungLesen.indexOf("RotEin") > 0) RotAn = !RotAn;

if (SchaltungLesen.indexOf("RotAus") > 0) RotAn = !RotAn;

if (SchaltungLesen.indexOf("GelbEin") > 0) GelbAn = !GelbAn;

if (SchaltungLesen.indexOf("GelbAus") > 0) GelbAn = !GelbAn;

if (SchaltungLesen.indexOf("GruenEin") > 0) GruenAn = !GruenAn;

if (SchaltungLesen.indexOf("GruenAus") > 0) GruenAn = !GruenAn;

}

WebClient.stop();

}

// LEDs schalten

if (RotAn) digitalWrite(ROT, HIGH);

if (!RotAn) digitalWrite(ROT, LOW);

if (GelbAn) digitalWrite(GELB, HIGH);

if (!GelbAn) digitalWrite(GELB, LOW);

if (GruenAn) digitalWrite(GRUEN, HIGH);

if (!GruenAn) digitalWrite(GRUEN, LOW);

}

Letzte Aktualisierung: Aug. 7, 2026 @ 11:15