DIYables WebApps Library for Arduino Uno R4 WiFi
A comprehensive Arduino library for creating WebSocket-based web applications on Arduino Uno R4 WiFi. This library provides multiple built-in web applications for monitoring, controlling, and interacting with your Arduino projects through a modern web interface.
Components and supplies
1
Arduino UNO R4 WIFI
1
Arduino USB Type-C® Cable 2-in1
1
DIYables STEM V4 IoT Starter Kit, Fully Compatible with Arduino Uno R4 WiFi
1
DIYables STEM V4 IoT, Fully Compatible with Arduino Uno R4 WiFi
Apps and platforms
1
Arduino IDE
Project description
Code
DIYables WebApps - Multiple Web Apps
cpp
DIYables WebApps - Multiple Web Apps
1/* 2 * DIYables WebApp Library - Multiple WebApps Example 3 * 4 * This example demonstrates multiple web apps of the DIYables WebApp library: 5 * - Home page with links to multiple web apps 6 * - Web Monitor: Real-time serial monitoring via WebSocket 7 * - Web Slider: Dual slider control 8 * - Web Joystick: Interactive joystick control 9 * - Web Rotator: Interactive rotatable disc control 10 * - Web Analog Gauge: Professional circular gauge for sensor monitoring 11 * - Web Table: Two-column data table with real-time updates 12 * - Web Plotter: See WebPlotter example for real-time data visualization 13 * 14 * Features: 15 * - Simplified callback system - no manual command parsing needed 16 * - Automatic state synchronization and JSON handling 17 * - All protocol details handled by the library 18 * - Template for hardware control 19 * 20 * Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT 21 * 22 * Setup: 23 * 1. Update WiFi credentials below 24 * 2. Upload the sketch to your Arduino 25 * 3. Open Serial Monitor to see the IP address 26 * 4. Navigate to the IP address in your web browser 27 */ 28 29#include <DIYablesWebApps.h> 30 31// WiFi credentials - UPDATE THESE WITH YOUR NETWORK 32const char WIFI_SSID[] = "YOUR_WIFI_SSID"; 33const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; 34 35// Create WebApp server and page instances 36UnoR4ServerFactory factory; 37DIYablesWebAppServer webAppsServer(factory, 80, 81); 38DIYablesHomePage homePage; 39DIYablesWebMonitorPage webMonitorPage; 40DIYablesWebSliderPage webSliderPage; 41DIYablesWebJoystickPage webJoystickPage(false, 5); // autoReturn=false, sensitivity=5 42DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Continuous rotation mode (0-360°) 43DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 100.0, "%"); // Range: 0-100%, units: % 44DIYablesWebTablePage webTablePage; 45 46// Variables to track states 47int currentSlider1 = 64; // Slider 1 value (0-255) 48int currentSlider2 = 128; // Slider 2 value (0-255) 49int currentJoystickX = 0; // Current joystick X value (-100 to 100) 50int currentJoystickY = 0; // Current joystick Y value (-100 to 100) 51int currentRotatorAngle = 0; // Current rotator angle (0-360°) 52float currentGaugeValue = 50.0; // Current gauge value (0.0-100.0) 53 54void setup() { 55 Serial.begin(9600); 56 delay(1000); 57 58 // TODO: Initialize your hardware pins here 59 60 Serial.println("DIYables WebApp - Multiple Apps Example"); 61 62 // Add all web applications to the server 63 webAppsServer.addApp(&homePage); 64 webAppsServer.addApp(&webMonitorPage); 65 webAppsServer.addApp(&webSliderPage); 66 webAppsServer.addApp(&webJoystickPage); 67 webAppsServer.addApp(&webRotatorPage); 68 webAppsServer.addApp(&webAnalogGaugePage); 69 webAppsServer.addApp(&webTablePage); 70 // Add more web apps here (e.g., WebPlotter) 71 72 // Set 404 Not Found page (optional - for better user experience) 73 webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); 74 75 // Configure table structure (only attribute names, values will be updated dynamically) 76 webTablePage.addRow("Arduino Status"); 77 webTablePage.addRow("WiFi Connected"); 78 webTablePage.addRow("Uptime"); 79 webTablePage.addRow("Slider 1"); 80 webTablePage.addRow("Slider 2"); 81 webTablePage.addRow("Joystick X"); 82 webTablePage.addRow("Joystick Y"); 83 webTablePage.addRow("Rotator Angle"); 84 webTablePage.addRow("Gauge Value"); 85 86 // Start the WebApp server 87 if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) { 88 while (1) { 89 Serial.println("Failed to start WebApp server!"); 90 delay(1000); 91 } 92 } 93 94 setupCallbacks(); 95} 96 97void setupCallbacks() { 98 // Web Monitor callback - echo messages back 99 webMonitorPage.onWebMonitorMessage([](const String& message) { 100 Serial.println("Web Monitor: " + message); 101 webMonitorPage.sendToWebMonitor("Arduino received: " + message); 102 }); 103 104 // Web Slider callback - handle slider values 105 webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) { 106 // Store the received values 107 currentSlider1 = slider1; 108 currentSlider2 = slider2; 109 110 // Print slider values (0-255) without String concatenation 111 Serial.print("Slider 1: "); 112 Serial.print(slider1); 113 Serial.print(", Slider 2: "); 114 Serial.println(slider2); 115 116 // Update table with new slider values using String() conversion 117 webTablePage.sendValueUpdate("Slider 1", String(slider1)); 118 webTablePage.sendValueUpdate("Slider 2", String(slider2)); 119 120 // TODO: Add your control logic here based on slider values 121 // Examples: 122 // - Control PWM: analogWrite(LED_PIN, slider1); 123 // - Control servos: servo.write(map(slider1, 0, 255, 0, 180)); 124 // - Control motor speed: analogWrite(MOTOR_PIN, slider2); 125 126 // Update gauge based on slider1 value (map 0-255 to 0-100) 127 currentGaugeValue = map(slider1, 0, 255, 0, 100); 128 webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue); 129 char gaugeStr[16]; 130 snprintf(gaugeStr, sizeof(gaugeStr), "%.1f%%", currentGaugeValue); 131 webTablePage.sendValueUpdate("Gauge Value", String(gaugeStr)); 132 }); 133 134 // Handle slider value requests 135 webSliderPage.onSliderValueToWeb([]() { 136 webSliderPage.sendToWebSlider(currentSlider1, currentSlider2); 137 }); 138 139 // Web Joystick callback - handle joystick movement 140 webJoystickPage.onJoystickValueFromWeb([](int x, int y) { 141 // Store the received values 142 currentJoystickX = x; 143 currentJoystickY = y; 144 145 // Print joystick position values (-100 to +100) 146 Serial.print("Joystick - X: "); 147 Serial.print(x); 148 Serial.print(", Y: "); 149 Serial.println(y); 150 Serial.print(x); 151 Serial.print(", Y: "); 152 Serial.println(y); 153 154 // Update table with new joystick values 155 webTablePage.sendValueUpdate("Joystick X", String(x)); 156 webTablePage.sendValueUpdate("Joystick Y", String(y)); 157 158 // TODO: Add your control logic here based on joystick position 159 // Examples: 160 // - Control motors: if (x > 50) { /* move right */ } 161 // - Control servos: servo.write(map(y, -100, 100, 0, 180)); 162 // - Control LEDs: analogWrite(LED_PIN, map(abs(x), 0, 100, 0, 255)); 163 }); 164 165 // Handle joystick values requests (when web page loads/reconnects) 166 webJoystickPage.onJoystickValueToWeb([]() { 167 webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY); 168 }); 169 170 // Web Rotator callback - handle rotation angle changes 171 webRotatorPage.onRotatorAngleFromWeb([](float angle) { 172 // Store the received angle 173 currentRotatorAngle = (int)angle; 174 175 // Print rotator angle (0-360°) 176 Serial.println("Rotator angle: " + String(angle) + "°"); 177 178 // Update table with new rotator angle 179 webTablePage.sendValueUpdate("Rotator Angle", String(angle, 0) + "°"); 180 181 // TODO: Add your control logic here based on rotator angle 182 // Examples: 183 // - Control servo: servo.write(map(angle, 0, 360, 0, 180)); 184 // - Control stepper motor: stepper.moveTo(angle); 185 // - Control directional LED strip: setLEDDirection(angle); 186 }); 187 188 // Handle analog gauge value requests (when web page loads/reconnects) 189 webAnalogGaugePage.onGaugeValueRequest([]() { 190 webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue); 191 }); 192 193 // Handle table data requests (when web page loads/reconnects) 194 webTablePage.onTableValueRequest([]() { 195 // Send initial values to the table 196 webTablePage.sendValueUpdate("Arduino Status", "Running"); 197 webTablePage.sendValueUpdate("WiFi Connected", "Yes"); 198 webTablePage.sendValueUpdate("Uptime", "0 seconds"); 199 webTablePage.sendValueUpdate("Slider 1", String(currentSlider1)); 200 webTablePage.sendValueUpdate("Slider 2", String(currentSlider2)); 201 webTablePage.sendValueUpdate("Joystick X", String(currentJoystickX)); 202 webTablePage.sendValueUpdate("Joystick Y", String(currentJoystickY)); 203 webTablePage.sendValueUpdate("Rotator Angle", String(currentRotatorAngle) + "°"); 204 webTablePage.sendValueUpdate("Gauge Value", String(currentGaugeValue, 1) + "%"); 205 }); 206} 207 208void loop() { 209 // Handle WebApp server communications 210 webAppsServer.loop(); 211 212 // Update table with current uptime every 5 seconds 213 static unsigned long lastUptimeUpdate = 0; 214 if (millis() - lastUptimeUpdate > 5000) { 215 lastUptimeUpdate = millis(); 216 217 unsigned long uptimeSeconds = millis() / 1000; 218 String uptimeStr = String(uptimeSeconds) + " seconds"; 219 if (uptimeSeconds >= 60) { 220 uptimeStr = String(uptimeSeconds / 60) + "m " + String(uptimeSeconds % 60) + "s"; 221 } 222 223 webTablePage.sendValueUpdate("Uptime", uptimeStr); 224 } 225 226 // Simulate sensor data updates every 3 seconds 227 static unsigned long lastSensorUpdate = 0; 228 if (millis() - lastSensorUpdate > 3000) { 229 lastSensorUpdate = millis(); 230 231 // Simulate a sensor reading that varies over time 232 float sensorValue = 50.0 + 30.0 * sin(millis() / 10000.0); // Oscillates between 20-80 233 currentGaugeValue = sensorValue; 234 235 // Update gauge and table 236 webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue); 237 webTablePage.sendValueUpdate("Gauge Value", String(currentGaugeValue, 1) + "%"); 238 } 239 240 // TODO: Add your main application code here 241 242 delay(10); 243}
Comments
Only logged in users can leave comments