Messwerte des DHT-Sensors mit Arduino WiFi im Webbrowser anzeigen (Lösung) – Projekte für Arduino und ESP32-Mikrocontroller

#ifdef ARDUINO_UNOR4_WIFI
  #include "WiFiS3.h"
#endif

#ifdef ARDUINO_ARCH_SAMD
  #include "WiFiNINA.h"
#endif

#include "NTP.h"
#include "DHT.h"

// Router: Name des Routers
// Passwort: WLAN-Passwort
char Router[] = "Repeater-Buero";
char Passwort[] = "anea1246";

// DHT22
#define DHTTYPE DHT22
#define DHTPIN 8

// Sensor zuordnen
DHT dht(DHTPIN, DHTTYPE);

WiFiServer WiFiServer(80);
WiFiClient client = WiFiServer.available();

byte Zaehler = 0;

// maximale Anzahl gespeicherter Werte
const byte AnzahlDaten = 6;

// Arrays für die Speicherung
String gespeicherteTemperatur[AnzahlDaten];
String gespeichertesDatum[AnzahlDaten];
String gespeicherteLuftfeuchtigkeit[AnzahlDaten];

WiFiUDP wifiUdp;
NTP ntp(wifiUdp);

bool letzterWert = true;

void setup() 
{
  // dht starten
  dht.begin();

  Serial.begin(9600);
  while (!Serial);
  delay(1000);

  // WiFi starten
  WiFi.begin(Router, Passwort);
  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(200);
    Serial.print(".");
  }
  
  WiFiServer.begin();

  // Sommerzeit/Normalzeit
  ntp.ruleDST("CEST", Last, Sun, Mar, 2, 120); 
  ntp.ruleSTD("CET", Last, Sun, Oct, 3, 60); 

  // ntp starten Zeit aktualisieren
  ntp.begin();
  ntp.update();

  // Wochentag
  switch (ntp.weekDay()) 
  {
    case 0:
      Serial.print("Sonntag");
      break;
    case 1:
      Serial.print("Montag");
      break;
    case 2:
      Serial.print("Dienstag");
      break;
    case 3:
      Serial.print("Mittwoch");
      break;
    case 4:
      Serial.print("Donnerstag");
      break;
    case 5:
      Serial.print("Freitag");
      break;
    case 6:
      Serial.print("Samstag");
      break;
  }
  Serial.print(", ");
  Serial.println(ntp.formattedTime("%d. %B %Y %T Uhr"));

  Serial.print("IP Adresse Arduino: ");
  Serial.println(WiFi.localIP());
}

