ESP Webserver

Post here about your Arduino projects, get help - for Adafruit customers!

Moderators: adafruit_support_bill, adafruit

Please be positive and constructive with your questions and comments.
Locked
User avatar
adkissenkoetter
 
Posts: 1
Joined: Thu Jun 30, 2022 4:48 am

ESP Webserver

Post by adkissenkoetter »

Hallo,

ich arbeite zurzeit an einer kleinen Wetterstation mit dem ESP 8266 D1 mini.

Ich habe momentan einen Sender (es werden dann aber mehr) und einen Empfänger.

Das Master/Slave-Prinzip funktioniert gut und die Messwerte der Temperatursensoren werden zum Schluss auf einem Webserver angezeigt, so weit so gut.

Mir ist nur aufgefallen, dass das, was als Letztes empfangen wurde, nicht gespeichert wird. Besser gesagt, dass mein Webserver mir keine Werte anzeigen kann, wenn ich die Seite neu aktualisieren tue oder wenn sie zum ersten Mal aufgerufen wird, da theoretisch der µController immer arbeitet, habe ich mir gedacht, dass die Werte da sein sollten.

Mein Sender liefert mir die Werte alle 2 Minuten und dann geht er schlafen.
Über den USB-Port kann ich sehen, dass alles empfangen wird und funktioniert.

Ich habe die Webseite nicht immer offen, aber ich möchte, wenn ich sie aufrufe, dass die letzten Messwerten, die empfangen wurden, mir angezeigt werden.

Da habe ich noch keine Lösung.

Ich werde mich sehr freuen, wenn jemand da mir weiter helfen könnte.

Code: Select all

#include <espnow.h>
#include <ESP8266WiFi.h>
#include "ESPAsyncWebServer.h"
#include "ESPAsyncTCP.h"
#include <Arduino_JSON.h>


// Replace with your network credentials (STATION)
const char* ssid = "HD24-neu";        //FRITZ!Box 6591 Cable MB
const char* password = "Dossenheim";    //03234937612844141212

// Structure example to receive data
// Must match the sender structure
typedef struct struct_message {
  int id;
  float temp;
  float hum;
  float temp1;
  float temp2;
  float temp3;
  float temp4;
  float volt;
  unsigned int readingId;
} struct_message;

struct_message incomingReadings;

JSONVar board;

AsyncWebServer server(80);
AsyncEventSource events("/events");

// callback function that will be executed when data is received
void OnDataRecv(uint8_t * mac_addr, uint8_t *incomingData, uint8_t len) { 
  // Copies the sender mac address to a string
  char macStr[18];
  
  Serial.print("Packet received from: ");
  snprintf(macStr, sizeof(macStr), "%02x:%02x:%02x:%02x:%02x:%02x",
           mac_addr[0], mac_addr[1], mac_addr[2], mac_addr[3], mac_addr[4], mac_addr[5]);
  Serial.println(macStr);
  memcpy(&incomingReadings, incomingData, sizeof(incomingReadings));
  
  board["id"] = incomingReadings.id;
  board["temperature"] = incomingReadings.temp;
  board["humidity"] = incomingReadings.hum;
  board["temp1"] = incomingReadings.temp1;
  board["temp2"] = incomingReadings.temp2;
  board["temp3"] = incomingReadings.temp3;
  board["temp4"] = incomingReadings.temp4;
  board["voltage"] = incomingReadings.volt;
  board["readingId"] = String(incomingReadings.readingId);
  String jsonString = JSON.stringify(board);
  events.send(jsonString.c_str(), "new_readings", millis());
  
  Serial.printf("Board ID %u: %u bytes\n", incomingReadings.id, len);
  Serial.printf("t value: %4.2f \n", incomingReadings.temp);
  Serial.printf("h value: %4.2f \n", incomingReadings.hum);
  Serial.printf("temp1 value: %4.2f \n", incomingReadings.temp1);
  Serial.printf("temp2 value: %4.2f \n", incomingReadings.temp2);
  Serial.printf("temp3 value: %4.2f \n", incomingReadings.temp3);
  Serial.printf("temp4 value: %4.2f \n", incomingReadings.temp4);
  Serial.printf("v value: %4.2f \n", incomingReadings.volt);
  Serial.printf("readingID value: %d \n", incomingReadings.readingId);
  Serial.println();
}




