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.

Sep 18, 2025

•

1716 views

•

1 respects

•

Components and supplies

Arduino UNO R4 WIFI

Arduino USB Type-C® Cable 2-in1

DIYables STEM V4 IoT Starter Kit, Fully Compatible with Arduino Uno R4 WiFi

DIYables STEM V4 IoT, Fully Compatible with Arduino Uno R4 WiFi

Apps and platforms

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}

/*
 * DIYables WebApp Library - Multiple WebApps Example
 * 
 * This example demonstrates multiple web apps of the DIYables WebApp library:
 * - Home page with links to multiple web apps
 * - Web Monitor: Real-time serial monitoring via WebSocket
 * - Web Slider: Dual slider control
 * - Web Joystick: Interactive joystick control
 * - Web Rotator: Interactive rotatable disc control
 * - Web Analog Gauge: Professional circular gauge for sensor monitoring
 * - Web Table: Two-column data table with real-time updates
 * - Web Plotter: See WebPlotter example for real-time data visualization
 * 
 * Features:
 * - Simplified callback system - no manual command parsing needed
 * - Automatic state synchronization and JSON handling
 * - All protocol details handled by the library
 * - Template for hardware control
 * 
 * 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 the IP address 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 factory;
DIYablesWebAppServer webAppsServer(factory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebMonitorPage webMonitorPage;
DIYablesWebSliderPage webSliderPage;
DIYablesWebJoystickPage webJoystickPage(false, 5);               // autoReturn=false, sensitivity=5
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS);  // Continuous rotation mode (0-360°)
DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 100.0, "%");  // Range: 0-100%, units: %
DIYablesWebTablePage webTablePage;

// Variables to track states
int currentSlider1 = 64;         // Slider 1 value (0-255)
int currentSlider2 = 128;        // Slider 2 value (0-255)
int currentJoystickX = 0;        // Current joystick X value (-100 to 100)
int currentJoystickY = 0;        // Current joystick Y value (-100 to 100)
int currentRotatorAngle = 0;     // Current rotator angle (0-360°)
float currentGaugeValue = 50.0;  // Current gauge value (0.0-100.0)

void setup() {
  Serial.begin(9600);
  delay(1000);

  // TODO: Initialize your hardware pins here

  Serial.println("DIYables WebApp - Multiple Apps Example");

  // Add all web applications to the server
  webAppsServer.addApp(&homePage);
  webAppsServer.addApp(&webMonitorPage);
  webAppsServer.addApp(&webSliderPage);
  webAppsServer.addApp(&webJoystickPage);
  webAppsServer.addApp(&webRotatorPage);
  webAppsServer.addApp(&webAnalogGaugePage);
  webAppsServer.addApp(&webTablePage);
  // Add more web apps here (e.g., WebPlotter)

  // Set 404 Not Found page (optional - for better user experience)
  webAppsServer.setNotFoundPage(DIYablesNotFoundPage());

  // Configure table structure (only attribute names, values will be updated dynamically)
  webTablePage.addRow("Arduino Status");
  webTablePage.addRow("WiFi Connected");
  webTablePage.addRow("Uptime");
  webTablePage.addRow("Slider 1");
  webTablePage.addRow("Slider 2");
  webTablePage.addRow("Joystick X");
  webTablePage.addRow("Joystick Y");
  webTablePage.addRow("Rotator Angle");
  webTablePage.addRow("Gauge Value");

  // Start the WebApp server
  if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
    while (1) {
      Serial.println("Failed to start WebApp server!");
      delay(1000);
    }
  }

  setupCallbacks();
}

void setupCallbacks() {
  // Web Monitor callback - echo messages back
  webMonitorPage.onWebMonitorMessage([](const String& message) {
    Serial.println("Web Monitor: " + message);
    webMonitorPage.sendToWebMonitor("Arduino received: " + message);
  });

  // Web Slider callback - handle slider values
  webSliderPage.onSliderValueFromWeb([](int slider1, int slider2) {
    // Store the received values
    currentSlider1 = slider1;
    currentSlider2 = slider2;

    // Print slider values (0-255) without String concatenation
    Serial.print("Slider 1: ");
    Serial.print(slider1);
    Serial.print(", Slider 2: ");
    Serial.println(slider2);

    // Update table with new slider values using String() conversion
    webTablePage.sendValueUpdate("Slider 1", String(slider1));
    webTablePage.sendValueUpdate("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);

    // Update gauge based on slider1 value (map 0-255 to 0-100)
    currentGaugeValue = map(slider1, 0, 255, 0, 100);
    webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
    char gaugeStr[16];
    snprintf(gaugeStr, sizeof(gaugeStr), "%.1f%%", currentGaugeValue);
    webTablePage.sendValueUpdate("Gauge Value", String(gaugeStr));
  });

  // Handle slider value requests
  webSliderPage.onSliderValueToWeb([]() {
    webSliderPage.sendToWebSlider(currentSlider1, currentSlider2);
  });

  // Web Joystick callback - handle joystick movement
  webJoystickPage.onJoystickValueFromWeb([](int x, int y) {
    // Store the received values
    currentJoystickX = x;
    currentJoystickY = y;

    // Print joystick position values (-100 to +100)
    Serial.print("Joystick - X: ");
    Serial.print(x);
    Serial.print(", Y: ");
    Serial.println(y);
    Serial.print(x);
    Serial.print(", Y: ");
    Serial.println(y);

    // Update table with new joystick values
    webTablePage.sendValueUpdate("Joystick X", String(x));
    webTablePage.sendValueUpdate("Joystick Y", String(y));

    // TODO: Add your control logic here based on joystick position
    // Examples:
    // - Control motors: if (x > 50) { /* move right */ }
    // - Control servos: servo.write(map(y, -100, 100, 0, 180));
    // - Control LEDs: analogWrite(LED_PIN, map(abs(x), 0, 100, 0, 255));
  });

  // Handle joystick values requests (when web page loads/reconnects)
  webJoystickPage.onJoystickValueToWeb([]() {
    webJoystickPage.sendToWebJoystick(currentJoystickX, currentJoystickY);
  });

  // Web Rotator callback - handle rotation angle changes
  webRotatorPage.onRotatorAngleFromWeb([](float angle) {
    // Store the received angle
    currentRotatorAngle = (int)angle;

    // Print rotator angle (0-360°)
    Serial.println("Rotator angle: " + String(angle) + "°");

    // Update table with new rotator angle
    webTablePage.sendValueUpdate("Rotator Angle", String(angle, 0) + "°");

    // TODO: Add your control logic here based on rotator angle
    // Examples:
    // - Control servo: servo.write(map(angle, 0, 360, 0, 180));
    // - Control stepper motor: stepper.moveTo(angle);
    // - Control directional LED strip: setLEDDirection(angle);
  });

  // Handle analog gauge value requests (when web page loads/reconnects)
  webAnalogGaugePage.onGaugeValueRequest([]() {
    webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
  });

  // Handle table data requests (when web page loads/reconnects)
  webTablePage.onTableValueRequest([]() {
    // Send initial values to the table
    webTablePage.sendValueUpdate("Arduino Status", "Running");
    webTablePage.sendValueUpdate("WiFi Connected", "Yes");
    webTablePage.sendValueUpdate("Uptime", "0 seconds");
    webTablePage.sendValueUpdate("Slider 1", String(currentSlider1));
    webTablePage.sendValueUpdate("Slider 2", String(currentSlider2));
    webTablePage.sendValueUpdate("Joystick X", String(currentJoystickX));
    webTablePage.sendValueUpdate("Joystick Y", String(currentJoystickY));
    webTablePage.sendValueUpdate("Rotator Angle", String(currentRotatorAngle) + "°");
    webTablePage.sendValueUpdate("Gauge Value", String(currentGaugeValue, 1) + "%");
  });
}

