ESP32 WebAnalogGauge Voorbeeld - Professionele Meter Interface Tutorial
Overzicht
Het WebAnalogGauge voorbeeld creëert een professionele ronde meterinterface die toegankelijk is via elke webbrowser. Ontworpen voor het ESP32 educatieve platform met verbeterde sensorbewakingsmogelijkheden, ingebouwde analoge invoerfuncties en naadloze integratie met meeteducatiemodules. Perfect voor het monitoren van sensorwaarden, spanningsniveaus, drukmetingen of elke analoge meting die visuele feedback vereist.
Kenmerken
- Professionele Ronde Meter: Interactieve meterweergave via webinterface
- Configureerbaar Bereik: Aangepaste minimale en maximale waarden met eenheden
- Realtime Updates: Live weergave van sensorwaarden met vloeiende naaldanimatie
- Kleurgecodeerde Zones: Visuele statusindicatie (groene, gele, rode zones)
- Nauwkeurige Controle: Instelbare decimale precisie voor weergegeven waarden
- WebSocket Communicatie: Directe updates zonder pagina te vernieuwen
- Mobiel Responsief: Werkt perfect op desktop, tablet en mobiele apparaten
- Automatische Configuratie: Stel het bereik één keer in de constructor in - geen handmatige configuratie nodig
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 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.
Installatie-instructies
Snelle Stappen
Volg deze stappen één voor één:
- Als dit uw eerste keer is met ESP32, raadpleeg dan de tutorial over het opzetten van de omgeving voor ESP32 in de Arduino IDE.
- Verbind het ESP32 board met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32 board (bijv. ESP32 Dev Module) en de juiste COM-poort.
- Ga naar het Libraries-icoon in de linkerzijbalk van de Arduino IDE.
- Zoek op "DIYables ESP32 WebApps" en vind vervolgens de DIYables ESP32 WebApps Library van DIYables.
- Klik op de knop Install om de bibliotheek te installeren.
- U wordt gevraagd om de installatie van aanvullende bibliotheekafhankelijkheden.
- Klik op de knop Install All om alle afhankelijkheden te installeren.
- Ga in Arduino IDE naar Bestand Voorbeelden DIYables ESP32 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: ESP32 Boards
*
* 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://[esp32-ip]/web-gauge in your web browser
*/
#include <DIYables_ESP32_Platform.h>
#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
ESP32ServerFactory 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 ESP32 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 de WiFi-inloggegevens in de code door deze regels aan te passen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de knop Upload in de Arduino IDE om de code naar ESP32 te uploaden
- Open de Seriële Monitor
- Bekijk het resultaat in de Seriële Monitor. Dit ziet er ongeveer zo uit:
COM6
DIYables WebApp - Web Analog Gauge Example
INFO: Added app /
INFO: Added app /web-gauge
DIYables WebApp Library
Platform: ESP32
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.
- Typ het IP-adres dat in de Seriële Monitor wordt weergegeven in de webbrowser.
- Voorbeeld: http://192.168.1.100
- U ziet dan de startpagina zoals de onderstaande afbeelding:
- Klik op de Web Analog Gauge-link, u ziet de gebruikersinterface van de Web Analog Gauge app zoals hieronder:
- Of u kunt de pagina direct benaderen door het IP-adres te gebruiken, gevolgd door /web-analog-gauge. Bijvoorbeeld: http://192.168.1.100/web-analog-gauge
- U ziet dan een professionele ronde meterweergave die realtime sensorwaarden toont
Webinterface Kenmerken
Analoge Meterweergave
- Ronde Meter: Professionele meter met vloeiende naaldanimatie
- Waarde Bereik: Toont het geconfigureerde minimum en maximum
- Huidige Waarde: Realtime waardes met eenheden
- Kleurzones: Visuele statusbepaling op basis van waardenbereik
- Precisie: Instelbaar aantal decimalen voor nauwkeurige weergave
Realtime Updates
- Live Data: Waarden worden automatisch bijgewerkt via WebSocket verbinding
- Vloeiende Animatie: Naald beweegt soepel tussen waarden
- Statusfeedback: Indicator voor verbindingsstatus
- Mobiel Geoptimaliseerd: Touchvriendelijke interface voor alle apparaten
Code Configuratie
Meter Setup
// Configureer meterbereik en eenheden
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // 0-100 Volt
// Stel callback in voor waardeverzoek
gaugePage.onGaugeValueRequest(onGaugeValueRequested);
Waarden Verzenden
void onGaugeValueRequested() {
// Lees sensorwaarde (voorbeeld met potentiometer)
int sensorValue = analogRead(A0);
float voltage = (sensorValue / 1023.0) * 5.0;
// Verzenden naar meter
gaugePage.sendGaugeValue(voltage);
}
Aanpassingsopties
Bereikconfiguratie
- Minimumwaarde: Stel de laagst verwachte meting in
- Maximumwaarde: Stel de hoogst verwachte meting in
- Eenheden: Weergave eenheid (V, A, °C, PSI, etc.)
- Precisie: Regelt het aantal decimalen in de weergave
Sensorintegratie
- Analoge Sensoren: Spanning, stroom, druk, lichtsensoren
- Digitale Sensoren: Temperatuur, vochtigheid, gassensoren via I2C/SPI
- Berekeningswaarden: Afgeleide metingen van meerdere sensoren
- Gecalibreerde Metingen: Toepassing van kalibratiefactoren voor nauwkeurigheid
Veelvoorkomende Gebruikssituaties
Educatieve Projecten
- Spanningsbewaking: Accuspanning, voeding meten
- Omgevingsmetingen: Temperatuur, luchtvochtigheid, lichtniveaus
- Natuurkundexperimenten: Kracht, druk, versnelling meten
- Elektronica Leren: Schakeldiagnose, componenttesten
Praktische Toepassingen
- Domotica: Systeemmonitoring, omgevingsregeling
- Robotica: Sensorfeedback, systeembewaking
- IoT-projecten: Remote monitoring, datavisualisatie
- Industrieel: Kwaliteitscontrole, procesbewaking
Problemen Oplossen
Meter Werkt Niet Bijwerken
- Controleer WiFi-verbinding en WebSocket-status
- Verifieer of de callbackfunctie correct is ingesteld
- Zorg dat de meterwaarde binnen het geconfigureerde bereik valt
- Controleer de Seriële Monitor op verbindingsberichten
Onjuiste Waarden
- Controleer sensorbedrading en verbindingen
- Controleer analoge referentiespanning instellingen
- Kalibreer sensorwaarden indien nodig
- Zorg voor juiste schaalverdeling in de callbackfunctie
Verbindingsproblemen
- Verifieer IP-adres in de browser
- Controleer firewallinstellingen
- Gebruik een 2.4GHz WiFi-netwerk (5GHz wordt niet ondersteund)
- Probeer de browserpagina te vernieuwen
Geavanceerde Functies
Meerdere Meters
U kunt meerdere meterinstanties 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);
Gegevensregistratie
Combineer met Web Plotter voor historische datavisualisatie:
// Verzenden van dezelfde waarde naar meter en plotter
gaugePage.sendGaugeValue(voltage);
plotterPage.sendData("Voltage", voltage);
Educatieve Integratie
STEM Leerdoelen
- Datavisualisatie: Begrip van analoog-naar-digitaal conversie
- Sensorfysica: Leerprincipes van metingen
- Webtechnologieën: Concepten van realtime communicatie
- Programmeren: Callbackfuncties, dataverwerking
Klasactiviteiten
- Sensorvergelijking: Vergelijk verschillende sensortypes en bereiken
- Kalibratie-oefening: Leer meetnauwkeurigheid en precisie
- Systeemintegratie: Combineer meerdere sensoren en displays
- Probleemoplossing: Foutzoeken bij sensor- en displayproblemen
Dit voorbeeld biedt een uitgebreide basis voor het monitoren en visualiseren van analoge sensoren, ideaal voor zowel educatieve als praktische toepassingen.