SENSORS/ACTUATORS

INTERNET OF THING (IoT)

DIYables Web Apps Library Reference

Overview

This ESP32 S3 Uno API reference lists every class, method and callback of the DIYables ESP32 WebApps library. Use it when you build WebSocket web apps on the ESP32 S3 Uno form board and need the exact function name, parameter or return value.

The library is modular. It ships with many ready-made web apps and a small framework for making your own. You add only the apps your sketch needs, so the rest takes no memory.

In this reference, you will:

Look up the methods of the main server class, DIYablesWebAppServer
Learn how to build a custom web app from the DIYablesWebAppPageBase class
Find the URL path, callbacks and message format of each built-in web app
Check the memory use of each web app
Understand the platform interfaces the library is built on

New to the board? Set up the Arduino IDE first with ESP32 S3 Uno - Getting Started, then choose the ESP32S3 Dev Module board. Install the library from the Library Manager by searching for "DIYables ESP32 WebApps". In your sketch, include it with #include <DIYablesWebApps.h>.

Features

The library is designed to be small and easy to use. These are its main ideas.

Modular architecture

You add only the web apps you need. Each app can be turned on or off on its own, which keeps flash and RAM use low.

11+ ready-to-use web applications

You can control the ESP32 S3 Uno from a browser with no web programming. Chat, monitor, digital pins, slider, joystick, plotter and more are included.

Custom web app framework

You can make your own app by extending the base class. The server handles HTTP and WebSocket for you.

Real-time communication

All apps use WebSocket, so updates reach the browser at once, in both directions.

Responsive design

The pages work on desktop, tablet and mobile.

Easy integration

You connect the apps to your code with simple callback functions. You can also add several web apps to one server at the same time.

Core Classes

The core class is the one object every sketch creates. It joins the WiFi network, serves the web pages and passes WebSocket messages to the right app.

DIYablesWebAppServer

This main server class manages the web applications, the HTTP requests and the WebSocket communication.

Constructor

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

This creates a web app server instance. httpPort is the HTTP server port (default 80). websocketPort is the WebSocket server port (default 81).

Methods

Setup and Connection

bool begin()

Starts the network connection and the web server, without WiFi credentials. It is meant for a future Ethernet option, or for when the WiFi credentials are already set up. It returns true on success and false on failure.

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

Connects to WiFi and starts the web server. This is the normal way to start. ssid is the WiFi network name and password is the WiFi password. It returns true on success and false on failure.

void loop()

Handles the HTTP requests and the WebSocket communication. You must call it in the main loop().

bool isConnected()

Returns true if WiFi is connected.

String getIPAddress()

Returns the IP address of the ESP32 S3 Uno as a string. Type this address in your browser to open the web apps.

Application Management

void addApp(DIYablesWebAppPageBase* app)

Adds a web application to the server. app is a pointer to a web application instance.

void removeApp(const String& path)

Removes a web application by its URL path. path is the URL path of the app, for example "/chat".

DIYablesWebAppPageBase* getApp(const String& path)

Gets a web application by its URL path. It returns a pointer to the app, or nullptr if no app has that path.

void setNotFoundPage(const DIYablesNotFoundPage& page)

Sets the optional 404 Not Found page. page is a 404 page instance.

Specialized App Access

DIYablesWebDigitalPinsPage* getWebDigitalPinsPage()

Returns a pointer to the digital pins page if it was added, or nullptr.

DIYablesWebSliderPage* getWebSliderPage()

Returns a pointer to the slider page if it was added, or nullptr.

DIYablesWebJoystickPage* getWebJoystickPage()

Returns a pointer to the joystick page if it was added, or nullptr.

Base Classes

Every web app in the library comes from one base class. If you want to make your own web page, this is the class you extend.

DIYablesWebAppPageBase

This abstract base class is the parent of all web applications. It gives them the common parts: HTTP handling, WebSocket communication and page management.

Constructor

DIYablesWebAppPageBase(const String& pagePath)

Creates a base page with the given URL path. pagePath is the URL path of the page, for example "/web-joystick".

Virtual Methods (Must be implemented by derived classes)

virtual void handleHTTPRequest(IWebClient& client) = 0