void loop() {
  // Handle WebApp server communications
  webAppsServer.loop();

  // Update table with current uptime every 5 seconds
  static unsigned long lastUptimeUpdate = 0;
  if (millis() - lastUptimeUpdate > 5000) {
    lastUptimeUpdate = millis();

    unsigned long uptimeSeconds = millis() / 1000;
    String uptimeStr = String(uptimeSeconds) + " seconds";
    if (uptimeSeconds >= 60) {
      uptimeStr = String(uptimeSeconds / 60) + "m " + String(uptimeSeconds % 60) + "s";
    }

    webTablePage.sendValueUpdate("Uptime", uptimeStr);
  }

  // Simulate sensor data updates every 3 seconds
  static unsigned long lastSensorUpdate = 0;
  if (millis() - lastSensorUpdate > 3000) {
    lastSensorUpdate = millis();

    // Simulate a sensor reading that varies over time
    float sensorValue = 50.0 + 30.0 * sin(millis() / 10000.0);  // Oscillates between 20-80
    currentGaugeValue = sensorValue;

    // Update gauge and table
    webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
    webTablePage.sendValueUpdate("Gauge Value", String(currentGaugeValue, 1) + "%");
  }

  // TODO: Add your main application code here

  delay(10);
}

Comments

Only logged in users can leave comments

diyables

0 Followers

•

0 Projects

Intro

Trademarks & CopyrightsWhistleblowingDigital Services ActTerms of ServicePrivacy PolicySecurityCookie Settings

Report content