SENSORS/ACTUATORS

INTERNET OF THING (IoT)

Arduino Nano ESP32 - Ethernet

Arduino Nano ESP32 - Web Apps Library Reference

Overview

This page documents the full API of the DIYables ESP32 WebApps Library as used on the Arduino Nano ESP32 board. The library follows a modular architecture — each web application is a self-contained class that you register with the server. Only include the page classes your project requires; unused classes do not consume flash or RAM.

The library handles WiFi connection, HTTP serving, and WebSocket communication. Your sketch interacts with it entirely through callbacks and send methods.

Library Capabilities

Modular page system: Register only the apps you need; each is independent
Memory controlled: Per-app inclusion means you control flash and RAM usage
11 built-in web applications: Ready to use without any web programming
Extensible base class: Derive from DIYablesWebAppPageBase to build custom pages
WebSocket-first design: All real-time data exchange uses WebSocket on port 81
Responsive UI: All built-in pages work on desktop, tablet, and mobile
Callback-based API: Simple function registration — no polling required
Concurrent app support: Multiple pages can run simultaneously on one server

Core Classes

DIYablesWebAppServer

The central server class. It manages HTTP routing, WebSocket connections, and dispatches incoming messages to the correct registered page handler.

Constructor

DIYablesWebAppServer(int httpPort = 80, int websocketPort = 81)

Instantiates the server with the given port numbers.

httpPort: Port for HTTP requests (default: 80)
websocketPort: Port for WebSocket connections (default: 81)

Connection Methods

bool begin()

Starts the server assuming WiFi or Ethernet is already configured externally.

Returns: true on success, false on failure

bool begin(const char* ssid, const char* password)

Connects to WiFi with the provided credentials, then starts the HTTP and WebSocket servers.

ssid: Network name
password: Network password
Returns: true on success, false on failure

void loop()

Processes pending HTTP requests and WebSocket events. Call this inside loop() on every iteration.

bool isConnected()

Returns true when the board has an active WiFi connection.

String getIPAddress()

Returns the board's current IP address as a String.

Page Registration

void addApp(DIYablesWebAppPageBase* app)

Registers a page instance with the server. The page's URL path is defined in its constructor.

app: Pointer to a page object

void removeApp(const String& path)

Unregisters the page at the given URL path.

path: Path string (e.g., "/chat")

DIYablesWebAppPageBase* getApp(const String& path)

Returns a pointer to the registered page at the given path, or nullptr if not found.

void setNotFoundPage(const DIYablesNotFoundPage& page)

Assigns a custom 404 page shown when no registered page matches a request.

Typed Page Accessors

DIYablesWebDigitalPinsPage* getWebDigitalPinsPage()

Returns the registered digital pins page, or nullptr if not added.

DIYablesWebSliderPage* getWebSliderPage()

Returns the registered slider page, or nullptr if not added.

DIYablesWebJoystickPage* getWebJoystickPage()

Returns the registered joystick page, or nullptr if not added.

Base Class

DIYablesWebAppPageBase

All built-in and custom page classes extend this abstract base. It provides HTTP response utilities, WebSocket broadcasting, and page lifecycle hooks.

Constructor

DIYablesWebAppPageBase(const String& pagePath)

Registers the page under the specified URL path.

pagePath: URL route for this page (e.g., "/web-joystick")

Abstract Methods — Required in Custom Pages

virtual void handleHTTPRequest(IWebClient& client) = 0

Invoked when a browser requests this page over HTTP.

client: Interface for writing the HTTP response

virtual void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) = 0

Invoked when a WebSocket message arrives and its prefix matches this page.

ws: The WebSocket connection that sent the message
message: Raw message content
length: Byte length of the message

virtual const char* getPageInfo() const = 0

Returns a short label string shown in the Serial Monitor startup output (e.g., "🕹️ Web Joystick: ").

virtual String getNavigationInfo() const = 0

Returns an HTML fragment for this page's card on the home page.

Optional Override Methods

virtual void onWebSocketConnection(IWebSocket& ws)

Called when a new WebSocket client connects. Override to send initial state.

virtual void onWebSocketClose(IWebSocket& ws)