void loop() 
{
  float Temperatur;
  float Luftfeuchtigkeit;
  String Nummer;
  String AnzeigeTemperatur;
  String AnzeigeLuftfeuchtigkeit;
  String aktuelleZeit = "";

  client = WiFiServer.available();
  if (client) 
  {
    String SchaltungLesen = "";
    while (client.connected()) 
    {
      if (client.available()) 
      {
        char Zeichen = client.read();

        if (Zeichen == '\n') 
        {
          if (SchaltungLesen.length() == 0) 
          {
            // HTTP-Anforderung senden
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html");

            // Leerzeile zwingend erforderlich
            client.println();

            /*
              HTML-Seite aufbauen
              die folgenden Anweisungen müssen mit print oder println gesendet werden
              println "verschönert" den Quelltext
              " muss mit \" maskiert werden
            */
            client.println("<!doctype html>");
            client.println("<html>");
            client.println("<body>");

            // alle 60 Sekunden aktualisieren mit meta-Tag
            client.println("<meta http-equiv=\"refresh\" content=\"60\">");

            client.println("<h1> Temperatur und Luftfeuchtigkeit messen</h1>");
            client.println("<hr />");

            client.print("<h2>Letzte Messung: ");
            ntp.update();

            // Wochentag Datim zusammensetzen
            switch (ntp.weekDay()) 
            {
              case 0:
                aktuelleZeit += "Sonntag";
                break;
              case 1:
                aktuelleZeit += "Montag";
                break;
              case 2:
                aktuelleZeit += "Dienstag";
                break;
              case 3:
                aktuelleZeit += "Mittwoch";
                break;
              case 4:
                aktuelleZeit += "Donnerstag";
                break;
              case 5:
                aktuelleZeit += "Freitag";
                break;
              case 6:
                aktuelleZeit += "Samstag";
                break;
            }
            aktuelleZeit += ", ";

            aktuelleZeit += ntp.formattedTime("%d.%m.%Y Uhrzeit: %T");
            client.println(aktuelleZeit);
            client.println("</h2>");
            client.println("<hr />");

            // Daten lesen
            AnzeigeTemperatur = String(dht.readTemperature());
            AnzeigeTemperatur.replace(".", ",");

            AnzeigeLuftfeuchtigkeit = String(dht.readHumidity());
            AnzeigeLuftfeuchtigkeit.replace(".", ",");

            client.print("<b>Temperatur: </b>");
            client.println(AnzeigeTemperatur + " &deg;C");
            client.println("<br>");

            client.print("<b>Luftfeuchtigkeit: </b>");
            client.println(AnzeigeLuftfeuchtigkeit + " %<hr>");
            client.println("<form>");

            // Datum speichern
            gespeichertesDatum[Zaehler] = aktuelleZeit;

            // Temperatur speichern
            gespeicherteTemperatur[Zaehler] = AnzeigeTemperatur;

            // Luftfeuchtigkeit speichern
            gespeicherteLuftfeuchtigkeit[Zaehler] = AnzeigeLuftfeuchtigkeit;

            client.println("<b>Gespeicherte Werte:<br></b>");

            // gespeicherte Daten anzeigen
            for (int i = 0; i <= Zaehler; i++) 
            {
              client.println(String(i + 1) + ": ");
              client.println(gespeichertesDatum[i]);
              client.print(" | Temperatur: -> ");
              client.println(gespeicherteTemperatur[i]);
              client.print(" &deg;C");
              client.print(" | Luftfeuchtigkeit: -> ");
              client.println(gespeicherteLuftfeuchtigkeit[Zaehler]);
              client.println("%");
              client.println("<br>");
            }
            client.println("<hr />");

            // Button formatieren
            client.print("<input style=\"font-size:16pt; font-weight:bold;");
            client.print("background-color:#55A96B;");
            client.print("display:block; cursor:pointer;\"type=\"button\"");
            client.println(" onClick=\"location.href='WiFi.localIP()'\" value=\"aktualisieren\">");
            client.println("</form>");
            client.println("<hr />");

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

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

            // Seite vollständig geladen -> loop verlassen
            break;
          } 
          else 
          {
            SchaltungLesen = "";
          }
        }

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

    client.stop();

    // Zaehler erhöhen und bei > 6 zurücksetzen
    if (Zaehler < AnzahlDaten && letzterWert) Zaehler ++;
    letzterWert = !letzterWert;
    if (Zaehler >= AnzahlDaten) Zaehler = 0;
  }
}

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

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

#ifdef ARDUINO_UNOR4_WIFI

#include "WiFiS3.h"

#endif

#ifdef ARDUINO_ARCH_SAMD

#include "WiFiNINA.h"

#endif

#include "NTP.h"

#include "DHT.h"

// Router: Name des Routers

// Passwort: WLAN-Passwort

char Router[] = "Repeater-Buero";

char Passwort[] = "anea1246";

// DHT22

#define DHTTYPE DHT22

#define DHTPIN 8

// Sensor zuordnen

DHT dht(DHTPIN, DHTTYPE);

WiFiServer WiFiServer(80);

WiFiClient client = WiFiServer.available();

byte Zaehler = 0;

// maximale Anzahl gespeicherter Werte

const byte AnzahlDaten = 6;

// Arrays für die Speicherung

String gespeicherteTemperatur[AnzahlDaten];

String gespeichertesDatum[AnzahlDaten];

String gespeicherteLuftfeuchtigkeit[AnzahlDaten];

WiFiUDP wifiUdp;

NTP ntp(wifiUdp);

bool letzterWert = true;

void setup()

{

// dht starten

dht.begin();

Serial.begin(9600);

while (!Serial);

delay(1000);

// WiFi starten

WiFi.begin(Router, Passwort);

while (WiFi.status() != WL_CONNECTED)

{

delay(200);

Serial.print(".");

}

WiFiServer.begin();

// Sommerzeit/Normalzeit

ntp.ruleDST("CEST", Last, Sun, Mar, 2, 120);

ntp.ruleSTD("CET", Last, Sun, Oct, 3, 60);

// ntp starten Zeit aktualisieren

ntp.begin();

ntp.update();

// Wochentag

switch (ntp.weekDay())

{

case 0:

Serial.print("Sonntag");

break;

case 1:

Serial.print("Montag");

break;

case 2:

Serial.print("Dienstag");

break;

case 3:

Serial.print("Mittwoch");

break;

case 4:

Serial.print("Donnerstag");

break;

case 5:

Serial.print("Freitag");

break;

case 6:

Serial.print("Samstag");

break;

}

Serial.print(", ");

Serial.println(ntp.formattedTime("%d. %B %Y %T Uhr"));

Serial.print("IP Adresse Arduino: ");

Serial.println(WiFi.localIP());

}

void loop()

{

float Temperatur;

float Luftfeuchtigkeit;

String Nummer;

String AnzeigeTemperatur;

String AnzeigeLuftfeuchtigkeit;

String aktuelleZeit = "";

client = WiFiServer.available();

if (client)

{

String SchaltungLesen = "";

while (client.connected())

{

if (client.available())

{

char Zeichen = client.read();

if (Zeichen == '\n')

{

if (SchaltungLesen.length() == 0)

{

// HTTP-Anforderung senden

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

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

// Leerzeile zwingend erforderlich

client.println();

HTML-Seite aufbauen

die folgenden Anweisungen müssen mit print oder println gesendet werden

println "verschönert" den Quelltext

" muss mit \" maskiert werden

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

client.println("<html>");

client.println("<body>");

// alle 60 Sekunden aktualisieren mit meta-Tag

client.println("<meta http-equiv=\"refresh\" content=\"60\">");

client.println("<h1> Temperatur und Luftfeuchtigkeit messen</h1>");

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

client.print("<h2>Letzte Messung: ");

ntp.update();

// Wochentag Datim zusammensetzen

switch (ntp.weekDay())

{

case 0:

aktuelleZeit += "Sonntag";

break;

case 1:

aktuelleZeit += "Montag";

break;

case 2:

aktuelleZeit += "Dienstag";

break;

case 3:

aktuelleZeit += "Mittwoch";

break;

case 4:

aktuelleZeit += "Donnerstag";

break;

case 5:

aktuelleZeit += "Freitag";

break;

case 6:

aktuelleZeit += "Samstag";

break;

}

aktuelleZeit += ", ";

aktuelleZeit += ntp.formattedTime("%d.%m.%Y Uhrzeit: %T");

client.println(aktuelleZeit);

client.println("</h2>");

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

// Daten lesen

AnzeigeTemperatur = String(dht.readTemperature());

AnzeigeTemperatur.replace(".", ",");

AnzeigeLuftfeuchtigkeit = String(dht.readHumidity());

AnzeigeLuftfeuchtigkeit.replace(".", ",");

client.print("<b>Temperatur: </b>");

client.println(AnzeigeTemperatur + " °C");

client.println("<br>");

client.print("<b>Luftfeuchtigkeit: </b>");

client.println(AnzeigeLuftfeuchtigkeit + " %<hr>");

client.println("<form>");

// Datum speichern

gespeichertesDatum[Zaehler] = aktuelleZeit;

// Temperatur speichern

gespeicherteTemperatur[Zaehler] = AnzeigeTemperatur;

// Luftfeuchtigkeit speichern

gespeicherteLuftfeuchtigkeit[Zaehler] = AnzeigeLuftfeuchtigkeit;

client.println("<b>Gespeicherte Werte:<br></b>");

// gespeicherte Daten anzeigen

for (int i = 0; i <= Zaehler; i++)

{

client.println(String(i + 1) + ": ");

client.println(gespeichertesDatum[i]);

client.print(" | Temperatur: -> ");

client.println(gespeicherteTemperatur[i]);

client.print(" °C");

client.print(" | Luftfeuchtigkeit: -> ");

client.println(gespeicherteLuftfeuchtigkeit[Zaehler]);

client.println("%");

client.println("<br>");

}

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

// Button formatieren

client.print("<input style=\"font-size:16pt; font-weight:bold;");

client.print("background-color:#55A96B;");

client.print("display:block; cursor:pointer;\"type=\"button\"");

client.println(" onClick=\"location.href='WiFi.localIP()'\" value=\"aktualisieren\">");

client.println("</form>");

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

// IPs anzeigen

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

client.print(client.remoteIP());

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

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

client.print(WiFi.localIP());

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

client.println("</b>");

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

client.print("</html>");

// HTTP-Antwort endet mit neuer Zeile

client.println();

// Seite vollständig geladen -> loop verlassen

break;

}

else

{

SchaltungLesen = "";

}

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

// -> Zeichen dem String SchaltungLesen hinzufügen

else if (Zeichen != '\r')

{

SchaltungLesen += Zeichen;

}

client.stop();

// Zaehler erhöhen und bei > 6 zurücksetzen

if (Zaehler < AnzahlDaten && letzterWert) Zaehler ++;

letzterWert = !letzterWert;

if (Zaehler >= AnzahlDaten) Zaehler = 0;

}

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