DIYables WebApps Library for Arduino Uno R4 WiFi

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}