EsP8266 DHT11 automatisch aktualisieren

Hallo,

ich brauche eure Hilfe!

ich möchte gerne auf meiner Webseite DHT11 - Temperatur Automatisch aktualisiert wird
Könnt ihr mir bitte sagen was ich am Code ändern muss mit das aktualisiert adressiert wird?:wink:

// Including the ESP8266 WiFi library
#include <ESP8266WiFi.h>
#include "DHT.h"

// Uncomment one of the lines below for whatever DHT sensor type you're using!
#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
//#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

// Replace with your network details

const char* ssid = "--";
const char* password = "--";

// Web Server on port 80
WiFiServer server(80);

// DHT Sensor
const int DHTPin = 5;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);

// Temporary variables
static char celsiusTemp[7];
static char fahrenheitTemp[7];
static char humidityTemp[7];

// only runs once on boot
void setup() {
  // Initializing serial port for debugging purposes
  Serial.begin(115200);
  delay(10);

  dht.begin();
  
  // Connecting to WiFi network
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  
  // Starting the web server
  server.begin();
  Serial.println("Web server running. Waiting for the ESP IP...");
  delay(10000);
  
  // Printing the ESP IP address
  Serial.println(WiFi.localIP());
}

// runs over and over again
void loop() {
  // Listenning for new clients
  WiFiClient client = server.available();
  
  if (client) {
    Serial.println("New client");
    // bolean to locate when the http request ends
    boolean blank_line = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        
        if (c == '\n' && blank_line) {
            // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
            float h = dht.readHumidity();
            // Read temperature as Celsius (the default)
            float t = dht.readTemperature();
            // Read temperature as Fahrenheit (isFahrenheit = true)
            float f = dht.readTemperature(true);
            // Check if any reads failed and exit early (to try again).
            if (isnan(h) || isnan(t) || isnan(f)) {
              Serial.println("Failed to read from DHT sensor!");
              strcpy(celsiusTemp,"Failed");
              strcpy(fahrenheitTemp, "Failed");
              strcpy(humidityTemp, "Failed");         
            }
            else{
              // Computes temperature values in Celsius + Fahrenheit and Humidity
              float hic = dht.computeHeatIndex(t, h, false);       
              dtostrf(hic, 6, 2, celsiusTemp);             
              float hif = dht.computeHeatIndex(f, h);
              dtostrf(hif, 6, 2, fahrenheitTemp);         
              dtostrf(h, 6, 2, humidityTemp);
              // You can delete the following Serial.print's, it's just for debugging purposes
              Serial.print("Humidity: ");
              Serial.print(h);
              Serial.print(" %\t Temperature: ");
              Serial.print(t);
              Serial.print(" *C ");
              Serial.print(f);
              Serial.print(" *F\t Heat index: ");
              Serial.print(hic);
              Serial.print(" *C ");
              Serial.print(hif);
              Serial.print(" *F");
              Serial.print("Humidity: ");
              Serial.print(h);
              Serial.print(" %\t Temperature: ");
              Serial.print(t);
              Serial.print(" *C ");
              Serial.print(f);
              Serial.print(" *F\t Heat index: ");
              Serial.print(hic);
              Serial.print(" *C ");
              Serial.print(hif);
              Serial.println(" *F");
            }
            client.println("HTTP/1.1 200 OK");
            client.println("Content-Type: text/html");
            client.println("Connection: close");
            client.println();
            // your actual web page that displays temperature and humidity
            client.println("<!DOCTYPE HTML>");
            client.println("<html>");

            client.println(celsiusTemp);
           client.println("*C<h1></h1> ");
           
            //client.println("%</h1><h1>");
            client.println("</body></html>");     
            break;
        }
        if (c == '\n') {
          // when starts reading a new line
          blank_line = true;
        }
        else if (c != '\r') {
          // when finds a character on the current line
          blank_line = false;
        }
      }
    }  
    // closing the client connection
    delay(1);
    client.stop();
    Serial.println("Client disconnected.");
  }
}

Du musst das in erster Linie in Deinem HTML-Code erreichen. Dazu hast Du folgende Möglichkeiten:

  1. Javascript-Timer einbauen, der eine AJAX- oder Fetch- Funktion zum aktualisieren aufruft
  2. die Verbindung auf Websockets umstellen, damit der ESP die Werte pushen kann (komplex)
  3. ganz brutal aber am einfachsten die Website im Browser alle Sekunden neu lesen lassen mit refresh

Gruß Tommy

Tommy56:
3. ganz brutal aber am einfachsten die Website im Browser alle Sekunden neu lesen lassen mit refresh

Da ist überhaupt nichts Brutales dabei. Das ist im Gegenteil die Methode der Wahl. Man muss sich nicht die Bohne mit irgendeinem Scriptscheiß herumschlagen.

Gruß

Gregor

Wenn man die anderen Methoden im Vergleich betrachtet, bei denen nur die jeweiligen Elemente geändert werden, dann ist das vergleichsweise brutal, immer wieder die ganze Seite neu zu laden, obwohl es nicht nötig ist.

Ich gebe zu, es ist die Methode, die die wenigsten Kenntnisse erfordert.

Gruß Tommy

Tommy56:
Ich gebe zu, es ist die Methode, die die wenigsten Kenntnisse erfordert.

Und die, die ich schon vor 20 Jahren eingesetzt habe

Tommy56:
Wenn man die anderen Methoden im Vergleich betrachtet, bei denen nur die jeweiligen Elemente geändert werden, dann ist das vergleichsweise brutal, immer wieder die ganze Seite neu zu laden, obwohl es nicht nötig ist.

So gesehen ist es wirklich brutal.

Tommy56:
Ich gebe zu, es ist die Methode, die die wenigsten Kenntnisse erfordert.

Hmja, manchmal ist mir blöd zumute :slight_smile:

Gruß

Gregor

@ElEspanol:

Klar, die anderen Varianten kamen später.

Aber stell Dir mal vor in der Website sind ca 200 Felder (es können auch mehr sein), in denen der Bearbeiter arbeitet. 3 Anzeigefelder sollen im 30 Sekundenabstand aktualisiert werden.
Was meinst Du, was der Dir sagt, wenn Du ihm alle 30 Sekunden die Website zum Neuladen unter den Fingern wegziehst.
Außerdem musst Du den Inhalt dabei erhalten, der darf aber nicht als gespeichert ins System eingehen.

Da aktualisiere ich doch lieber die 3 Felder per AJAX (Fetch kam später) und habe viel weniger Probleme.

Aber klar, für eine Miniwebsite mit 2 Feldern dürfte das keine Rolle spielen.
Meine Wertung ist auch unabhängig von dewr Größe und Komplexität zu verstehen.

Im Endeffekt muss das jeder für sich entscheiden. Deshalb die möglichst vollständige Info über die möglichen Vorgehensweisen.

Gruß Tommy

Ich kenne die Problematik, und du hast vollkommen recht. Heutzutage würde ich das auch nicht mehr so machen, wenn noch mehrere weitere Daten darzustellen sind. Ist halt noch als quick'n dirty so drin.

Klar und für kleine und einfache Seiten kann man es immer noch machen.

Gruß Tommy