Arduino Nano ESP32 - Web Apps Web Monitor
Overview
This tutorial covers the DIYablesWebMonitorPage class from the DIYables ESP32 WebApps Library. The page provides a terminal-style interface in the browser. Text sent from the sketch appears in the browser display; text typed in the browser is delivered to a sketch callback. This allows monitoring and commanding the Arduino Nano ESP32 from any device on the same network without a USB serial connection.
Watch this step-by-step video tutorial demonstrating how to use WebMonitor with the DIYables ESP32 WebApps:
What This Tutorial Covers
- Sending sketch output to the browser monitor using sendToWebMonitor()
- Receiving browser-typed commands in a sketch callback
- Processing built-in commands such as LED control and status queries
- Accessing the monitor interface from a smartphone or PC
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
Steps
Follow these instructions step by step:
- If this is your first time using the Arduino Nano ESP32, refer to the tutorial on setting up the Arduino Nano ESP32 development environment.
- Connect the Arduino Nano ESP32 board to your computer using a USB cable.
- Launch the Arduino IDE on your computer.
- Select the appropriate board (e.g. Arduino Nano ESP32) and COM port.
- Navigate to the Libraries icon on the left bar of the Arduino IDE.
- Search "DIYables ESP32 WebApps", then find the DIYables ESP32 WebApps Library by DIYables
- Click Install button to install the library.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- You will be asked for installing some other library dependencies
- Click Install All button to install all library dependencies.
- On Arduino IDE, Go to File Examples DIYables ESP32 WebApps WebMonitor example, or copy the above code and paste it to the editor of Arduino IDE
/*
* DIYables WebApp Library - Web Monitor Example
*
* This example demonstrates the Web Monitor feature:
* - Real-time serial monitor in web browser
* - Send commands from browser to Arduino
* - Automatic message timestamping
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/webmonitor
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebMonitorPage webMonitorPage;
// Demo variables
unsigned long lastMessage = 0;
int messageCount = 0;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web Monitor Example");
// Add home and web monitor pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webMonitorPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Initialize LED for status indication
pinMode(LED_BUILTIN, OUTPUT);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up monitor callback for incoming commands
webMonitorPage.onWebMonitorMessage([](const String& message) {
Serial.println("Command from web: " + message);
// Process simple commands
if (message == "LED_ON") {
digitalWrite(LED_BUILTIN, HIGH);
webMonitorPage.sendToWebMonitor("LED turned ON");
return;
}
if (message == "LED_OFF") {
digitalWrite(LED_BUILTIN, LOW);
webMonitorPage.sendToWebMonitor("LED turned OFF");
return;
}
if (message == "STATUS") {
String status = "Arduino Status: LED=" + String(digitalRead(LED_BUILTIN) ? "ON" : "OFF");
webMonitorPage.sendToWebMonitor(status);
return;
}
if (message == "HELP") {
webMonitorPage.sendToWebMonitor("Available commands: LED_ON, LED_OFF, STATUS, HELP");
return;
}
webMonitorPage.sendToWebMonitor("Unknown command: " + message);
});
// Send welcome message
webMonitorPage.sendToWebMonitor("Arduino Web Monitor ready!");
webMonitorPage.sendToWebMonitor("Type HELP for available commands");
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Send periodic updates to web monitor
if (millis() - lastMessage > 5000) { // Every 5 seconds
messageCount++;
// Send sensor readings or status updates
String message = "Message #" + String(messageCount) + " - Uptime: " + String(millis() / 1000) + "s";
webMonitorPage.sendToWebMonitor(message);
lastMessage = millis();
}
// Add your main application code here
delay(10);
}
- Update the WiFi credentials in the sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
- Open the Serial Monitor
- The Serial Monitor output should resemble the following:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - Web Monitor Example
INFO: Added app /
INFO: Added app /web-monitor
DIYables WebApp Library
Platform: Arduino Nano ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
Web Interface: http://192.168.0.2
WebSocket: ws://192.168.0.2:81
Available Applications:
Home Page: http://192.168.0.2/
Web Monitor: http://192.168.0.2/web-monitor
==========================================
- If nothing appears, press the reset button on the board.
- Enter the IP address from the Serial Monitor into a browser on the same network.
- Example: http://192.168.0.2
- The home page shows a card for the monitor application:
- Select the Web Monitor card to open the terminal interface:
- The page is also directly accessible at http://192.168.0.2/web-monitor.
- Type commands in the input field and press Enter. The board responds and the reply appears in the terminal.
Built-in Commands
The example sketch recognizes the following commands entered in the browser:
| Command | Action |
|---|---|
| led on | Turns on the built-in LED |
| led off | Turns off the built-in LED |
| led toggle | Toggles the LED state |
| blink | Blinks the LED 3 times |
| status | Prints board status and uptime |
| help | Lists recognized commands |
| reset counter | Resets the message counter |
| memory | Reports free heap memory |
| test | Sends a test message |
| echo [text] | Returns the supplied text |
| repeat [n] [text] | Repeats the text n times |
Sending Data from the Sketch
Call sendToWebMonitor() anywhere in the sketch to push text to the browser:
void loop() {
webAppsServer.loop();
// Send a periodic status message
static unsigned long lastSend = 0;
if (millis() - lastSend >= 5000) {
lastSend = millis();
webMonitorPage.sendToWebMonitor("Uptime: " + String(millis() / 1000) + " s");
}
}
Receiving Commands from the Browser
Register a callback to process text typed in the browser input field:
webMonitorPage.onWebMonitorMessage([](const String& command) {
Serial.println("Received: " + command);
if (command == "led on") {
digitalWrite(LED_BUILTIN, HIGH);
webMonitorPage.sendToWebMonitor("LED is now ON");
} else if (command == "led off") {
digitalWrite(LED_BUILTIN, LOW);
webMonitorPage.sendToWebMonitor("LED is now OFF");
} else {
webMonitorPage.sendToWebMonitor("Unknown command: " + command);
}
});
Troubleshooting
Monitor shows no output from the sketch
- Verify sendToWebMonitor() is being called; add a Serial.println() alongside it to confirm execution
- Check the WebSocket status indicator in the browser
- Ensure webAppsServer.loop() runs on every loop() iteration without blocking delays
Commands sent from browser are not received
- Confirm onWebMonitorMessage is registered before webAppsServer.begin()
- Check the Serial Monitor for the raw command text
Cannot open the page
- Verify the IP address shown in the Serial Monitor
- Ensure the browser device and board are on the same 2.4 GHz WiFi network