DIYables Web Apps Web Analog Gauge
WebAnalogGauge Example - Setup Instructions
Overview
The WebAnalogGauge example creates a professional circular gauge interface accessible from any web browser. Designed for Arduino Uno R4 WiFi and DIYables STEM V4 IoT educational platform with enhanced sensor monitoring capabilities, built-in analog input features, and seamless integration with measurement educational modules. Perfect for monitoring sensor values, voltage levels, pressure readings, or any analog measurement requiring visual feedback.
Features
- Professional Circular Gauge: Interactive gauge display via web interface
- Configurable Range: Custom minimum and maximum values with units
- Real-time Updates: Live sensor value display with smooth needle animation
- Color-coded Zones: Visual status indication (green, yellow, red zones)
- Precision Control: Configurable decimal precision for displayed values
- WebSocket Communication: Instant updates without page refresh
- Mobile Responsive: Works perfectly on desktop, tablet, and mobile devices
- Automatic Config: Set range once in constructor - no manual config needed
- Platform Extensible: Currently implemented for Arduino Uno R4 WiFi, but can be extended for other hardware platforms. See DIYables_WebApps_ESP32
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
Setup Instructions
Detailed Instructions
Follow these instructions step by step:
- If this is your first time using the Arduino Uno R4 WiFi/DIYables STEM V4 IoT, refer to the tutorial on setting up the environment for Arduino Uno R4 WiFi/DIYables STEM V4 IoT in the Arduino IDE.
- Connect the Arduino Uno R4/DIYables STEM V4 IoT board to your computer using a USB cable.
- Launch the Arduino IDE on your computer.
- Select the appropriate Arduino Uno R4 board (e.g., Arduino Uno R4 WiFi) and COM port.
- Navigate to the Libraries icon on the left bar of the Arduino IDE.
- Search "DIYables WebApps", then find the DIYables 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 WebApps WebAnalogGauge example, or copy the above code and paste it to the editor of Arduino IDE
/*
* DIYables WebApp Library - Web Analog Gauge Example
*
* This Serial.println("\nWebAnalogGauge is ready!");
Serial.print("IP Address: ");
Serial.println(webAppsServer.getLocalIP());
Serial.println("Open your web browser and navigate to:");
Serial.print("1. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/ (Home page)");
Serial.print("2. http://");
Serial.print(webAppsServer.getLocalIP());
Serial.println("/webanalogGauge (Analog Gauge)");
Serial.println("\nSimulating sensor data...");monstrates the Web Analog Gauge application:
* - Real-time analog gauge visualization
* - Simulated sensor data with smooth animation
* - WebSocket communication for live updates
* - Beautiful analog gauge with tick marks and smooth pointer movement
*
* Features:
* - Automatic gauge value simulation
* - Smooth animation between values
* - Range: 0° to 280° (customizable)
* - Real-time WebSocket updates
* - Professional analog gauge appearance
*
* 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-gauge 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;
// Gauge configuration constants
const float GAUGE_MIN_VALUE = 0.0;
const float GAUGE_MAX_VALUE = 100.0;
const String GAUGE_UNIT = "%";
DIYablesWebAnalogGaugePage webAnalogGaugePage(GAUGE_MIN_VALUE, GAUGE_MAX_VALUE, GAUGE_UNIT); // Range: 0-100%
// Other examples:
// DIYablesWebAnalogGaugePage webAnalogGaugePage(-50.0, 150.0, "°C"); // Temperature: -50°C to 150°C
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 1023.0, ""); // Analog sensor: 0-1023 (no unit)
// DIYablesWebAnalogGaugePage webAnalogGaugePage(0.0, 5.0, "V"); // Voltage: 0-5V
// Simulation variables
unsigned long lastUpdateTime = 0;
const unsigned long UPDATE_INTERVAL = 500; // Update every 500ms (0.5 second)
const float STEP_SIZE = 1.0; // Step size for simulation
float currentGaugeValue = GAUGE_MIN_VALUE; // Start at minimum value
float step = STEP_SIZE; // Positive step means increasing, negative means decreasing
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - Web Analog Gauge Example");
// Add web applications to the server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webAnalogGaugePage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// 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() {
// Handle gauge value requests (when web page loads/reconnects)
webAnalogGaugePage.onGaugeValueRequest([]() {
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
Serial.println("Web client requested gauge value - Sent: " + String(currentGaugeValue, 1) + GAUGE_UNIT);
});
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Update gauge with simulated sensor data
if (millis() - lastUpdateTime >= UPDATE_INTERVAL) {
lastUpdateTime = millis();
Serial.println("Updating gauge value..."); // Debug message
// Simple linear simulation: step changes direction at boundaries
currentGaugeValue += step;
// Change direction when reaching boundaries
if (currentGaugeValue >= GAUGE_MAX_VALUE || currentGaugeValue <= GAUGE_MIN_VALUE) {
step *= -1; // Reverse direction
}
// Ensure value stays within bounds (safety check)
if (currentGaugeValue < GAUGE_MIN_VALUE) currentGaugeValue = GAUGE_MIN_VALUE;
if (currentGaugeValue > GAUGE_MAX_VALUE) currentGaugeValue = GAUGE_MAX_VALUE;
// Send the new value to all connected web clients
webAnalogGaugePage.sendToWebAnalogGauge(currentGaugeValue);
// Print to serial for debugging
Serial.println("Gauge: " + String(currentGaugeValue, 1) + GAUGE_UNIT + " (" + (step > 0 ? "↑" : "↓") + ")");
}
delay(10);
}
- 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 Arduino UNO R4/DIYables STEM V4 IoT
- Open the Serial Monitor
- Check out the result on Serial Monitor. It looks like the below
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
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 Analog Gauge: http://192.168.0.2/web-gauge
==========================================
Autoscroll
Clear output
9600 baud
Newline
- 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 Analog Gauge link, you will see the Web Analog Gauge app's UI like the below:
- Or you can also access the page directly by IP address followed by /web-analog-gauge. For example: http://192.168.1.100/web-analog-gauge
- You will see a professional circular gauge display showing real-time sensor values
Web Interface Features
Analog Gauge Display
- Circular Gauge: Professional gauge with smooth needle animation
- Value Range: Displays configured minimum and maximum values
- Current Reading: Real-time value display with units
- Color Zones: Visual status indication based on value ranges
- Precision: Configurable decimal places for accurate readings
Real-time Updates
- Live Data: Values update automatically via WebSocket connection
- Smooth Animation: Needle moves smoothly between values
- Status Feedback: Connection status indicator
- Mobile Optimized: Touch-friendly interface for all devices
Code Configuration
Gauge Setup
// Configure gauge range and units
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volts
// Set up value request callback
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Sending Values
void onGaugeValueRequested() {
// Read sensor value (example with potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Send to gauge
gaugePage.sendGaugeValue(voltage);
}
Customization Options
Range Configuration
- Minimum Value: Set lowest expected reading
- Maximum Value: Set highest expected reading
- Units: Display unit string (V, A, °C, PSI, etc.)
- Precision: Control decimal places in display
Sensor Integration
- Analog Sensors: Voltage, current, pressure, light sensors
- Digital Sensors: Temperature, humidity, gas sensors via I2C/SPI
- Calculated Values: Derived measurements from multiple sensors
- Calibrated Readings: Apply calibration factors for accuracy
Common Use Cases
Educational Projects
- Voltage Monitoring: Battery voltage, power supply readings
- Environmental Sensing: Temperature, humidity, light levels
- Physics Experiments: Force, pressure, acceleration measurements
- Electronics Learning: Circuit analysis, component testing
Practical Applications
- Home Automation: System monitoring, environmental control
- Robotics: Sensor feedback, system diagnostics
- IoT Projects: Remote monitoring, data visualization
- Industrial: Quality control, process monitoring
Troubleshooting
Gauge Not Updating
- Check WiFi connection and WebSocket status
- Verify callback function is properly set
- Ensure gauge value is within configured range
- Check Serial Monitor for connection messages
Incorrect Values
- Verify sensor wiring and connections
- Check analog reference voltage settings
- Calibrate sensor readings if necessary
- Ensure proper scaling in callback function
Connection Issues
- Verify IP address in browser
- Check firewall settings
- Ensure 2.4GHz WiFi network (5GHz not supported)
- Try refreshing browser page
Advanced Features
Multiple Gauges
You can create multiple gauge instances for different sensors:
DIYablesWebAnalogGaugePage voltageGauge(0.0, 5.0, "V");
DIYablesWebAnalogGaugePage currentGauge(0.0, 2.0, "A");
DIYablesWebAnalogGaugePage tempGauge(-40.0, 85.0, "°C");
server.addApp(&voltageGauge);
server.addApp(¤tGauge);
server.addApp(&tempGauge);
Data Logging
Combine with Web Plotter for historical data visualization:
// Send same value to both gauge and plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Educational Integration
STEM Learning Objectives
- Data Visualization: Understanding analog-to-digital conversion
- Sensor Physics: Learning measurement principles
- Web Technologies: Real-time communication concepts
- Programming: Callback functions, data handling
Classroom Activities
- Sensor Comparison: Compare different sensor types and ranges
- Calibration Exercise: Learn measurement accuracy and precision
- System Integration: Combine multiple sensors and displays
- Problem Solving: Troubleshoot sensor and display issues
This example provides a comprehensive foundation for analog sensor monitoring and visualization, perfect for both educational and practical applications.