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> %</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();
}
}