ESP32: ESP-NOW Web Server Sensor Dashboard (ESP-NOW + Wi-Fi)

In this project, you’ll learn how to host an ESP32 web server and use ESP-NOW communication protocol simultaneously. You can have several ESP32 boards sending sensor readings via ESP-NOW to one ESP32 receiver that displays all readings on a web server. The boards will be programmed using Arduino IDE.
We have other guides related to ESP-NOW that you might be interested in:
Getting Started with ESP-NOW (ESP32 with Arduino IDE)
ESP-NOW Two-Way Communication Between ESP32 Boards
ESP-NOW with ESP32: Send Data to Multiple Boards (one-to-many)
ESP-NOW with ESP32: Receive Data from Multiple Boards (many-to-one)
Note:
Using ESP-NOW and Wi-Fi Simultaneously
There are a few things you need to take into account if you want to use Wi-Fi to host a web server and use ESP-NOW simultaneously to receive sensor readings from other boards:
The ESP32 sender boards must use the same Wi-Fi channel of the receiver board.
The Wi-Fi channel of the receiver board is automatically assigned by your Wi-Fi router.
The Wi-Fi mode of the receiver board must be access point and station (
WIFI_AP_STA
).
You can set up the same Wi-Fi channel manually, or you can add a simple spinet of code on the sender to set its Wi-Fi channel to the same of the receiver board.
Project Overview
The following diagram shows a high-level overview of the project we’ll build.
There are two ESP32 sender boards that send
DHT22
temperature and humidity readings via ESP-NOW to one ESP32 receiver board (
ESP-NOW many to one configuration
);
The ESP32 receiver board receives the packets and displays the readings on a web server;
The web server is updated automatically every time it receives a new reading using Server-Sent Events (SSE).
Prerequisites
Before proceeding with this project, make sure you check the following prerequisites.
Arduino IDE
We’ll program the ESP32 boards using Arduino IDE, so before proceeding with this tutorial, make sure you have the ESP32 board installed in your Arduino IDE.
Installing ESP32 Board in Arduino IDE (Windows, Mac OS X, and Linux)
Installing Libraries
For this project, you need to install the following libraries:
DHT library from Adafruit
Adafruit Unified Sensor library
Arduino_JSON library
by Arduino
ESPAsyncWebServer
by ESP32Async
AsyncTCP
by ESP32Async
You can install the Libraries via the Arduino Library Manager. Go to
Sketch
>
Include Library
>
Manage Libraries
and search for the libraries’ names to install them.
To learn more about the DHT11 or DHT22 temperature sensor, read our guide:
ESP32 with DHT11/DHT22 Temperature and Humidity Sensor using Arduino IDE
Parts Required
To follow this tutorial, you need multiple ESP32 boards. We’ll use three ESP32 boards. You also need:
3x
ESP32
(read
Best ESP32 development boards
)
2x
DHT22 temperature and humidity sensor
–
DHT guide for ESP32
2x
4.7k Ohm resistor
Breadboard
Jumper wires
You can use the preceding links or go directly to
MakerAdvisor.com/tools
to find all the parts for your projects at the best price!
Getting the Receiver Board MAC Address
To send messages via ESP-NOW, you need to know the receiver board’s
MAC address
. Each board has a unique MAC address (learn how to
Get and Change the ESP32 MAC Address
).
Upload the following code to your ESP32 receiver board to get its MAC address.
/*
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.
*/
#ifdef ESP32
#include <WiFi.h>
#include <esp_wifi.h>
#else
#include <ESP8266WiFi.h>
#endif

void setup(){
Serial.begin(115200);

Serial.print("ESP Board MAC Address: ");
#ifdef ESP32
WiFi.mode(WIFI_STA);
WiFi.STA.begin();
uint8_t baseMac[6];
esp_err_t ret = esp_wifi_get_mac(WIFI_IF_STA, baseMac);
if (ret == ESP_OK) {
Serial.printf("%02x:%02x:%02x:%02x:%02x:%02x\n",
baseMac[0], baseMac[1], baseMac[2],
baseMac[3], baseMac[4], baseMac[5]);
} else {
Serial.println("Failed to read MAC address");
}
#else
Serial.println(WiFi.macAddress());
#endif
}

void loop(){

}
After uploading the code, press the RST/EN button, and the MAC address should be displayed on the Serial Monitor.
ESP32 Receiver (ESP-NOW + Web Server)
The ESP32 receiver board receives the packets from the sender boards and hosts a web server to display the latest received readings.
Upload the following code to your receiver board – the code is prepared to receive readings from two different boards.
/*
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"
#include <Arduino_JSON.h>

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

// Structure example to receive data
// Must match the sender structure
typedef struct struct_message {
int id;
float temp;
float hum;
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(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: ");
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["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("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;}
p { font-size: 1.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: 700px; margin: 0 auto;