DHT11 Messwerte werden vom ESP8266.WIFI auf der HTML-Seite nicht aktualisiert

Hallo Community,
ich habe bisher auch den Forumbeiträgen keine passende Lösung zu dem o.g.Problem gefunden. Obwohl es schon Einträge dazu gab.
Ich benutze einen ESP8266WiFi und habe dort an PIN 5 (D2) einen DHT11 angeschlossen. Der verwendete Sketch dazu wurde von Rui Santos erstellt.
Er funktioniert mittlerweilen.
Die Temperatur-und Luftwerte werden im seriellen Monitor auch richtig angezeigt und aktualisiert.
Leider werde diese Werte auf der WEB-Seite nach dem Starten einmal richtig angezeigt, bei der Aktualisierung kommen nur Fragezeichen etc. (Hirogliphen). Hat jemand von euch Technik-Heroen eine Idee warum, da mir nach 2 Tagen "Jugend forscht" die Luft ausgeht?
Ich würde gerne den "ESPAsyncWebServer" verwenden, da ich hier schon andere Geräte dran habe und die Tempereatur/Luftwerte später dazu kommen sollen.

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

// Import required libraries
#include <ESP8266WiFi.h>
//#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>


// Replace with your network credentials
const char* ssid = "*********";
const char* password = "********";

#define DHTPIN 5     // Digital pin D2 connected to the DHT sensor

#define DHTTYPE    DHT11     // DHT 11

DHT dht(DHTPIN, DHTTYPE);
// current temperature & humidity, updated in loop() 
float t = 0.0;
float h = 0.0;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String readDHTTemperature() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float t = dht.readTemperature(true);
  // Check if any reads failed and exit early (to try again).
  if (isnan(t)) {    
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}
String readDHTHumidity() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(h);
    return String(h);
  }
}

//Hier kommt der HTML _Teil

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">&percnt;</sup>
  </p>
</body>



<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 2000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>


</html>)rawliteral";
// Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return readDHTTemperature();
  }
  else if(var == "HUMIDITY"){
    return readDHTHumidity();
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(9600);

  dht.begin();
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTTemperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTHumidity().c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){
    // Read temperature as Celsius (the default)
    float newT = dht.readTemperature();
    // Read temperature as Fahrenheit (isFahrenheit = true)
    //float newT = dht.readTemperature(true);
    // if temperature read failed, don't change t value
    if (isnan(newT)) {
      Serial.println("Failed to read from DHT sensor!");
    }
    else {
      t = newT;
      Serial.println(t);
    }
    // Read Humidity
    float newH = dht.readHumidity();
    // if humidity read failed, don't change h value 
    if (isnan(newH)) {
      Serial.println("Failed to read from DHT sensor!");
    }
    else {
      h = newH;
      Serial.println(h);
    }
delay(2000);  
  }

Überprüfe mal deine Variablen, die du im Web übergeben möchtest.
Da scheint ein Fehler zu sein.
Mehr kann ich leider nicht sagen, da dein Sketch sehr unübersichtlich ist.

Noch ein Tipp:
Schau dir mal die Seiiten von Fips an, da findest du sehr viele hilfreiche Hinweise.

Danke für die schnelle Antwort. Ich habe auch schon auf der Seite von Fips geschnuppert, faszinierend. Aber hier war ich zu meinem Thema passen überfordert. Leider fehlt mir da doch das notwendige Tiefenwissen zur Lösung.
Der Sketch ist auch für mich unübersichtlich, zumal er ja nicht von mir erstellt wurde.
Bei den Variablen dachte ich es wären immer die gleichen und die würden nur zeitlich (bei mir zu Testzwecken nach 2 (Luft) bzw. 10 Sekunden (Temperatur) aktualisiert.
Dazu gab es es ja schon einige Einträge. Nirgends war aber was erlösendes zu finden..
Na dann bin ich hier wohl am Ende meiner so guten optimistischen Reise angelangt.
Danke dir trotzdem herzlich.

Dann solltest du doch einfach den Autor befragen.

Danke für den Tipp:

Bei https://randomnerdtutorials.com wo der Sketch von Rui Santos entstanden und auch gut beschrieben wurde:
([Detailbeschreibung]
(ESP32 DHT11/DHT22 Web Server using Arduino IDE | Random Nerd Tutorials)) bekomme ich leider keine Antwort.

Vielleicht hat in dem Forum doch noch jemand eine Idee/Hinweis was der Grund sein könnte.
im Browser sehe ich ja, das hier nur Hieroglyphen ankommen. Ich lege vorsichtshalber noch einen Screenshot nach dem Einschalten, dann nach dem Aktualisieren bei.


Versuche doch mal in der Serverübergabe:

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTTemperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTHumidity().c_str());
  });

die Variablen aus deiner loop(), t und h einzusetzen, anstatt erneut die Sensoren auszulesen.

Da ich mit dem AsyncWebServer und dem Sensor DHT11 nicht arbeite, habe ich keine anderen Tipps.

Edit:
Wobei dein Problem auch daran liegen kann, dass du einen anderen Controller (ESP8266) einsetzt, als der im Artikel vorgegebener (ESP32).

Hmm... Was macht die _P Variante von send jetzt genau?

Ist der Pointer von c_str() noch gültig wenn der Webserver für Daten verarbeitet?

so richtig eine Idee habe ich nicht.

Wenn ich den Sensor simuliere, bekomme ich die Werte wie vorgesehen aktualisiert:

Minimale Änderungen in dem eigenartigen Sketch:

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com
*********/

// Import required libraries
#include <ESP8266WiFi.h>
//#include "WiFi.h"
#include "ESPAsyncWebServer.h"
// #include <Adafruit_Sensor.h>        // bei verwendung enes simulators ersetzen
// #include <DHT.h>                    // bei verwendung enes simulators ersetzen
#include "dhtSimulation.h"

//#include <credentials.h>               // if you have an external file with your credentials you can use it - remove before upload

#ifndef STASSID                        // either use an external .h file containing STASSID and STAPSK - or 
#define STASSID "your-ssid"            // ... modify these line to your SSID
#define STAPSK  "your-password"        // ... and set your WIFI password
#endif

const char* ssid = STASSID;
const char* password = STAPSK;

#define DHTPIN 5             // Digital pin D2 connected to the DHT sensor

#define DHTTYPE    DHT11     // DHT 11

DHT dht(DHTPIN, DHTTYPE);
// current temperature & humidity, updated in loop()
float t = 0.0;
float h = 0.0;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String readDHTTemperature() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float t = dht.readTemperature(true);
  // Check if any reads failed and exit early (to try again).
  if (isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}
String readDHTHumidity() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  }
  else {
    Serial.println(h);
    return String(h);
  }
}

//Hier kommt der HTML _Teil

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
  <html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">&percnt;</sup>
  </p>
</body>

<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 2000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>

</html>)rawliteral";
// Replaces placeholder with DHT values

String processor(const String& var) {
  //Serial.println(var);
  if (var == "TEMPERATURE") {
    return readDHTTemperature();
  }
  else if (var == "HUMIDITY") {
    return readDHTHumidity();
  }
  return String();
}

void setup() {
  // Serial port for debugging purposes
  Serial.begin(115200);

  dht.begin();

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send_P(200, "text/plain", readDHTTemperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send_P(200, "text/plain", readDHTHumidity().c_str());
  });

  // Start server
  server.begin();
}

void loop() {
  // Read temperature as Celsius (the default)
  float newT = dht.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float newT = dht.readTemperature(true);
  // if temperature read failed, don't change t value
  if (isnan(newT)) {
    Serial.println("Failed to read from DHT sensor!");
  }
  else {
    t = newT;
    Serial.println(t);
  }
  // Read Humidity
  float newH = dht.readHumidity();
  // if humidity read failed, don't change h value
  if (isnan(newH)) {
    Serial.println("Failed to read from DHT sensor!");
  }
  else {
    h = newH;
    Serial.println(h);
  }
  delay(2000);
}
//

und ein tab dhtSimulator.h mit dieser Klasse:

/*
   noiasca DHT simulator
 */

#define DHT11 11

class DHT {
  public:
    DHT (int a, int b) {
      (void)a;
      (void)b;
    }

   void begin(){}

   float readHumidity() {
     return millis()/1000;
   }

   float readTemperature() {
    return 47.11;
   }
};

Achtung, ich habe die Serial Geschwindigkeit auf 115200 erhöht.

Probier das mal aus. Hast damit das gleiche Problem?

Danke für die schnelle Antwort. Wenn es der falsche Controller wäre, würde er dann nicht schon beim Erstladen der Page falsche Werte bringen?
Wo müsste ich denn die Variablen t u nd h hier ohne Loop "einbauen"

"P" wie Page vielleicht? Beim Pointer bin ich noch mehr überfragt. Sorry

Erschreckend wenn man Hilfe in der Community sucht und nicht die Codes kennt die man nutzt(kopiert)! So habe ich in der Vergangenheit aber mich an die Thematik mit kleinen Erfolgserlebnissen herangetastet.

Hi Noiasca,
Ich habe deinen Sketch ohne Simulator, also mit meinem DHT 11 ausprobiert.
Es ist das gleiche Ergebnis. Nur beim Erstladen kommt die richtige Anzeige. Danach leider nicht mehr.
Vorsichtshalber habe ich statt dem Chrome auch mit Safari und auf meinem iPhone mit dem gleichen Ergebnis getestet.

Könntest du mir vielleicht noch sagen, wo ich den "Simulator" in den Sketch einbauen muss, um es damit zu probieren.

Danke an Euch schonmal für die Tipps

Ich habe nicht geschrien "falscher Controller", es ist ein anderer und da muss im Sketch einiges angepasst werden.
K.A. ob du da auf alles geachtet hast.
Ein ESP8266 ist kein ESP32.

die Zeilen "im zweiten Tab" SIND der Simulator.
in der IDE 1.8 sieht dass dan so aus:

wenn das bei dir kompiliert aber nicht richtig ausgeführt wird, dann hat es da eher etwas mit deinem Browser. Mach da mal einen lesbaren Screenshot inklusive der Get Requests.

Liest den Text aus dem Programmspeicher PROGMEM.

Ich habe weder einen ESP8266 noch einen DHT11 Sensor, weshalb ich meinen ESP32 und random für Zufallswerte verwende. Meine Passwörter habe ich in der Datei zugangsdaten.h versteckt. Das Programm sollte unverändert auf einem ESP8266 lauffähig sein, da ich die Bibliothekseinbindung am Anfang unterscheide.

Testprogramm
/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

#include "zugangsdaten.h"
// Import required libraries
#ifdef ARDUINO_ARCH_ESP8266  // libraries if you compile for a ESP8266
#include <ESP8266WiFi.h>
#endif
#ifdef ARDUINO_ARCH_ESP32  // libraries if you compile for a ESP32
#include <WiFi.h>
#endif
#include "ESPAsyncWebServer.h"
//#include <Adafruit_Sensor.h>
//#include <DHT.h>


// Replace with your network credentials
const char *ssid = STA_SSID;
const char *password = STA_PASSWORD;

#define DHTPIN 5  // Digital pin D2 connected to the DHT sensor

#define DHTTYPE DHT11  // DHT 11

//DHT dht(DHTPIN, DHTTYPE);
// current temperature & humidity, updated in loop()
float t = 0.0;
float h = 0.0;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String readDHTTemperature() {
  float t = random(200, 300) / 10.0;  //dht.readTemperature();
  // Check if any reads failed and exit early (to try again).
  if (isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  } else {
    Serial.print(F("Temperatur: "));
    Serial.println(t);
    return String(t);
  }
}
String readDHTHumidity() {
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = random(700, 800) / 10.0;  //dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Failed to read from DHT sensor!");
    return "--";
  } else {
    Serial.print(F("Feuchte: "));
    Serial.println(h);
    return String(h);
  }
}

//Hier kommt der HTML _Teil

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">&percnt;</sup>
  </p>

<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 2000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>
</body>
</html>)rawliteral";

// Replaces placeholder with DHT values
String processor(const String &var) {
  //Serial.println(var);
  if (var == "TEMPERATURE") {
    return readDHTTemperature();
  } else if (var == "HUMIDITY") {
    return readDHTHumidity();
  }
  return String();
}

void setup() {
  // Serial port for debugging purposes
  Serial.begin(9600);

  //dht.begin();

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/plain", readDHTTemperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/plain", readDHTHumidity().c_str());
  });

  // Start server
  server.begin();
}

void loop() {
  delay(1);
}

Bitte laß das Programm mal bei Dir unverändert laufen, ob die Zufallswerte richtig angezeigt werden. Dann kannst Du den Sensor schrittweise wieder aktivieren.

Die Temperatur wird alle 2 Sekunden, die Feuchte alle 10 Sekunden aktualisiert.

@mahowe Kannst du einmal testweise deinen Code von

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTTemperature().c_str());
  });

in das ändern:

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    auto s = readDHTTemperature();
    request->send_P(200, "text/plain", s.c_str());
  });

Wo hast du denn die Variable "s" her ?
Oder meinst du "t" ?

Frei gewählt und in der 2. Zeile definiert.

Wie kommst du auf t?

Das sollte schon passen.

@agmue
Ja sorry, das hatte ich überlesen.
Und das "t" hat der TO in der loop mit der Temperatur gefüllt.

Danke für den "Simulator". Jetzt habe ich auch so eine Möglichkeit "begriffen".
Ich habe leider auch mit dem Simulator das gleiche Problem. Mit verschiedenen Browsern.
Ich habe jetzt mal die 2 Screenshots vom Chrome-Browser mit Inhalt beim Laden und der Aktualisierung beigelegt. kannst du sie lesen und damit was anfangen?


Bei der Bitte nach den "GET Requests" war ich wieder überfordert.
Peinlich