const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>    
  <title>ESP-NOW DASHBOARD</title>
  <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">
  <link rel="icon" href="data:,">

  <style> 
    html {font-family: Arial; display: inline-block; text-align: center;}
    h1 {  font-size: 2rem;}
    body {  margin: 0;}
    .topnav { overflow: hidden; background-color: #2f4468; color: white; font-size: 1.7rem; }
    .content { padding: 20px; }
    .card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }
    .cards { max-width: 1050px; margin: 0 auto; display: grid; grid-gap: 2rem 0.5rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .reading { font-size: 2.8rem; }
    .timestamp { color: #bebebe; font-size: 1rem; }
    .card-title{ font-size: 1.2rem; font-weight : bold; }
    .card.temperature { color: #B10F2E; }
    .card.humidity { color: #50B8B4; }
    .card.voltage { color: #61A47D;}
                  

  @keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}




  </style>
</head>
  
  
<body>

  <div class="topnav">
    <h1>Meine Wetterstation</h1>
  </div>
  <div class="content">
    <div class="cards">
     <div class="card temperature">
        <p class="card-title"><i class="fas fa-thermometer-half"></i> Keller - Temperatur</p><p><span class="reading"><span id="t1"></span> °C</span></p><p class="timestamp">letzte Lesung: <span id="rt1"></span></p>
      </div>
      <div class="card humidity">
        <p class="card-title"><i class="fas fa-tint"></i> Keller - Feuchtigkeit</p><p><span class="reading"><span id="h1"></span> &percnt;</span></p><p class="timestamp">letzte Lesung: <span id="rh1"></span></p>
      </div>
      <div class="card temperature">
        <p class="card-title"><i class="fas fa-thermometer-half"></i> Sensor 1 - Temperatur</p><p><span class="reading"><span id="temp11"></span> °C</span></p><p class="timestamp">letzte Lesung: <span id="rt11"></span></p>
      </div>
      <div class="card temperature">
        <p class="card-title"><i class="fas fa-thermometer-half"></i> Sensor 2 - Temperatur</p><p><span class="reading"><span id="temp21"></span> °C</span></p><p class="timestamp">letzte Lesung: <span id="rt21"></span></p>
      </div>
      <div class="card temperature">
        <p class="card-title"><i class="fas fa-thermometer-half"></i> Sensor 3  - Temperatur</p><p><span class="reading"><span id="temp31"></span> °C</span></p><p class="timestamp">letzte Lesung: <span id="rt31"></span></p>
      </div>
      <div class="card temperature">
        <p class="card-title"><i class="fas fa-thermometer-half"></i> Sensor 4 - Temperatur</p><p><span class="reading"><span id="temp41"></span> °C</span></p><p class="timestamp">letzte Lesung: <span id="rt41"></span></p>
      </div>
      <div class="card voltage" id= "voltage0" >
        <p class="card-title"><i class="fas fa-battery-full" id = "voltage1"></i> Keller - Akku</p><p><span class="reading"><span id="v1"></span> V </span></p><p class="timestamp">letzte Lesung: <span id="rv1"></span></p>
      </div>
      </div>
  </div>



<script>
function getDateTime() {
  var currentdate = new Date();
  var datetime = currentdate.getDate() + "/"
  + (currentdate.getMonth()+1) + "/"
  + currentdate.getFullYear() + " um "
  + currentdate.getHours() + ":"
  + currentdate.getMinutes() + ":"
  + currentdate.getSeconds();
  return datetime;
}
if (!!window.EventSource) {
 var source = new EventSource('/events');
 source.addEventListener('open', function(e) {
  console.log("Events Connected");
 }, false);
 source.addEventListener('error', function(e) {
  if (e.target.readyState != EventSource.OPEN) {
    console.log("Events Disconnected");
  }
 }, false);
 
 source.addEventListener('message', function(e) {
  console.log("message", e.data);
 }, false);
 
 source.addEventListener('new_readings', function(e) {
  console.log("new_readings", e.data);

  
  var obj = JSON.parse(e.data);
  var a = document.getElementById("v1").innerHTML;

  var text1 = document.getElementById("voltage0");
  var text2 = document.getElementById("voltage1");
  
  document.getElementById("t"+obj.id).innerHTML = obj.temperature.toFixed(2);
  document.getElementById("h"+obj.id).innerHTML = obj.humidity.toFixed(2);
  document.getElementById("temp1"+obj.id).innerHTML = obj.temp1.toFixed(2);
  document.getElementById("temp2"+obj.id).innerHTML = obj.temp2.toFixed(2);
  document.getElementById("temp3"+obj.id).innerHTML = obj.temp3.toFixed(2);
  document.getElementById("temp4"+obj.id).innerHTML = obj.temp4.toFixed(2);
  document.getElementById("v"+obj.id).innerHTML = obj.voltage.toFixed(2);
  document.getElementById("rt"+obj.id).innerHTML = getDateTime();
  document.getElementById("rh"+obj.id).innerHTML = getDateTime();
  document.getElementById("rt1"+obj.id).innerHTML = getDateTime();
  document.getElementById("rt2"+obj.id).innerHTML = getDateTime();
  document.getElementById("rt3"+obj.id).innerHTML = getDateTime();
  document.getElementById("rt4"+obj.id).innerHTML = getDateTime();
  document.getElementById("rv"+obj.id).innerHTML = getDateTime();
  
  
  
    if(a > 0 && a < 3.80){
    
        text1.style.color = "#ff0000";
        text2.style.animation = "blink-animation 1s steps(5, start) infinite";
  
    }

    else {
        text1.style.color = "";
        text2.style.animation = "";
    }
    
 
                                
 }, false);

 
}

</script>
</body>
</html>)rawliteral";






void setup() {

  // Initialize Serial Monitor
  Serial.begin(115200);
  
   
  // Set the device as a Station and Soft Access Point simultaneously
  WiFi.mode(WIFI_AP_STA);
  
  // Set device as a Wi-Fi Station
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Setting as a Wi-Fi Station..");
  }
  Serial.print("Station IP Address: ");
  Serial.println(WiFi.localIP());
  Serial.print("Wi-Fi Channel: ");
  Serial.println(WiFi.channel());

  // Init ESP-NOW
  if (esp_now_init() != 0) {
    Serial.println("Error initializing ESP-NOW");
    return;
  }
  
  // Once ESPNow is successfully Init, we will register for recv CB to
  // get recv packer info
  esp_now_register_recv_cb(OnDataRecv);
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });
   
  events.onConnect([](AsyncEventSourceClient *client){
    if(client->lastId()){
      Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
    }
    // send event with message "hello!", id current millis
    // and set reconnect delay to 1 second
    client->send("hello!", NULL, millis(), 10000);
  });
  server.addHandler(&events);
  server.begin();
  
}
 