Pure virtual. Handles the HTTP requests for this page. client is the web client interface you use to send the response.

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

Pure virtual. Handles the WebSocket messages for this page. ws is the WebSocket connection, message is the received content and length is the message length.

virtual const char* getPageInfo() const = 0

Pure virtual. Returns the page name string shown in the connection info, for example "🕹️ Web Joystick: ".

virtual String getNavigationInfo() const = 0

Pure virtual. Returns the HTML of the navigation card (button) on the home page.

Virtual Methods (Optional overrides)

virtual void onWebSocketConnection(IWebSocket& ws)

Called when a new WebSocket connection opens. ws is the new connection.

virtual void onWebSocketClose(IWebSocket& ws)

Called when a WebSocket connection closes. ws is the closed connection.

Common Methods

const char* getPagePath() const

Returns the URL path of this page.

bool isEnabled() const

Returns true if the page is enabled, false if it is disabled.

void setEnabled(bool enable)

Turns the page on (true) or off (false).

Utility Methods

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

Sends the standard HTTP headers to the client. contentType is the MIME type (default "text/html").

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

Sends a message to one WebSocket client. ws is the target connection and message is the text to send.

void broadcastToAllClients(const char* message)

Sends a message to all connected WebSocket clients.

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

Sends large HTML content with chunked transfer encoding. Use it for big pages, so the ESP32 S3 Uno does not need one huge buffer.

Usage Example

