DIYables ESP32 Web Apps Web Rotator
Overview
The WebRotator example creates an interactive rotatable disc control interface accessible from any web browser. Designed for ESP32 educational platform with enhanced motor control capabilities, built-in servo/stepper control features, and seamless integration with robotics educational modules. Perfect for controlling servo motors, stepper motors, robotic arms, antennas, or any system requiring precise rotational control.
Features
- Interactive Rotatable Disc: Touch and mouse-controlled disc interface
- Dual Operation Modes: Continuous (0-360°) and Limited angle range
- Real-time Angle Feedback: Precise angle display and control
- Visual Position Indicator: Clear disc position marker with gradient design
- Touch & Mouse Support: Works on desktop, tablet, and mobile devices
- Automatic Config Handling: Set mode and range once in constructor
- WebSocket Communication: Instant response without page refresh
- Professional UI: Conic gradient design with smooth rotation
Hardware Used In This Tutorial
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links in this section are Amazon affiliate links, meaning we may earn a commission at no additional cost to you if you make a purchase through them. Additionally, some links direct you to products from our own brand, DIYables .
Setup Instructions
Quick Instructions
Follow these instructions step by step:
- If this is your first time using the ESP32, refer to the tutorial on setting up the environment for ESP32 in the Arduino IDE.
- Connect the ESP32 board to your computer using a USB cable.
- Launch the Arduino IDE on your computer.
- Select the appropriate ESP32 board (e.g. ESP32 Dev Module) 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.
- 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 WebRotator example, or copy the above code and paste it to the editor of Arduino IDE
/*
* DIYables WebApp Library - Web Rotator Example
*
* This example demonstrates the Web Rotator application:
* - Interactive rotatable disc control
* - Two modes: Continuous rotation and Limited angle range
* - Real-time angle feedback with WebSocket communication
* - Touch and mouse support for desktop and mobile
*
* Features:
* - Configurable rotation modes (continuous or limited)
* - Beautiful conic gradient disc with visual indicator
* - Real-time angle display and feedback
* - WebSocket communication for live updates
* - Professional responsive UI design
*
* 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://[esp32-ip]/web-rotator in your web browser
*/
#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;
// Rotator configuration constants
const int ROTATOR_MODE = ROTATOR_MODE_CONTINUOUS; // Change to ROTATOR_MODE_LIMITED for limited rotation
const float MIN_ANGLE = 0.0; // Minimum angle for limited mode
const float MAX_ANGLE = 180.0; // Maximum angle for limited mode
// Create WebRotator page with configuration
//DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, MIN_ANGLE, MAX_ANGLE);
// Variables for angle tracking
float currentAngle = 0.0;
void setup() {
Serial.begin(9600);
delay(1000);
// TODO: Initialize your hardware pins here
Serial.println("DIYables ESP32 WebApp - Web Rotator Example");
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRotatorPage);
// Set 404 Not Found page (optional - for better user experience)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback functions for WebRotator
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
// Start server
webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD);
if (ROTATOR_MODE == ROTATOR_MODE_LIMITED) {
Serial.println("\nRotator Mode: Limited");
Serial.print("Angle Range: ");
Serial.print(MIN_ANGLE);
Serial.print("° to ");
Serial.print(MAX_ANGLE);
Serial.println("°");
} else {
Serial.println("\nRotator Mode: Continuous Rotation");
}
Serial.println("\nTurn the disc in your web browser to control the rotator!");
}
void loop() {
// Handle web server and WebSocket connections
webAppsServer.loop();
// Simulate rotator movement or control actual hardware here
// For demonstration, we'll just echo back the received angle
delay(10);
}
/**
* Callback function called when angle is received from web interface
* This is where you would control your actual rotator hardware
*/
void onRotatorAngleReceived(float angle) {
currentAngle = angle;
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// TODO: Add your rotator control code here
// Examples:
// - Control servo motor: servo.write(map(angle, 0, 360, 0, 180));
// - Control stepper motor: stepper.moveTo(angle * stepsPerDegree);
// - Control DC motor with encoder feedback
// - Send commands to external rotator controller
// Note: No echo back to avoid interfering with smooth web interface rotation
}
/**
* Example function to change rotator mode at runtime
* Call this function to switch between continuous and limited modes
*/
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
/**
* Example function to send angle updates to web interface
* Call this function when your rotator position changes
*/
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
- Configure WiFi credentials in the code by updating these lines:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Click Upload button on Arduino IDE to upload code to ESP32
- Open the Serial Monitor
- Check out the result on Serial Monitor. It looks like the below
COM6
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
DIYables WebApp Library
Platform: 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 Rotator: http://192.168.0.2/web-rotator
==========================================
Autoscroll
Clear output
9600 baud
Newline
- If you do not see anything, reboot ESP32 board.
- Open a web browser on your PC or mobile phone.
- Type the IP address shown in the Serial Monitor to the web browser
- Example: http://192.168.1.100
- You will see the home page like below image:
- Click to the Web Rotator link, you will see the Web Rotator app's UI like the below:
- Or you can also access the page directly by IP address followed by /web-rotator. For example: http://192.168.1.100/web-rotator
- You will see an interactive rotatable disc that you can drag to control rotation
Web Interface Features
Rotatable Disc Control
- Interactive Disc: Click and drag to rotate the disc
- Visual Feedback: Real-time angle display and position indicator
- Smooth Animation: Fluid rotation with professional gradient design
- Angle Display: Current angle shown in degrees
- Mode Indicator: Shows current rotation mode and limits
Touch and Mouse Support
- Desktop Control: Mouse click and drag
- Mobile Control: Touch and swipe gestures
- Responsive Design: Optimized for all screen sizes
- Visual Cues: Clear indicators for interaction areas
Code Configuration
Rotator Setup
// Continuous rotation mode (full 0-360 degrees)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
// Limited rotation mode with custom range
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
// Set up angle callback
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
Receiving Angle Commands
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator angle received: ");
Serial.print(angle, 1);
Serial.println("°");
// Control your hardware here
}
Operation Modes
Continuous Mode
- Full Rotation: 0° to 360° and beyond, with no upper limit
- No Wrap Around: Angle values can increase above 360° and do not reset to 0°
- Use Cases: Continuous rotation servos, antennas, turntables
- Configuration: ROTATOR_MODE_CONTINUOUS
Limited Mode
- Custom Range: Define minimum and maximum angles
- Boundary Limits: Prevents rotation beyond set limits
- Use Cases: Standard servos, robotic arms, steering systems
- Configuration: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Hardware Integration
Servo Motor Control
Note: The following code snippet is a partial example and must be integrated into your main ESP32 sketch to function correctly.
#include <Servo.h>
Servo myServo;
// Set rotator to limited mode: 0 to 180 degrees
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
void setup() {
myServo.attach(9); // Servo on pin 9
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
}
void onRotatorAngleReceived(float angle) {
// Directly write angle (0-180) to servo
myServo.write((int)angle);
}
Stepper Motor Control
#include <Stepper.h>
const int stepsPerRevolution = 200;
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);
void onRotatorAngleReceived(float angle) {
// Calculate steps for desired angle
int steps = (angle / 360.0) * stepsPerRevolution;
myStepper.step(steps);
}
Customization Options
Angle Range
- Minimum Angle: Set lowest allowed rotation
- Maximum Angle: Set highest allowed rotation
- Default Position: Starting angle when system boots
- Resolution: Control precision of angle updates
Visual Appearance
The web interface automatically adapts to your configuration:
- Range Display: Shows configured angle limits
- Mode Indicator: Displays current operation mode
- Position Marker: Visual indicator of current angle
- Gradient Design: Professional appearance with smooth colors
Common Use Cases
Educational Projects
- Servo Control Learning: Understanding PWM and servo operation
- Robotics Education: Arm positioning, joint control
- Antenna Positioning: Directional antenna control
- Camera Pan/Tilt: Remote camera positioning
Practical Applications
- Home Automation: Automated blinds, vents, doors
- Robotics: Robotic arm joints, mobile robot steering
- IoT Projects: Remote positioning systems
- Industrial: Automated positioning, valve control
Troubleshooting
Rotation Not Working
- Check WiFi connection and WebSocket status
- Verify callback function is properly set
- Ensure servo/motor is properly connected
- Check power supply for motors
Incorrect Angle Values
- Verify angle mapping for your specific hardware
- Check servo library and pin configuration
- Ensure proper scaling in callback function
- Test with Serial Monitor output
Connection Issues
- Verify IP address in browser
- Check firewall settings
- Ensure 2.4GHz WiFi network (5GHz not supported)
- Try refreshing browser page
Advanced Features
Runtime Mode Changes
You can change rotator mode during operation:
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator mode changed to: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Limited (");
Serial.print(minAng);
Serial.print("° to ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continuous");
}
}
Position Feedback
Send current position back to the web interface:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Angle update sent to web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Note: Sending frequent angle feedback to the web interface may cause less smooth movement. Use this feature only if real-time position updates are required.
Multi-Axis Control
Combine multiple rotators for complex positioning:
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
Educational Integration
STEM Learning Objectives
- Motor Control: Understanding servo and stepper operation
- Coordinate Systems: Angle measurement and positioning
- Web Technologies: Real-time control interfaces
- Programming: Callback functions, hardware control
Classroom Activities
- Servo Calibration: Learn servo operation and PWM signals
- Position Control: Practice precise positioning tasks
- System Integration: Combine sensors with motor control
- Problem Solving: Debug hardware and software issues
This example provides a comprehensive foundation for rotational control systems, perfect for both educational and practical robotics applications.