Called when a WebSocket client disconnects.

Utility Methods

const char* getPagePath() const

Returns this page's registered URL path.

bool isEnabled() const

Returns true if this page is active and will respond to requests.

void setEnabled(bool enable)

Activates or deactivates the page without removing it from the server.

void sendHTTPHeader(IWebClient& client, const char* contentType = "text/html")

Writes standard 200 OK HTTP headers to the client.

void sendWebSocketMessage(IWebSocket& ws, const char* message)

Sends a message to a single WebSocket connection.

void broadcastToAllClients(const char* message)

Delivers a message to every currently connected WebSocket client.

void sendLargeHTML(IWebClient& client, const char* html)

Transmits large HTML payloads using chunked transfer encoding.

Custom Page Example

class CustomPage : public DIYablesWebAppPageBase { public: CustomPage() : DIYablesWebAppPageBase("/custom") {} void handleHTTPRequest(IWebClient& client) override { sendHTTPHeader(client); client.println("<html><body>Custom Page</body></html>"); } void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) override { sendWebSocketMessage(ws, "Response: " + String(message)); } const char* getPageInfo() const override { return " 🔧 Custom Page: "; } String getNavigationInfo() const override { return "<a href=\"/custom\" class=\"app-card custom\">" "<h3>🔧 Custom</h3><p>Custom functionality</p></a>"; } };

Built-in Page Classes

DIYablesHomePage

Navigation hub listing all registered applications.

Constructor

DIYablesHomePage()

URL

---

DIYablesWebChatPage

Two-way text messaging between browser and board.

Constructor

DIYablesWebChatPage()

URL

/webchat

Methods

void onWebChatMessage(std::function<void(const String&)> callback)

Registers a handler invoked each time the browser sends a chat message.

void sendToWebChat(const String& message)

Pushes a message from the board to the browser chat view.

---

DIYablesWebMonitorPage

Browser-accessible serial monitor for output logging and command input.

Constructor

DIYablesWebMonitorPage()

URL

/webmonitor

Methods

void onWebMonitorMessage(std::function<void(const String&)> callback)

Registers a handler invoked when the browser sends a command.

void sendToWebMonitor(const String& message)

Sends a log message from the board to the browser monitor.

---

DIYablesWebDigitalPinsPage

Web interface for reading and writing digital pins 0–13.

Constructor

DIYablesWebDigitalPinsPage()

URL

/webdigitalpins

Methods

void enablePin(int pin, int mode)

Makes the pin visible and controllable in the web interface.

pin: Pin number (0–13)
mode: WEB_PIN_OUTPUT or WEB_PIN_INPUT

void onPinWrite(std::function<void(int, int)> callback)

Handler called when the browser toggles an output pin. Receives (pin, state).

void onPinRead(std::function<int(int)> callback)

Handler called when the browser requests an input pin state. Returns the current state.

void onPinModeChange(std::function<void(int, int)> callback)

Handler called when the browser changes a pin's direction.

void updatePinState(int pin, int state)

Pushes an updated pin state to all connected browser clients.

---

DIYablesWebSliderPage

Dual 0–255 range sliders suitable for PWM and analog control.

Constructor

DIYablesWebSliderPage()

URL

/webslider

Methods

void onSliderValueFromWeb(std::function<void(int, int)> callback)

Handler called when either slider moves. Receives (slider1, slider2) in the range 0–255.

void onSliderValueToWeb(std::function<void()> callback)

Handler called when a newly connected browser requests the current slider positions.

void sendToWebSlider(int slider1, int slider2)

Pushes slider values to the browser, updating the displayed positions.

---

DIYablesWebJoystickPage

2D virtual joystick returning X/Y coordinates for directional control.

Constructor

DIYablesWebJoystickPage(bool autoReturn = true, float sensitivity = 10.0)

autoReturn: When true, the joystick snaps back to center on release
sensitivity: Minimum displacement percentage required before an update is sent

URL

/webjoystick

Methods

void onJoystickValueFromWeb(std::function<void(int, int)> callback)

Handler invoked on joystick movement. Receives (x, y) each in the range –100 to +100.

void onJoystickValueToWeb(std::function<void()> callback)

