Kigtdert / Kigtdert-robot

esp32/arduino robot project
1 stars 0 forks source link

Webserver #20

Open Kigtdert opened 1 month ago

Kigtdert commented 1 month ago
Kigtdert commented 4 weeks ago

script pro aktualizaci dat: Chcete-li aktualizovat hodnoty ukazatelů (gauges) každých 5 sekund pomocí dat ze senzoru DHT11 na pinu 12, je třeba upravit jak část HTML/JavaScript, tak i serverovou část na ESP32, aby poskytovala aktuální data ze senzoru DHT11. Zde je postup, jak toho dosáhnout:

Krok 1: Přidání kódu pro čtení DHT11 na ESP32

Nejprve přidejte knihovnu DHT11 a inicializujte senzor:

#include "DHT.h"

#define DHTPIN 12      // Pin, kde je připojen DHT11
#define DHTTYPE DHT11  // Typ senzoru

DHT dht(DHTPIN, DHTTYPE);

float temperature = 0.0;
float humidity = 0.0;

void setup() {
  Serial.begin(115200);
  dht.begin();
  // Další inicializační kód...
}

Krok 2: Přidání funkce pro získání dat ze senzoru

Přidejte funkci pro čtení dat ze senzoru a aktualizaci globálních proměnných temperature a humidity:

void readDHT11() {
  humidity = dht.readHumidity();
  temperature = dht.readTemperature();

  // Check if any reads failed and exit early (to try again).
  if (isnan(humidity) || isnan(temperature)) {
    Serial.println("Failed to read from DHT sensor!");
    return;
  }
}

Krok 3: Vytvoření HTTP handleru pro poskytování dat

Přidejte HTTP handler, který bude poskytovat aktuální hodnoty ze senzoru ve formátu JSON:

static esp_err_t dht_handler(httpd_req_t *req) {
  char json_response[64];
  snprintf(json_response, sizeof(json_response), "{\"temperature\":%.2f,\"humidity\":%.2f}", temperature, humidity);

  httpd_resp_set_type(req, "application/json");
  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
  return httpd_resp_send(req, json_response, strlen(json_response));
}

Poté registrujte tento nový URI handler ve funkci startCameraServer:

void startCameraServer() {
    // ... existující kód ...

    httpd_uri_t dht_uri = {
        .uri       = "/dht",
        .method    = HTTP_GET,
        .handler   = dht_handler,
        .user_ctx  = NULL
    };

    if (httpd_start(&camera_httpd, &config) == ESP_OK) {
        httpd_register_uri_handler(camera_httpd, &index_uri);
        httpd_register_uri_handler(camera_httpd, &cmd_uri);
        httpd_register_uri_handler(camera_httpd, &status_uri);
        httpd_register_uri_handler(camera_httpd, &dht_uri);  // Nový URI handler
    }

    // ... existující kód ...
}

Krok 4: Aktualizace HTML/JavaScript kódu pro periodické načítání dat

Přidejte JavaScript kód pro periodické načítání dat z /dht endpointu a aktualizaci ukazatelů (gauges):

<script>
window.onload = function() {
    document.getElementById("camstream").src = window.location.origin + ":81/stream";
    updateGauges();
};

function updateGauges() {
    fetch('/dht')
        .then(response => response.json())
        .then(data => {
            drawGauge(data.humidity);
            drawGauge1(data.temperature);
            // Zde můžete přidat i další ukazatele, např. drawGauge2 pro napětí baterie
        })
        .catch(error => console.error('Error fetching DHT data:', error));

    setTimeout(updateGauges, 5000); // Aktualizovat každých 5 sekund
}
</script>

Krok 5: Přidání periodického čtení dat ze senzoru ve funkci loop

Ujistěte se, že data ze senzoru DHT11 jsou pravidelně aktualizována:

void loop() {
  readDHT11();
  delay(5000);  // Číst data každých 5 sekund
}

Tímto způsobem bude váš ESP32 kamerový webserver pravidelně aktualizovat hodnoty ukazatelů pomocí dat ze senzoru DHT11.