Hallo,
Ich empfange auf einem D1 über ESP-Now Daten von einem BME280. Diese daten werden dann Zu einem Json String zusammengesetzt damit die Werte auf dem Webserver angezeigt werden. Wenn ich allerdings die Website neulade sind die werte Weg und kommen erst wenn der Sender neue Daten übermittelt (was nur alle 15 minuten passiert) und für eine Handy anwendung ein Solches warten nicht in frage kommt. Kann ich irgendwie Egal ob im HTML Code oder per skript die Werte vom sensor irgendwie auch nach einem reload er seite wieder anzeigen. Aktuell sind es 2 Sensoren
#include <espnow.h>
#include <ESP8266WiFi.h>
#include "ESPAsyncWebServer.h"
#include <Arduino_JSON.h>
// Replace with your network credentials (STATION)
const char* ssid = "*****";
const char* password = "***********";
// Structure example to receive data
// Must match the sender structure
struct __attribute__((packed)) dataPacket {
char id[32];
float sensor1;
float sensor2;
float sensor3;
unsigned int readingId;
};
JSONVar board;
JSONVar board1;
AsyncWebServer server(80);
AsyncEventSource events("/events");
void dataReceived(uint8_t *senderMac, uint8_t *data, uint8_t dataLength) {
char macStr[18];
dataPacket packet;
snprintf(macStr, sizeof(macStr), "%02x:%02x:%02x:%02x:%02x:%02x", senderMac[0], senderMac[1], senderMac[2], senderMac[3], senderMac[4], senderMac[5]);
Serial.println();
Serial.print("Received data from: ");
Serial.println(macStr);
memcpy(&packet, data, sizeof(packet));
Serial.print("ID: ");
Serial.println(packet.id);
Serial.print("sensor1: ");
Serial.println(packet.sensor1);
Serial.print("sensor2: ");
Serial.println(packet.sensor2);
Serial.print("sensor3: ");
Serial.println(packet.sensor3);
Serial.print("Reading ID: ");
Serial.println(packet.readingId);
board["id"] = packet.id;
board["temperature"] = packet.sensor1;
board["humidity"] = packet.sensor2;
board["pressure"] = packet.sensor3;
board["readingId"] = String(packet.readingId);
String jsonString = JSON.stringify(board);
events.send(jsonString.c_str(), "new_readings", millis());
}
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<title>Wetterstation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="https://kit.fontawesome.com/a31d3838.js" crossorigin="anonymous"></script>
<link rel="icon" href="data:,">
<link rel="icon" href="https://wetterfav.app/wetter.png" type="image/png">
<style>
/*Darkmode*/
:root{
--primary-color: white;
--secondary-color: black;
}
.dark-theme{
--primary-color: black;
--secondary-color: white;
}
html {font-family: Arial; display: inline-block; text-align: center;}
p { font-size: 1.2rem;}
body { margin: 0; background-color: var(--primary-color)}
.topnav { overflow: hidden; background-color: #2f4468; color: var(--primary-color); font-size: 1.7rem; flex: 1;}
h1 {position: static; margin-top: -60px; color: var(--primary-color);}
.content { padding: 20px; }
.card { background-color: var(--primary-color); box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }
.cards { max-width: 1050px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.reading { font-size: 2.8rem; }
.packet { color: #bebebe; }
.card.temperature { color: #fd7e14; }
.card.humidity { color: #1b78e2; }
.card.presure { color: #0cb691; }
#dark{
width: 50px;
cursor: pointer;
position: absolute;
top: 50px;
margin-left: 120px;
}
</style>
</head>
<body>
<div class="topnav">
<h3>Wetterstation </h3> <br>
<img src="https://wetterfav.app/moon.png" id="dark">
<h1 id="time">Uhrzeit</h1>
</div>
<div class="content">
<div class="cards">
<!--Temperatur Karte-->
<div class="card temperature">
<h4><i class="fas fa-thermometer-half"></i> Balkon - TEMPERATUR</h4><p><span class="reading"><span id="t1"></span> °C</span></p><p class="packet">Reading ID: <span id="rt1"></span></p>
</div>
<!--Luftfeuchtigkeits Karte-->
<div class="card humidity">
<h4><i class="fas fa-tint"></i> Balkon - LUFTFEUCHTIGKEIT</h4><p><span class="reading"><span id="h1"></span> %</span></p><p class="packet">Reading ID: <span id="rh1"></span></p>
</div>
<!--Luftdruck ausprobieren-->
<div class="card presure">
<h4><i class="fa-solid fa-arrows-down-to-line"></i> Balkon - LUFTDRUCK</h4><p><span class="reading"><span id="p1"></span> hPa</span></p><p class="packet">Reading ID: <span id="rp1"></span></p>
</div>
<!--Temperatur Karte-->
<div class="card temperature">
<h4><i class="fas fa-thermometer-half"></i> BOARD #2 - TEMPERATUR</h4><p><span class="reading"><span id="t2"></span> °C</span></p><p class="packet">Reading ID: <span id="rt2"></span></p>
</div>
<div class="card humidity">
<h4><i class="fas fa-tint"></i> BOARD #2 - LUFTFEUCHTIGKEIT</h4><p><span class="reading"><span id="h2"></span> %</span></p><p class="packet">Reading ID: <span id="rh2"></span></p>
</div>
<!--Luftdruck ausprobieren-->
<div class="card presure">
<h4><i class="fa-solid fa-arrows-down-to-line"></i> BOARD #2 - LUFTDRUCK</h4><p><span class="reading"><span id="p2"></span> hPa</span></p><p class="packet">Reading ID: <span id="rp1"></span></p>
</div>
</div>
</div>
<script>
//Darkmode
var icon = document.getElementById("dark");
if(localStorage.getItem("theme") == null){
localStorage.setItem("theme", "light");
}
let localData = localStorage.getItem("theme");
if(localData == "light"){
icon.src = "https://wetterfav.netlify.app/moon.png";
document.body.classList.remove("dark-theme");
}else if(localData == "dark"){
icon.src = "https://wetterfav.netlify.app/sun.png";
document.body.classList.add("dark-theme");
}
icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "https://wetterfav.netlify.app/sun.png";
localStorage.setItem("theme", "dark");
}else{
icon.src = "https://wetterfav.netlify.app/moon.png";
localStorage.setItem("theme", "light");
}
}
//Uhrzeit
let time = document.getElementById("time");
setInterval(() =>{
let d = new Date();
time.innerHTML = d.toLocaleTimeString('de-DE', {
timeZone: 'Europe/Berlin',
hourCycle: 'h23',
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
},1000)
//Daten
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);
document.getElementById("t"+obj.id).innerHTML = obj.temperature.toFixed(2);
document.getElementById("h"+obj.id).innerHTML = obj.humidity.toFixed(2);
document.getElementById("p"+obj.id).innerHTML = obj.pressure.toFixed (2);
}, 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());
if(esp_now_init() != 0) {
Serial.println("ESP-NOW initialization failed");
return;
}
esp_now_register_recv_cb(dataReceived);
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();
}
delay(1000);
String jsonString = JSON.stringify(board1);
events.send(jsonString.c_str(), "new_readings", millis());
if (jsonString.c_str
}
Ich bin kein Profi was das programmieren angeht daher bitte nicht über den Code beschweren.