void loop() {
  static unsigned long lastEventTime = millis();
  static const unsigned long EVENT_INTERVAL_MS = 5000;
  if ((millis() - lastEventTime) > EVENT_INTERVAL_MS) {
    events.send("ping",NULL,millis());
    lastEventTime = millis();
  }
}
Attachments
ESP_2.JPG
ESP_2.JPG (81.63 KiB) Viewed 190 times
Top
User avatar
BryonMiller
 
Posts: 222
Joined: Fri Mar 04, 2016 10:34 am

Re: ESP Webserver

Post by BryonMiller »

adkissenkoetter wrote:Hello,

I am currently working on a small weather station with the ESP 8266 D1 mini.

I currently have a transmitter (but there will be more) and a receiver.

The master/slave principle works well and the readings from the temperature sensors are finally displayed on a web server, so far so good.

The only thing I noticed is that what was received last is not saved. Better said that my web server can't show me any values ??when I refresh the page or when it is called for the first time, since the µController is theoretically always working, I thought that the values ??should be there.

My transmitter gives me the values ??every 2 minutes and then it goes to sleep.
Through the USB port I can see that everything is received and working.

I don't always have the webpage open, but I want when I go to it to be able to see the last readings that were received.

I don't have a solution yet.

I will be very happy if someone could help me further.
I hope English is acceptable for my answer.

I won't pretend to understand everything about your code, but I think I can maybe help.

If I understand what you are saying, your webpage loads correctly but then it sits there waiting for an update.

Also looks like the last update should be available in your esp in an array called 'board'.

So you might try this : Once you get a request from your browser to load the page (HTTP_GET) I would set a flag saying you have the request. Then, in you loop, I would look for that flag and wait awhile (maybe one second) then send the last data again. The reason for the 1 second wait is so you can be sure the page has loaded in to browser and that it should be ready to process server events. To send last data I believe you can do

Code: Select all

String jsonString = JSON.stringify(board);
events.send(jsonString.c_str(), "new_readings", millis());
Once you have sent the old data you should, of course, clear the flag.

This will not help when you first run the ESP code. You have to wait until the µController gets at least one data set update. Hope this helps. Let us know.

Bryon
Top
Locked
Please be positive and constructive with your questions and comments.

Return to “Arduino”