The class below is a very small custom page. It answers the HTTP request with a short HTML page, and it replies to every WebSocket message with "Response: " plus the message.

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 { // Handle WebSocket messages sendWebSocketMessage(ws, ("Response: " + String(message)).c_str()); } 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>"; } };

Web Application Classes

These are the ready-made apps. Create one object for each app you want, then pass it to addApp().

DIYablesHomePage

The home page is the main menu. It links to every app you enabled.

Constructor

DIYablesHomePage()

URL Path

The path is / (root).

DIYablesWebChatPage

A chat box for two-way messages between the browser and the ESP32 S3 Uno.

Constructor

DIYablesWebChatPage()

URL Path

The path is /webchat.

Methods

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

Sets the callback for incoming chat messages.

void sendToWebChat(const String& message)

Sends a message to the web chat page.

DIYablesWebMonitorPage

A serial monitor in the browser. It shows live output and lets you type commands.

Constructor

DIYablesWebMonitorPage()

URL Path

The path is /webmonitor.

Methods

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

Sets the callback for incoming monitor messages.

void sendToWebMonitor(const String& message)

Sends a message to the web monitor page.

DIYablesWebDigitalPinsPage

Controls and watches digital pins 0-13 from the web page.

Constructor

DIYablesWebDigitalPinsPage()

URL Path

The path is /webdigitalpins.

Methods

void enablePin(int pin, int mode)

Enables a pin for web control. pin is the pin number (0-13). mode is WEB_PIN_OUTPUT or WEB_PIN_INPUT.

※ NOTE THAT:

The library only accepts numbers 0 to 13. On the ESP32 S3 Uno, use them as the Uno header labels D0 to D13, and turn each label into the real GPIO yourself in pinMode(), digitalWrite() and digitalRead() (for example D13 is GPIO12, D7 is GPIO14). The Web Digital Pins tutorial shows this with a small UNO_TO_GPIO table. Leave D0 and D1 disabled, because they carry the Serial Monitor, and take care with D6 (GPIO3) and D9 (GPIO46), which are boot strapping pins.

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

Sets the callback for pin write operations (output pins).

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

Sets the callback for pin read operations (input pins).

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

Sets the callback for pin mode changes.

void updatePinState(int pin, int state)

Updates a pin state in real time on all web clients.

DIYablesWebSliderPage

Two sliders for analog or PWM control.

Constructor

DIYablesWebSliderPage()

URL Path

The path is /webslider.

Methods

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

Sets the callback for slider changes from the web. The parameters are slider1 (0-255) and slider2 (0-255).

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

Sets the callback for when a web client asks for the current values.

void sendToWebSlider(int slider1, int slider2)

Sends the slider values to the web page.

DIYablesWebJoystickPage

A 2D joystick for robots and position control.

Constructor

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

autoReturn sets whether the joystick goes back to the center by itself. sensitivity is the smallest movement, in percent, that sends an update.

URL Path

The path is /webjoystick.

Methods

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

Sets the callback for joystick movement from the web. The parameters are x (-100 to 100) and y (-100 to 100).

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

Sets the callback for when a web client asks for the current position.

void sendToWebJoystick(int x, int y)

Sends the joystick position to the web page.

void setAutoReturn(bool autoReturn)

Sets the auto-return behavior.

void setSensitivity(float sensitivity)

Sets the movement sensitivity (percent).

DIYablesWebPlotterPage

Draws live data as a graph, with support for several data series.

Constructor

DIYablesWebPlotterPage()

URL Path

The path is /webplotter.

Methods

void setPlotTitle(const String& title)

Sets the plot title.

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

Sets the axis labels.

void enableAutoScale(bool enable)

Turns automatic Y-axis scaling on or off.

void setMaxSamples(int maxSamples)

Sets the maximum number of data points shown.

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

Adds a data point to a series.

void clearPlot()

Clears all data from the plot.

DIYablesNotFoundPage

An optional 404 error page. It gives a nicer message when someone opens a wrong URL.

Constructor

DIYablesNotFoundPage()

ESP32 S3 Uno Pinout

The image below shows the pinout of the ESP32 S3 Uno form board. Use it to match the Uno header pins (D2, A0, SDA…) to their GPIO numbers when you use the digital pins app or your own pin code.

Basic Usage Example

This sketch shows the normal pattern. It creates the server and three apps (home, chat and monitor), adds them, and connects to WiFi. When a chat message arrives, it prints the message to the Serial Monitor and sends a reply back to the chat page.

#include <DIYablesWebApps.h> // WiFi credentials const char* ssid = "YOUR_WIFI_SSID"; const char* password = "YOUR_WIFI_PASSWORD"; // Create server and web applications DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; DIYablesWebMonitorPage monitorPage; void setup() { Serial.begin(9600); // Add only the applications you need webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); webAppsServer.addApp(&monitorPage); // Optional: Add 404 page webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Start server if (webAppsServer.begin(ssid, password)) { Serial.println("Server started successfully"); Serial.print("IP: "); Serial.println(webAppsServer.getIPAddress()); } // Setup callbacks chatPage.onWebChatMessage([](const String& message) { Serial.println("Chat: " + message); chatPage.sendToWebChat("ESP32 S3 Uno received: " + message); }); } void loop() { webAppsServer.loop(); delay(10); }

Replace YOUR_WIFI_SSID and YOUR_WIFI_PASSWORD with your own network. Upload the sketch with the ESP32S3 Dev Module board selected, then open the Serial Monitor at 9600 baud. You should see something like this:

Newbiely | Arduino IDE 2.3.8

──

☐

Newbiely.ino

···

8 Serial.println("Hello World!");

Output

Serial Monitor

Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')

New Line

9600 baud

Server started successfully IP: 192.168.0.2 Chat: hello

Ln 11, Col 1

ESP32S3 Dev Module on COM15

Web Applications Overview

Each app has its own URL on the ESP32 S3 Uno. Replace [esp32-s3-uno-ip] with the IP address printed in the Serial Monitor.

Home Page

The URL is http://[esp32-s3-uno-ip]/. It is the main menu. It shows links to all enabled apps and the connection status.

WebChat Application

The URL is http://[esp32-s3-uno-ip]/webchat. It is a two-way message page with real-time messages, message history and the WebSocket status.

Web Monitor

The URL is http://[esp32-s3-uno-ip]/webmonitor. It replaces the Serial Monitor. It shows live serial output, has a command input and uses a dark theme.

Web Digital Pins Control

The URL is http://[esp32-s3-uno-ip]/webdigitalpins. It controls digital pins 0-13. You can switch each pin, use bulk actions and see the live state.

Web Slider Control

The URL is http://[esp32-s3-uno-ip]/webslider. It gives two independent sliders (0-255) for analog/PWM control, with preset values and live feedback.

Web Joystick Control

The URL is http://[esp32-s3-uno-ip]/webjoystick. It is a 2D position control for robots and cars. It works with touch or mouse, shows the coordinates and lets you change the sensitivity.

Web Plotter

The URL is http://[esp32-s3-uno-ip]/webplotter. It draws live data, with several data series, auto-scaling, and titles and axes you can set.

WebSocket Communication

All apps talk to the ESP32 S3 Uno over WebSocket on port 81. The WebSocket URL is ws://[esp32-s3-uno-ip]:81. The page reconnects by itself if the link drops, and the messages are plain text.

Message Formats

You only need these formats if you write your own web page or debug the link. The built-in apps handle them for you.

WebChat Messages

From the web: plain text message. To the web: plain text message.

Web Monitor Messages

From the web: plain text message. To the web: plain text message.

Web Digital Pin Messages

From the web: JSON, {"pin": 13, "state": 1}. To the web: JSON, {"pin": 13, "state": 1}.

Web Slider Messages

From the web: JSON, {"slider1": 128, "slider2": 255}. To the web: JSON, {"slider1": 128, "slider2": 255}.

Web Joystick Messages

From the web: JSON, {"x": 50, "y": -25}. To the web: JSON, {"x": 50, "y": -25}.

Web Plotter Messages

From the web: not used (display only). To the web: JSON, {"series": "temp", "x": 10.5, "y": 23.4}.

Error Handling

The library handles common errors by itself, so your sketch stays simple. It deals with WiFi connection failures, WebSocket disconnections, invalid message formats and client connection limits.

Memory Usage

Because the library is modular, you save memory by adding only the apps you use. The ESP32 S3 Uno has much more flash and RAM than a classic Uno, but the numbers below still help when your sketch grows.

Component	Flash	RAM
DIYablesWebAppServer	~8KB	~2KB
DIYablesHomePage	~3KB	~1KB
DIYablesWebChatPage	~6KB	~1.5KB
DIYablesWebMonitorPage	~5KB	~1.5KB
DIYablesWebDigitalPinsPage	~8KB	~2KB
DIYablesWebSliderPage	~6KB	~1.5KB
DIYablesWebJoystickPage	~7KB	~1.5KB
DIYablesWebPlotterPage	~10KB	~2KB
WebSocket Buffer	-	~1KB per connection

With all apps enabled, the total is about 53KB of flash and 12KB of RAM. A minimal setup (server + home page + one app) uses about 17KB of flash and 4.5KB of RAM.

Browser Compatibility

The web apps run in any modern browser. Supported browsers are Chrome 50+, Firefox 45+, Safari 10+, Edge 79+, and mobile browsers (iOS Safari, Chrome Mobile).

Security Notes

The library has no login or password for the web pages. Anyone on the same network can open them. Use it only on local, trusted networks, and add your own authentication if you ever expose the board to the public internet.

Common Issues

Most problems come from WiFi, the browser link or memory. Check these points first.

Cannot connect to WiFi

Check the SSID and password.
Make sure the network is 2.4GHz, not 5GHz.
Check the signal strength.

WebSocket connection fails

Make sure the IP address is correct.
Check your firewall settings.
Try a different browser.

High memory usage

Disable the apps you do not use.
Limit the number of connections at the same time.
Restart the ESP32 S3 Uno if memory gets fragmented.

Slow response

Check the WiFi signal strength.
Send WebSocket messages less often.
Keep your callback functions short.

Example Projects

Each app has its own step-by-step ESP32 S3 Uno tutorial with full code:

DIYables WebApps Library for ESP32 S3 Uno - library overview and installation
Web Chat Example
Web Monitor Example
Web Plotter Example
Web Digital Pins Example
Web Slider Example
Web Joystick Example
Multiple Web Apps Example

Example Applications

The DIYables ESP32 WebApps library also comes with example sketches. Open them in the Arduino IDE from File > Examples > DIYables ESP32 WebApps.

Available examples

Chat: a two-way message page
WebMonitor: a serial monitor replacement with extra features
WebDigitalPins: controls all digital pins with visual feedback
WebSlider: two sliders for analog/PWM control, with presets
WebJoystick: 2D position control for robot projects
MultipleWebApps: all apps running at the same time

See the examples/ folder of the library for the complete projects and the docs/ folder for detailed setup notes.

Platform Abstraction Interfaces

You do not need this part for normal projects. It explains how the library is built inside. The library uses a platform layer made of interfaces. These interfaces keep the main web app code separate from the board-specific network code, so the same apps can run on different hardware.

Core Interfaces

IWebClient

The interface for HTTP client connections.

class IWebClient { public: virtual ~IWebClient() = default; // Stream interface methods virtual int available() = 0; virtual int read() = 0; virtual int peek() = 0; virtual size_t write(uint8_t data) = 0; virtual size_t write(const uint8_t* buffer, size_t size) = 0; virtual void flush() = 0; // Connection management virtual bool connected() = 0; virtual void stop() = 0; // Convenience methods virtual void print(const String& str) = 0; virtual void println(const String& str) = 0; };

IWebSocket

The interface for WebSocket connections, with two-way communication.

class IWebSocket { public: enum DataType { TEXT = 1, BINARY = 2 }; enum CloseCode { NORMAL_CLOSURE = 1000, GOING_AWAY = 1001, PROTOCOL_ERROR = 1002, UNSUPPORTED_DATA = 1003, POLICY_VIOLATION = 1008, MESSAGE_TOO_BIG = 1009, INTERNAL_ERROR = 1011 }; virtual ~IWebSocket() = default; // Message handling virtual void sendText(const char* message) = 0; virtual void sendBinary(const uint8_t* data, size_t length) = 0; virtual bool isConnected() const = 0; virtual void close(CloseCode code = NORMAL_CLOSURE, const char* reason = nullptr) = 0; // Event callbacks virtual void onMessage(std::function<void(IWebSocket*, DataType, const char*, uint16_t)> callback) = 0; virtual void onClose(std::function<void(IWebSocket*, CloseCode, const char*, uint16_t)> callback) = 0; };

IWebServer

The interface for the HTTP server.

class IWebServer { public: virtual ~IWebServer() = default; // Server lifecycle virtual bool begin() = 0; virtual void stop() = 0; virtual IWebClient* available() = 0; // Configuration virtual void setPort(uint16_t port) = 0; virtual uint16_t getPort() const = 0; };

IWebSocketServer

The interface for the WebSocket server, with connection management.

class IWebSocketServer { public: using ConnectionCallback = std::function<void(IWebSocket*)>; using MessageCallback = std::function<void(IWebSocket*, IWebSocket::DataType, const char*, uint16_t)>; virtual ~IWebSocketServer() = default; // Server lifecycle virtual bool begin() = 0; virtual void stop() = 0; virtual void listen() = 0; // Event handling virtual void onConnection(ConnectionCallback callback) = 0; virtual void onMessage(MessageCallback callback) = 0; // Broadcasting virtual void broadcastText(const char* message) = 0; virtual void broadcastBinary(const uint8_t* data, size_t length) = 0; // Configuration virtual void setPort(uint16_t port) = 0; virtual uint16_t getPort() const = 0; };

INetworkProvider

The interface for the network connection.

class INetworkProvider { public: virtual ~INetworkProvider() = default; // Network lifecycle virtual bool begin(const char* ssid, const char* password) = 0; virtual void end() = 0; virtual bool isConnected() = 0; // Network information virtual String getLocalIP() = 0; virtual String getSSID() = 0; virtual int32_t getRSSI() = 0; };

IServerFactory

The factory interface that creates the platform-specific objects.

class IServerFactory { public: virtual ~IServerFactory() = default; // Factory methods virtual INetworkProvider* createNetworkProvider() = 0; virtual IWebServer* createWebServer(uint16_t port) = 0; virtual IWebSocketServer* createWebSocketServer(uint16_t port) = 0; // Platform information virtual String getPlatformName() const = 0; };

Platform Implementation Example

On ESP32-family boards, including the ESP32 S3 Uno, the interfaces are built on the DIYables_ESP32_WebServer library. The class names below come from the library itself.

class ESP32ServerFactory : public IServerFactory { public: INetworkProvider* createNetworkProvider() override { return new ESP32NetworkProvider(); } IWebServer* createWebServer(uint16_t port) override { return new ESP32WebServer(port); } IWebSocketServer* createWebSocketServer(uint16_t port) override { return new ESP32WebSocketServer(port); } String getPlatformName() const override { return "ESP32"; } };

Adding New Platform Support

To add support for another board, follow these steps:

Implement all interfaces for the target board.
Create a ServerFactory that creates your implementations.
Handle the board-specific networking and WebSocket protocol.
Test with the existing WebApp classes. They need no changes.

A server is then created from the factory like this:

ESP32ServerFactory factory; DIYablesWebAppServer server(factory, 80, 81);

Benefits of Interface-Based Design

This design keeps the web app logic the same on every board. New hardware is easy to add, because the board-specific code sits in one place. The interfaces can be mocked for unit tests, and you get the same API on every supported platform.

Current Platform Support

✅ ESP32 boards (including the ESP32 S3 Uno): fully implemented and tested in the DIYables ESP32 WebApps library
🚀 Future platforms: can be added with the same interface pattern

FAQ

Which library do I install for the ESP32 S3 Uno: "DIYables WebApps" or "DIYables ESP32 WebApps"?

Install "DIYables ESP32 WebApps". The other library, "DIYables WebApps", is made for the Arduino UNO R4 WiFi and does not build for ESP32 boards. Both use the same class names and the same #include <DIYablesWebApps.h>, so sketches are almost the same.

Which Arduino IDE board do I select?

Install the "esp32 by Espressif Systems" core and choose ESP32S3 Dev Module. Then select the COM port of the ESP32 S3 Uno.

Can I use 5GHz WiFi?

No. The ESP32 S3 Uno supports only 2.4GHz WiFi. If your router has both bands, connect to the 2.4GHz network name.

What pin number do I pass to enablePin() on the ESP32 S3 Uno?

Pass the Uno header label (0 to 13), and map it to the real GPIO in your own code. For example, D13 is GPIO12 and D7 is GPIO14. The pins are 3.3V and not 5V tolerant, so do not connect 5V signals to them.

What if my project needs more pins than the Uno headers give?

The ESP32 S3 Uno has two extra rows of holes with more GPIOs: GPIO15 and GPIO16 (I/O, PWM, analog), GPIO45 and GPIO35 to GPIO42 (I/O, PWM), and GPIO47/GPIO48 (output only, PWM). Solder pin headers to use them and write the GPIO number in code. For web-controlled outputs like LEDs or relays, GPIO35 to GPIO42 are a good first choice; for analog sensors shown on the plotter or gauge, use GPIO15/GPIO16. Be careful with two groups. GPIO47 and GPIO48 may run at 1.8V instead of 3.3V on some modules (especially ones with "V" in the name, like R8V or R16V), so 3.3V devices can be damaged or act strangely. GPIO0, GPIO3 (D6), GPIO45 and GPIO46 (D9) are boot strapping pins, and a wrong connection can stop the board from booting or uploading code. Use the other extra pins first.

How many browsers can connect at the same time?

Several clients can connect, but each WebSocket connection uses about 1KB of RAM. The library also has a client connection limit. For a smooth experience, keep the number of open pages small.

Troubleshooting

Problem	Possible Cause	Solution
No COM port in Arduino IDE	USB driver missing or board not in upload mode	Install the CP210x or CH340 driver, use a data USB cable, or hold BOOT while pressing RESET
Compile error "DIYablesWebApps.h not found"	Library not installed	Install "DIYables ESP32 WebApps" and its dependencies from the Library Manager
Compile error about WiFiS3.h	Wrong library (the non-ESP32 version) installed	Remove "DIYables WebApps" and install "DIYables ESP32 WebApps"
Serial Monitor shows no IP address	Wrong SSID or password, or a 5GHz network	Check the credentials and use a 2.4GHz network
Web page opens but does not update	WebSocket port 81 is blocked	Check the firewall, use the same WiFi network, or try another browser
Board resets or behaves strangely after many page loads	Low memory or a weak USB power supply	Remove unused apps, close extra browser tabs, and use a good USB cable and port
Digital pins page controls the wrong pin	The Uno label was not mapped to its GPIO	Keep 0 to 13 in enablePin() and map each label to its GPIO (see the UNO_TO_GPIO table)
Board does not boot after wiring a pin	A boot strapping pin (GPIO0, D6 GPIO3, D9 GPIO46) is pulled at startup	Move the device to another pin or remove it while booting

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!