Arduino WebAnalogGauge Voorbeeld - Professionele Gauge Interface Tutorial
Overzicht
Het WebAnalogGauge voorbeeld creëert een professionele cirkelvormige gauge interface die toegankelijk is vanuit elke webbrowser. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met verbeterde sensormonitoringmogelijkheden, ingebouwde analoge input functies, en naadloze integratie met educatieve meetmodules. Perfect voor het monitoren van sensorwaarden, spanningsniveaus, drukmetingen, of elke analoge meting die visuele feedback vereist.
Functies
- Professionele Cirkelvormige Gauge: Interactieve gauge weergave via webinterface
- Configureerbaar Bereik: Aangepaste minimum en maximum waarden met eenheden
- Realtime Updates: Live sensorwaarde weergave met vloeiende naaldanimatie
- Kleurgecodeerde Zones: Visuele status indicatie (groene, gele, rode zones)
- Precisiecontrole: Configureerbare decimale precisie voor weergegeven waarden
- WebSocket Communicatie: Directe updates zonder pagina verversing
- Mobiel Responsief: Werkt perfect op desktop, tablet en mobiele apparaten
- Automatische Configuratie: Bereik eenmalig instellen in constructor - geen handmatige configuratie nodig
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardwareplatforms. 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 uw eerste keer is dat u de Arduino Uno R4 WiFi/DIYables STEM V4 IoT gebruikt, raadpleeg dan 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 met behulp van 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 icoon in de linkerbalk 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 bibliotheekafhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheekafhankelijkheden te installeren.
- Ga in Arduino IDE naar File Examples DIYables WebApps WebAnalogGauge voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van 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);
}
- Configureer WiFi credentials 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 de Serial Monitor. Het ziet er als volgt uit
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 een webbrowser op uw PC of mobiele telefoon.
- Type het IP-adres dat wordt weergegeven in de Serial Monitor in de webbrowser
- Voorbeeld: http://192.168.1.100
- U ziet de homepage zoals in onderstaande afbeelding:
- Klik op de Web Analog Gauge link, u ziet de Web Analog Gauge app's UI zoals hieronder:
- Of u kunt ook direct naar de pagina gaan via IP-adres gevolgd door /web-analog-gauge. Bijvoorbeeld: http://192.168.1.100/web-analog-gauge
- U ziet een professionele cirkelvormige gauge weergave die realtime sensorwaarden toont
Webinterface Functies
Analoge Gauge Weergave
- Cirkelvormige Gauge: Professionele gauge met vloeiende naaldanimatie
- Waardebereik: Toont geconfigureerde minimum en maximum waarden
- Huidige Meting: Realtime waarde weergave met eenheden
- Kleurzones: Visuele status indicatie gebaseerd op waardebereiken
- Precisie: Configureerbare decimalen voor nauwkeurige metingen
Realtime Updates
- Live Data: Waarden worden automatisch bijgewerkt via WebSocket verbinding
- Vloeiende Animatie: Naald beweegt soepel tussen waarden
- Status Feedback: Verbindingsstatus indicator
- Mobiel Geoptimaliseerd: Touchvriendelijke interface voor alle apparaten
Code Configuratie
Gauge Instelling
// Configureer gauge bereik en eenheden
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volt
// Stel waarde aanvraag callback in
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Waarden Verzenden
void onGaugeValueRequested() {
// Lees sensorwaarde (voorbeeld met potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Stuur naar gauge
gaugePage.sendGaugeValue(voltage);
}
Aanpassingsmogelijkheden
Bereik Configuratie
- Minimumwaarde: Stel laagste verwachte meting in
- Maximumwaarde: Stel hoogste verwachte meting in
- Eenheden: Toon eenheid string (V, A, °C, PSI, enz.)
- Precisie: Beheer decimalen in weergave
Sensor Integratie
- Analoge Sensoren: Spanning, stroom, druk, lichtsensoren
- Digitale Sensoren: Temperatuur, vochtigheid, gassensoren via I2C/SPI
- Berekende Waarden: Afgeleide metingen van meerdere sensoren
- Gekalibreerde Metingen: Pas calibratiefactoren toe voor nauwkeurigheid
Veelvoorkomende Toepassingen
Educatieve Projecten
- Spanningsmonitoring: Batterijspanning, voedingsmetingen
- Omgevingssensing: Temperatuur, vochtigheid, lichtniveaus
- Natuurkunde Experimenten: Kracht, druk, versnellingsmetingen
- Elektronica Leren: Circuitanalyse, componenttesten
Praktische Toepassingen
- Domotica: Systeemmonitoring, omgevingscontrole
- Robotica: Sensor feedback, systeemdiagnose
- IoT Projecten: Externe monitoring, datavisualisatie
- Industrieel: Kwaliteitscontrole, procesmonitoring
Probleemoplossing
Gauge Wordt Niet Bijgewerkt
- Controleer WiFi verbinding en WebSocket status
- Verifieer dat callback functie correct is ingesteld
- Zorg ervoor dat gauge waarde binnen geconfigureerd bereik valt
- Controleer Serial Monitor voor verbindingsberichten
Incorrecte Waarden
- Verifieer sensorbedrading en verbindingen
- Controleer analoge referentiespanning instellingen
- Kalibreer sensormetingen indien nodig
- Zorg voor juiste schaling in callback functie
Verbindingsproblemen
- Verifieer IP-adres in browser
- Controleer firewall instellingen
- Zorg voor 2.4GHz WiFi netwerk (5GHz wordt niet ondersteund)
- Probeer browserpagina te vernieuwen
Geavanceerde Functies
Meerdere Gauges
U kunt meerdere gauge instanties maken voor verschillende sensoren:
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
Combineer met Web Plotter voor historische datavisualisatie:
// Stuur dezelfde waarde naar zowel gauge als plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Educatieve Integratie
STEM Leerdoelstellingen
- Datavisualisatie: Begrip van analoog-naar-digitaal conversie
- Sensorfysica: Leren van meetprincipes
- Webtechnologieën: Realtime communicatie concepten
- Programmeren: Callback functies, data handling
Klaslokaalactiviteiten
- Sensorvergelijking: Vergelijk verschillende sensortypes en bereiken
- Kalibratieoefening: Leer meetnauwkeurigheid en precisie
- Systeemintegratie: Combineer meerdere sensoren en displays
- Probleemoplossing: Los sensor- en displayproblemen op
Dit voorbeeld biedt een uitgebreide basis voor analoge sensormonitoring en visualisatie, perfect voor zowel educatieve als praktische toepassingen.