Arduino WebRotator Voorbeeld - Interactieve Rotationele Besturing Tutorial
Overzicht
Het WebRotator voorbeeld creëert een interactieve draaibare schijfbesturing interface die toegankelijk is vanuit elke webbrowser. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met uitgebreide motorbesturing mogelijkheden, ingebouwde servo/stappenmotor besturing functies, en naadloze integratie met robotica educatieve modules. Perfect voor het besturen van servomotoren, stappenmotoren, robotarmen, antennes, of elk systeem dat precieze rotationele besturing vereist.
Functies
- Interactieve Draaibare Schijf: Touch en muis-bestuurde schijf interface
- Dubbele Bedrijfsmodi: Continu (0-360°) en Beperkt hoekbereik
- Real-time Hoekterugkoppeling: Precieze hoekweergave en besturing
- Visuele Positie-indicator: Duidelijke schijfpositie markering met gradiënt ontwerp
- Touch & Muisondersteuning: Werkt op desktop, tablet en mobiele apparaten
- Automatische Configuratie Verwerking: Stel modus en bereik eenmaal in bij constructor
- WebSocket Communicatie: Directe respons zonder pagina verversing
- Professionele UI: Conische gradiënt ontwerp met soepele rotatie
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan uitgebreid worden voor andere hardware platforms. Zie DIYables_WebApps_ESP32
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit de eerste keer is dat u de Arduino Uno R4 WiFi/DIYables STEM V4 IoT gebruikt, raadpleeg de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM-poort.
- Navigeer naar het Libraries pictogram in de linker balk van de Arduino IDE.
- Zoek "DIYables WebApps", vind vervolgens de DIYables WebApps bibliotheek door DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheek afhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheek afhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebRotator voorbeeld, of kopieer de bovenstaande code en plak het in de editor van 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* 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://[arduino-ip]/web-rotator in your web browser
*/
#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
UnoR4ServerFactory 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 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("°");
}
- Configureer WiFi-referenties in de code door deze regels bij te werken:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload knop in Arduino IDE om code naar Arduino UNO R4/DIYables STEM V4 IoT te uploaden
- Open de Serial Monitor
- Bekijk het resultaat in Serial Monitor. Het ziet er uit zoals hieronder
COM6
DIYables WebApp - Web Rotator Example
INFO: Added app /
INFO: Added app /web-rotator
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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
- Als u niets ziet, herstart het Arduino board.
- Open een webbrowser op uw PC of mobiele telefoon.
- Type het IP-adres dat getoond wordt in de Serial Monitor in de webbrowser
- Voorbeeld: http://192.168.1.100
- U ziet de startpagina zoals in de onderstaande afbeelding:
- Klik op de Web Rotator link, u ziet de Web Rotator app's UI zoals hieronder:
- Of u kunt ook direct naar de pagina door het IP-adres gevolgd door /web-rotator. Bijvoorbeeld: http://192.168.1.100/web-rotator
- U ziet een interactieve draaibare schijf die u kunt slepen om rotatie te besturen
Web Interface Functies
Draaibare Schijfbesturing
- Interactieve Schijf: Klik en sleep om de schijf te draaien
- Visuele Terugkoppeling: Real-time hoekweergave en positie-indicator
- Soepele Animatie: Vloeiende rotatie met professioneel gradiënt ontwerp
- Hoekweergave: Huidige hoek getoond in graden
- Modus Indicator: Toont huidige rotatie modus en limieten
Touch en Muisondersteuning
- Desktop Besturing: Muisklik en slepen
- Mobiele Besturing: Touch en swipe bewegingen
- Responsief Ontwerp: Geoptimaliseerd voor alle schermformaten
- Visuele Aanwijzingen: Duidelijke indicatoren voor interactie gebieden
Code Configuratie
Rotator Setup
// Continue rotatie modus (volledige 0-360 graden)
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);
// Beperkte rotatie modus met aangepast bereik
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
// Stel hoek callback in
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
Hoekcommando's Ontvangen
void onRotatorAngleReceived(float angle) {
Serial.print("Rotator hoek ontvangen: ");
Serial.print(angle, 1);
Serial.println("°");
// Bestuur uw hardware hier
}
Bedrijfsmodi
Continue Modus
- Volledige Rotatie: 0° tot 360° en verder, zonder bovenlimiet
- Geen Omslag: Hoekwaarden kunnen boven 360° stijgen en resetten niet naar 0°
- Toepassingen: Continue rotatie servo's, antennes, draaischijven
- Configuratie: ROTATOR_MODE_CONTINUOUS
Beperkte Modus
- Aangepast Bereik: Definieer minimum en maximum hoeken
- Grenslimieten: Voorkomt rotatie buiten ingestelde limieten
- Toepassingen: Standaard servo's, robotarmen, stuursystemen
- Configuratie: ROTATOR_MODE_LIMITED, minAngle, maxAngle
Hardware Integratie
Servomotor Besturing
Opmerking: Het volgende codefragment is een gedeeltelijk voorbeeld en moet geïntegreerd worden in uw hoofdArduino sketch om correct te functioneren.
#include <Servo.h>
Servo myServo;
// Stel rotator in op beperkte modus: 0 tot 180 graden
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_LIMITED, 0.0, 180.0);
void setup() {
myServo.attach(9); // Servo op pin 9
webRotatorPage.onRotatorAngleFromWeb(onRotatorAngleReceived);
}
void onRotatorAngleReceived(float angle) {
// Schrijf hoek (0-180) direct naar servo
myServo.write((int)angle);
}
Stappenmotor Besturing
#include <Stepper.h>
const int stepsPerRevolution = 200;
Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);
void onRotatorAngleReceived(float angle) {
// Bereken stappen voor gewenste hoek
int steps = (angle / 360.0) * stepsPerRevolution;
myStepper.step(steps);
}
Aanpassingsopties
Hoekbereik
- Minimum Hoek: Stel laagste toegestane rotatie in
- Maximum Hoek: Stel hoogste toegestane rotatie in
- Standaardpositie: Starthoek wanneer systeem opstart
- Resolutie: Bestuur precisie van hoekupdates
Visueel Uiterlijk
De webinterface past zich automatisch aan uw configuratie aan:
- Bereikweergave: Toont geconfigureerde hoeklimieten
- Modus Indicator: Toont huidige bedrijfsmodus
- Positiemarkering: Visuele indicator van huidige hoek
- Gradiënt Ontwerp: Professioneel uiterlijk met soepele kleuren
Veelvoorkomende Toepassingen
Educatieve Projecten
- Servo Besturing Leren: PWM en servo werking begrijpen
- Robotica Onderwijs: Arm positionering, gewricht besturing
- Antenne Positionering: Directionele antenne besturing
- Camera Pan/Tilt: Externe camera positionering
Praktische Toepassingen
- Domotica: Geautomatiseerde zonwering, ventielen, deuren
- Robotica: Robotarm gewrichten, mobiele robot sturing
- IoT Projecten: Externe positioneringssystemen
- Industrieel: Geautomatiseerde positionering, klep besturing
Probleemoplossing
Rotatie Werkt Niet
- Controleer WiFi-verbinding en WebSocket status
- Verifieer dat callback functie correct is ingesteld
- Zorg ervoor dat servo/motor goed aangesloten is
- Controleer voeding voor motoren
Onjuiste Hoekwaarden
- Verifieer hoek mapping voor uw specifieke hardware
- Controleer servo bibliotheek en pin configuratie
- Zorg voor juiste schaling in callback functie
- Test met Serial Monitor uitvoer
Verbindingsproblemen
- Verifieer IP-adres in browser
- Controleer firewall instellingen
- Zorg voor 2.4GHz WiFi netwerk (5GHz niet ondersteund)
- Probeer browserpagina te verversen
Geavanceerde Functies
Runtime Modus Wijzigingen
U kunt rotator modus wijzigen tijdens bedrijf:
void setRotatorMode(int mode, float minAng = 0, float maxAng = 360) {
webRotatorPage.setRotatorMode(mode, minAng, maxAng);
Serial.print("Rotator modus gewijzigd naar: ");
if (mode == ROTATOR_MODE_LIMITED) {
Serial.print("Beperkt (");
Serial.print(minAng);
Serial.print("° tot ");
Serial.print(maxAng);
Serial.println("°)");
} else {
Serial.println("Continu");
}
}
Positie Terugkoppeling
Stuur huidige positie terug naar de webinterface:
void sendAngleUpdate(float angle) {
currentAngle = angle;
webRotatorPage.sendToWebRotator(angle);
Serial.print("Hoek update verzonden naar web: ");
Serial.print(angle, 1);
Serial.println("°");
}
Opmerking: Het frequent verzenden van hoek feedback naar de webinterface kan minder soepele beweging veroorzaken. Gebruik deze functie alleen als real-time positie updates vereist zijn.
Multi-As Besturing
Combineer meerdere rotators voor complexe positionering:
DIYablesWebRotatorPage panRotator(ROTATOR_MODE_CONTINUOUS);
DIYablesWebRotatorPage tiltRotator(ROTATOR_MODE_LIMITED, -90.0, 90.0);
server.addApp(&panRotator);
server.addApp(&tiltRotator);
Educatieve Integratie
STEM Leerdoelen
- Motorbesturing: Servo en stappenmotor werking begrijpen
- Coördinatensystemen: Hoekmeting en positionering
- Webtechnologieën: Real-time besturingsinterfaces
- Programmeren: Callback functies, hardware besturing
Klaslokaal Activiteiten
- Servo Kalibratie: Servo werking en PWM signalen leren
- Positiebesturing: Precieze positioneringstaken oefenen
- Systeemintegratie: Sensoren combineren met motorbesturing
- Probleemoplossing: Hardware en software problemen debuggen
Dit voorbeeld biedt een uitgebreide basis voor rotationele besturingssystemen, perfect voor zowel educatieve als praktische robotica toepassingen.