Customizing the Random Nerd Tutorials ESP-NOW Web Server Sensor Dashboard

<pre class="wp-block-syntaxhighlighter-code"> /* 
  ESP32: ESP-NOW Web Server Sensor Dashboard (ESP-NOW + Wi-Fi) RECEIVER 

  This sketch is based on the receiver sketch by Random Nerd Tutorials
    https://randomnerdtutorials.com/esp32-esp-now-wi-fi-web-server/

  And uses MicrocontrollersLab's code to load readings on page load ESP32 SHT31 Temperature and Humidity Web Server
    <blockquote class="wp-embedded-content" data-secret="b4WeGbzz7C"><a href="https://microcontrollerslab.com/esp32-sht31-temperature-humidity-web-server/">ESP32 SHT31 Temperature and Humidity Web Server</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; visibility: hidden;" title="&#8220;ESP32 SHT31 Temperature and Humidity Web Server&#8221; &#8212; Microcontrollers Lab" src="https://microcontrollerslab.com/esp32-sht31-temperature-humidity-web-server/embed/#?secret=DsMOWHKw0G#?secret=b4WeGbzz7C" data-secret="b4WeGbzz7C" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
*/
/*
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete project details at https://RandomNerdTutorials.com/esp32-esp-now-wi-fi-web-server/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.  
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

#include <esp_now.h>
#include <WiFi.h>
#include "ESPAsyncWebServer.h" // https://github.com/mathieucarbou/ESPAsyncWebServer and https://github.com/mathieucarbou/AsyncTCP
#include <Arduino_JSON.h> // https://github.com/arduino-libraries/Arduino_JSON

#include "index_html.h" // Includes the web page code with the sketch

// Replace with your network credentials (STATION)
const char* ssid = "YourNetworkName";
const char* password = "YourNetworkPassword";

const char* ntpServer = "pool.ntp.org";   // Time server
const char* TZ_INFO = "EST-10EDT-11,M10.1.0/02:00:00,M4.1.0/03:00:00"; // NSW, Australia timezone

// Define structs for each ESP32 sender.
typedef struct struct_message_sender_1 {
  int id;
  float temp;
  float hum;
  unsigned int readingId;
} struct_message_sender_1;

typedef struct struct_message_sender_2 {
  int id;
  float temp;
  float hum;
  unsigned int readingId;
} struct_message_sender_2;

// Create variables for the ESP32 using the sender data structures
struct_message_sender_1 incomingReadingsSender1;
struct_message_sender_2 incomingReadingsSender2;

char sender1LatestTime[20]; // For the time of latest readings from sender 1
char sender2LatestTime[20]; // For the time of latest readings from sender 2

JSONVar board; // Create a JSON variable called board

String jsonString;

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

// callback function that will be executed when data is received
void OnDataRecv(const uint8_t * mac_addr, const uint8_t *incomingData, int len) { 
  // Copies the sender mac address to a string
  char macStr[18];
  Serial.print("Packet received from mac address: ");
  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);

  int sensorId;

  memcpy(&sensorId, incomingData, sizeof(int));
  Serial.print("Sensor (sensorId): ");
  Serial.println(sensorId);

  //Get time
  struct tm timeinfo;
  if(!getLocalTime(&timeinfo)){
    Serial.println("Failed to obtain time when data received");
  }

  // This method supports senders with different numbers and types of data
  switch (sensorId) {
    case 1:
      // Copy data from incoming data to the array for sender 1
      memcpy(&incomingReadingsSender1, incomingData, sizeof(incomingReadingsSender1));

      strftime(sender1LatestTime, 20, "%H:%M:%S %d/%m/%Y", &timeinfo);  // Record time of reading

      // Print output to serial monitor fdr debugging
      Serial.println("SENDER 1");
      Serial.printf("Board ID %u: %u bytes\n", incomingReadingsSender1.id, len);
      Serial.printf("Temperature: %4.2f \n", incomingReadingsSender1.temp);
      Serial.printf("Humidity: %4.2f \n", incomingReadingsSender1.hum);
      Serial.printf("Reading number: %d \n", incomingReadingsSender1.readingId);

      break;

    case 2:
      // Copy data from incoming data to the array for sender 2
      memcpy(&incomingReadingsSender2, incomingData, sizeof(incomingReadingsSender2));

      strftime(sender2LatestTime, 20, "%H:%M:%S %d/%m/%Y", &timeinfo);  // Record time of reading

       // Print output to serial monitor for debugging
      Serial.println("SENDER 2");
      Serial.printf("Board ID %u: %u bytes\n", incomingReadingsSender2.id, len);
      Serial.printf("Temperature: %4.2f \n", incomingReadingsSender2.temp);
      Serial.printf("Humidity: %4.2f \n", incomingReadingsSender2.hum);
      Serial.printf("Reading number: %d \n", incomingReadingsSender2.readingId);

      break;

    default:
      Serial.println("Unknown sensor");
      break;
  }

  createJSON();
  // Send readings to browsers
  events.send(jsonString.c_str(), "new_readings", millis());

  Serial.println(jsonString); 
  Serial.println("----------------------------------------------");
}

void createJSON() {
  // Create json string from the reading values from the readings struct
  // Check if there is a value for senderId and only include those that do in the
  // json. This prevents 0 values displaying on the webpage for sensors that 
  // have not reported a value

  bool readings = false; // Used to monitor if there have been any readings since boot

  if (incomingReadingsSender1.id == 1) {
    board["sender1Id"] = incomingReadingsSender1.id;
    board["sender1Temperature"] = String(incomingReadingsSender1.temp, 2); // Convert reading to string with 2 decimal places
    board["sender1Humidity"] = String(incomingReadingsSender1.hum, 2);
    board["sender1ReadingId"] = incomingReadingsSender1.readingId;
    board["sender1readingTime"] = sender1LatestTime;
    readings = true;
  }

  if (incomingReadingsSender2.id == 2) {
    board["sender2Id"] = incomingReadingsSender2.id;
    board["sender2Temperature"] = String(incomingReadingsSender2.temp, 2);
    board["sender2Humidity"] = String(incomingReadingsSender2.hum, 2);
    board["sender2ReadingId"] = incomingReadingsSender2.readingId;
    board["sender2readingTime"] = sender2LatestTime;
    readings = true;
  }

  // If we have a reading for at least one sender then prepare readings to be sent
  // This check is to prevent errors if trying to stringify nothing
  if (readings == true) {
    jsonString = JSON.stringify(board);
  } 
};

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 and get the time using TZ method
  configTzTime(TZ_INFO, ntpServer);
  //displayLocalTime();

  // Init ESP-NOW
  if (esp_now_init() != ESP_OK) {
    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(esp_now_recv_cb_t(OnDataRecv));

/* HTML was here. Now in a separate file */

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html);
});

  // Request for the latest sensor readings, for page load
  server.on("/readings", HTTP_GET, [](AsyncWebServerRequest *request){
    createJSON();
    request->send(200, "application/json", jsonString);
  });
   
  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();
  }
}</pre>