C++ Add real world time to timestamp on charts

Question

I'm making a little ESP8266 project for myself, in which I want to display the Temperature and Humidity of an DHT11 sensor on a website. The code I have now works perfectly, but the timestamps at the charts are kinda weird. I want these timestamps to be the real time of Amsterdam when the data is uploaded to the charts. Is there anyone with any experience to do this? Let me know! Thanks in advance!

#include <DHT.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

#define DHTTYPE DHT11
#define DHTPIN 2
DHT dht(DHTPIN, DHTTYPE);
ESP8266WebServer server(80);
void setup() {
  Serial.begin(115200);
  WiFi.begin("SSID", "Password");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
  
  dht.begin();
  
  server.on("/", []() {
    String html = "<html><body>";
    html += "<style> body{text-align:center; font-family:sans-serif;}#temp,#hum{color:red;}h1{font-size:75px;}.top{margin-top:50px;}</style>";
    html += "<h1 class='top'>Temperatuur: <span id='temp'>Loading...</span> *C</h1>";
    html += "<h1>Luchtvochtigheid <span id='hum'>Loading...</span> %</h1>";
    html += "<script src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>";
    html += "<canvas id='tempChart'></canvas>";
    html += "<canvas id='humChart' style='margin-top:50px;'></canvas>";
    html += "<script>setInterval(function(){fetch('/temp-hum').then(res=>res.text()).then(tempHum=>{let [temp, hum] = tempHum.split(','); document.getElementById('temp').innerHTML=temp; document.getElementById('hum').innerHTML=hum});fetch('/getTempData').then(res => res.json()).then(data => {tempChart.data.labels.push(data.time); tempChart.data.datasets[0].data.push(data.temp); tempChart.update()});fetch('/getHumData').then(res => res.json()).then(data => {humChart.data.labels.push(data.time); humChart.data.datasets[0].data.push(data.hum); humChart.update()})}, 10000);</script>";
    html += "<script>var tempCtx = document.getElementById('tempChart').getContext('2d');var tempChart = new Chart(tempCtx, {type: 'line',data: { labels: [],datasets: [{label: 'Temperature',data: [],borderColor: 'red',fill: false}]},options: {scales: {yAxes: [{scaleLabel: {display: true,labelString: 'Temperature (°C)'}}],xAxes: [{scaleLabel: {display: true,labelString: 'Time'}}]},title: {display: true,text: 'Temperature over time'},legend: {display: true }}});var humCtx = document.getElementById('humChart').getContext('2d');var humChart = new Chart(humCtx, {type: 'line',data:{ labels: [],datasets: [{label: 'Humidity',data: [],borderColor: 'blue',fill: false}]},options: {scales: {yAxes: [{scaleLabel: {display: true,labelString: 'Humidity (%)'}}],xAxes: [{scaleLabel: {display: true,labelString: 'Time'}}]},title: {display: true,text: 'Humidity over time'},legend: {display: true }}})</script>";
    html += "</body></html>";
    server.send(200, "text/html", html);
  });

  server.on("/temp-hum", []() {
    String temp = String(dht.readTemperature());
    String hum = String(dht.readHumidity());
    String tempHum = temp + "," + hum;
    server.send(200, "text/plain", tempHum);
  });

  server.on("/getTempData", []() {
    String time = String(millis());
    String temp = String(dht.readTemperature());
    String data = "{\"time\":\""+time+"\",\"temp\":\""+temp+"\"}";
    server.send(200, "application/json", data);
  });
  
  server.on("/getHumData", []() {
    String time = String(millis());
    String hum = String(dht.readHumidity());
    String data = "{\"time\":\""+time+"\",\"hum\":\""+hum+"\"}";
    server.send(200, "application/json", data);
  });
  
  server.begin();
  Serial.println("Server started");
}

void loop() {
  server.handleClient();
}

`millis()` herre is **Milliseconds since ignition of the device** not the real time — Redanium, Jan 24 '23 at 12:34
I know, but I don't know how to change it to the real world time — siebetimmer, Jan 24 '23 at 12:35
you can't change it , you have to get it from somewhere else. — Redanium, Jan 24 '23 at 12:56
since the time of measurement is the time of display, you can use the current time in browser — Juraj, Jan 24 '23 at 14:05

score 0 · Answer 1 · answered Jan 24 '23 at 12:50

0

You are looking to find unix time(time since Jan 1970), that is quite easy to convert from nanaoseconds to time in amsterdam. So converting Unix time into CET. It that's a bit too much work, and time accuracy is not extremely important. You could make a request and parse it. Hope this helped a bit.

answered Jan 24 '23 at 12:50

felrock

7
2

`millis()` herre is Milliseconds **since ignition** of the device nor the real time nor **the Unix epoch** – Redanium Jan 24 '23 at 12:53
2

I know that millis isn't unix epoch, the post i linked shows how to sync/get it over the internet... – felrock Jan 24 '23 at 13:01

score -1 · Answer 2 · answered Jan 24 '23 at 12:47

-1

There are many ways to get real time clock

Use NTP Client-Server to get real world time
(or) Add RTC (Real time clock) module to your ESP

answered Jan 24 '23 at 12:47

Redanium

879
5
18

C++ Add real world time to timestamp on charts

2 Answers2