Ampel mit UNO R4 WiFi schalten – Projekte für Arduino und ESP32-Mikrocontroller

Inhalt

7 Minuten

Ziel des Projekts

Das Programm „baut“ eine Webseite, die mit der Wifi-Funktion des UNO R4 WiFi angezeigt wird. Ein Klick auf einen der Buttons schaltet die dazugehörige LED.

So sieht das Webformular aus:

Board installieren

Zunächst musst du über den Boardverwalter das ⇒Board installieren.

Der Schaltplan

(Fahre mit der Maus über das Bild, um die Bezeichnungen der Bauteile zu sehen)

Das Programm

Bibliotheken und Variable

Binde die benötigte Bibliothek ein und definiere die Variablen:

#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[] = "FRITZ!Box 7590 LB";
char Passwort[] = "anea1246";

// Status der Verbindung
int status = WL_IDLE_STATUS;

WiFiServer WiFiServer(80);

WiFiClient WebClient = WiFiServer.accept();

#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[] = "FRITZ!Box 7590 LB";

char Passwort[] = "anea1246";

// Status der Verbindung

int status = WL_IDLE_STATUS;

WiFiServer WiFiServer(80);

WiFiClient WebClient = WiFiServer.accept();

Der setup-Teil

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

}

Im Seriellen Monitor wird die verwendete IP-Adresse angezeigt. Diese musst du in einem Browser deiner Wahl eingeben.

Der loop-Teil

Der Server teilt dem Klienten (dem Webbrowser) mit, ob die Seite erfolgreich gesendet wurde. Der Inhaltstyp ist text/html. !doctype teilt dem Browser mit welchen Dokumententyp er öffnen soll.
Die in in spitzen Klammern stehenden Anweisungen (html/body) öffnen die Webseite, ein vorangestellter / schließt die Seite.
Innerhalb von body wird der Inhalt platziert.

HTTP/1.1 200 OK
Content-type:text/html
<!doctype html>"
<html>
<body>
. . . 
. . .
</html>
</body>

HTTP/1.1 200 OK

Content-type:text/html

<!doctype html>"

<html>

<body>

. . .

</html>

</body>

Im Programm müssen die Anweisungen mit print oder println übermittelt werden.

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

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

}

Ziel des Projekts

Board installieren

Der Schaltplan

Das Programm

Bibliotheken und Variable

Der setup-Teil

Der loop-Teil

Ähnliche Projekte: