Arduino Nano ESP32 - Web Apps Web Slider
Overview
This tutorial covers the DIYablesWebSliderPage class from the DIYables ESP32 WebApps Library. The page presents two independent sliders in the browser, each with a range of 0 to 255. The Arduino Nano ESP32 receives slider values over WebSocket through a callback. The values are directly usable with analogWrite() for PWM-based control of LEDs, motors, or any 8-bit output.
What This Tutorial Covers
- Receiving slider values in a sketch callback
- Applying slider 1 and slider 2 values to analogWrite() outputs
- Supplying the current slider positions to newly connected browsers
- Setting default initial slider positions
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 WebSlider example, or copy the above code and paste it to the editor of Arduino IDE
/*
* DIYables WebApp Library - Web Slider Example
*
* This example demonstrates the Web Slider feature:
* - Two independent sliders (0-255)
* - Real-time value monitoring
* - Template for hardware control
*
* 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]/webslider
*/
#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;
DIYablesWebSliderPage webSliderPage;
// Current slider values
int slider1Value = 64; // Default 25%
int slider2Value = 128; // Default 50%
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Slider Example");
// Add home and web slider pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up slider callback for value changes
webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
// Store the received values
slider1Value = slider1;
slider2Value = slider2;
// Print slider values (0-255)
Serial.println("Slider 1: " + String(slider1) + ", Slider 2: " + String(slider2));
// TODO: Add your control logic here based on slider values
// Examples:
// - Control PWM: analogWrite(LED_PIN, slider1);
// - Control servos: servo.write(map(slider1, 0, 255, 0, 180));
// - Control motor speed: analogWrite(MOTOR_PIN, slider2);
// - Control brightness: strip.setBrightness(slider1);
// - Send values via Serial, I2C, SPI, etc.
});
// Set up callback for config requests (when client requests current values)
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
Serial.println("Web client requested values - Sent: Slider1=" + String(slider1Value) + ", Slider2=" + String(slider2Value));
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// TODO: 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 Slider Example
INFO: Added app /
INFO: Added app /web-slider
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 Slider: http://192.168.0.2/web-slider
==========================================
- 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 slider application:
- Select the Web Slider card to open the slider control page:
- The page is also directly accessible at http://192.168.0.2/web-slider.
- Move the sliders and observe the values printed in the Serial Monitor.
Default Slider Values
Track the current slider positions in state variables and set defaults before registering callbacks:
int slider1Value = 64; // 25% initial position
int slider2Value = 128; // 50% initial position
Callbacks
Receiving Slider Changes
Called each time the user moves either slider:
webSliderPage.onSliderValueFromWeb([](int s1, int s2) {
slider1Value = s1;
slider2Value = s2;
Serial.println("Slider1: " + String(s1) + " Slider2: " + String(s2));
analogWrite(PWM_PIN_1, s1);
analogWrite(PWM_PIN_2, s2);
});
Supplying Values to the Browser
Called when a browser connects and requests the current positions:
webSliderPage.onSliderValueToWeb([]() {
webSliderPage.sendToWebSlider(slider1Value, slider2Value);
});
Typical Use Cases
LED brightness: Connect slider 1 to a PWM-capable pin with an LED. The 0–255 range maps directly to 0–100% brightness via analogWrite().
Motor speed: Send slider values to a motor driver's speed control input. Scale to the required range inside the callback.
Dual channel control: Slider 1 and slider 2 are fully independent. Use one for speed and one for direction, or one per motor in a dual-drive system.
Troubleshooting
Slider values not received
- Confirm onSliderValueFromWeb is registered before webAppsServer.begin()
- Check the Serial Monitor for incoming values
- Verify the browser shows the WebSocket connection as active
Browser sliders reset on reconnect
- Implement onSliderValueToWeb and call sendToWebSlider() inside it so the browser restores the last positions on connect
No PWM output
- Confirm the pin supports analogWrite() on Arduino Nano ESP32
- Check that pinMode(pin, OUTPUT) is set before analogWrite()