Handler called when a browser requests the current joystick position.

void sendToWebJoystick(int x, int y)

Sends the current joystick position to connected browsers.

void setAutoReturn(bool autoReturn)

Updates the auto-center-return behavior at runtime.

void setSensitivity(float sensitivity)

Updates the movement sensitivity threshold at runtime.

---

DIYablesWebPlotterPage

Streaming data plotter supporting up to 8 simultaneous data series.

Constructor

DIYablesWebPlotterPage()

URL

/webplotter

Methods

void setPlotTitle(const String& title)

Sets the chart title displayed above the plot.

void setAxisLabels(const String& xLabel, const String& yLabel)

Sets the X-axis and Y-axis labels.

void enableAutoScale(bool enable)

When true, the Y-axis range adjusts automatically to incoming data.

void setMaxSamples(int maxSamples)

Caps the number of data points retained per series before older points are discarded.

void addDataPoint(const String& seriesName, float x, float y)

Appends a single (x, y) point to the named series.

void clearPlot()

Removes all data from all series.

---

DIYablesNotFoundPage

Optional 404 response page shown for unregistered routes.

Constructor

DIYablesNotFoundPage()

Basic Usage

The following sketch demonstrates adding a chat and monitor page to an Arduino Nano ESP32 project:

#include <DIYablesWebApps.h> const char* ssid = "YOUR_WIFI_SSID"; const char* password = "YOUR_WIFI_PASSWORD"; DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; DIYablesWebMonitorPage monitorPage; void setup() { Serial.begin(9600); webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); webAppsServer.addApp(&monitorPage); webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); if (webAppsServer.begin(ssid, password)) { Serial.println("Server started"); Serial.print("IP: "); Serial.println(webAppsServer.getIPAddress()); } chatPage.onWebChatMessage([](const String& message) { Serial.println("Chat received: " + message); chatPage.sendToWebChat("Board reply: " + message); }); } void loop() { webAppsServer.loop(); delay(10); }

Web Application URL Reference

Application	Default URL
Home Page	http	//[board-ip]/
Chat	http	//[board-ip]/webchat
Web Monitor	http	//[board-ip]/webmonitor
Digital Pins	http	//[board-ip]/webdigitalpins
Slider	http	//[board-ip]/webslider
Joystick	http	//[board-ip]/webjoystick
Plotter	http	//[board-ip]/webplotter

WebSocket Protocol

All real-time communication goes through a single WebSocket server on port 81.

WebSocket endpoint: ws://[board-ip]:81
Reconnection: Browsers reconnect automatically on disconnect
Message format: Text-based; each built-in app uses a unique prefix to identify its messages

Per-App Message Patterns

Chat — plain text in both directions

Monitor — plain text in both directions

Digital Pins

Browser → Board: {"pin": 13, "state": 1}
Board → Browser: {"pin": 13, "state": 1}

Slider

Browser → Board: {"slider1": 128, "slider2": 255}
Board → Browser: {"slider1": 128, "slider2": 255}

Joystick

Browser → Board: {"x": 50, "y": -25}
Board → Browser: {"x": 50, "y": -25}

Plotter

Browser → Board: not applicable (display only)
Board → Browser: {"series": "temp", "x": 10.5, "y": 23.4}

Memory Reference

Include only the pages your project uses. Approximate footprint per component:

Component	Flash	RAM
DIYablesWebAppServer	~8 KB	~2 KB
DIYablesHomePage	~3 KB	~1 KB
DIYablesWebChatPage	~6 KB	~1.5 KB
DIYablesWebMonitorPage	~5 KB	~1.5 KB
DIYablesWebDigitalPinsPage	~8 KB	~2 KB
DIYablesWebSliderPage	~6 KB	~1.5 KB
DIYablesWebJoystickPage	~7 KB	~1.5 KB
DIYablesWebPlotterPage	~10 KB	~2 KB
WebSocket buffer (per client)	—	~1 KB

Minimum project (server + home + one app): ~17 KB Flash, ~4.5 KB RAM

All apps enabled: ~53 KB Flash, ~12 KB RAM

Learn More

※ OUR MESSAGES

As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!