DIYables ESP32 WebApps Library - Compleet ESP32 Webapplicatie Framework
DIYables ESP32 WebApps Library
Een uitgebreide ESP32 bibliotheek voor het maken van WebSocket-gebaseerde webapplicaties op de ESP32. Deze bibliotheek biedt meerdere direct inzetbare webapplicaties om uw ESP32-projecten te monitoren, te bedienen en mee te communiceren via een moderne webinterface.
Met deze bibliotheek kunt u via een webbrowser op uw smartphone of pc communiceren met uw ESP32 door:
- Gebruik te maken van vooraf gemaakte webapps uit de 11 beschikbare applicaties zonder enige kennis van webprogrammering
- De vooraf gemaakte webapps aan te passen aan uw specifieke projectvereisten
- Uw eigen webapps te bouwen en toe te voegen met behulp van het flexibele framework
🚀 Kenmerken
- Modulaire Architectuur: Voeg alleen de webapps toe die u nodig heeft om het geheugen optimaal te benutten
- Geheugen efficiënt: Elke webapp kan onafhankelijk in- of uitgeschakeld worden
- Geheugen geoptimaliseerd: HTML-, JavaScript- en CSS-code is geminificeerd om de codegrootte te verkleinen zonder verlies van UI en functionaliteit. De originele, niet-geminificeerde broncode is inbegrepen voor referentie en aanpassing
- 11 Kant-en-klare Webapplicaties: Volledige ESP32-besturing zonder webprogrammeerkennis
- Home Page: Centraal startpunt met links naar alle webapplicaties
- Web Monitor: Real-time seriële monitor in uw browser via WebSocket
- Web Chat: Interactieve chatinterface met uw Arduino
- Web Digital Pins: Controle en monitoring van alle digitale pinnen via webinterface
- Web Slider: Dubbele slider besturing voor analoge/PWM-uitgangen
- Web Joystick: Interactieve joystick voor robot- en voertuigbesturing
- Web Analog Gauge: Circulaire meterweergave voor sensorbewaking
- Web Rotator: Draaiende schijfbesturing met continue/beperkte modi
- Web Temperature: Thermometer-visualisatie met configureerbare bereiken
- Web RTC: Real-time klok met tijdsynchronisatie en tijdzonebeheer
- Web Table: Twee-koloms attribuut-waarde tabel met real-time updates
- Web Plotter: Real-time data visualisatie en grafieken
- Template voor Custom Web Apps: Volledig template om uw eigen webapplicaties te creëren met real-time WebSocket communicatie
- Responsive design: Werkt op zowel desktop als mobiele apparaten
- Real-time communicatie: WebSocket-gebaseerd voor directe updates
- Eenvoudige integratie: Simpele callback-gebaseerde API
- Ondersteuning voor meerdere apps: Meerdere webapps tegelijkertijd toevoegen
- Automatische Home Page integratie: Toegevoegde webapp wordt automatisch aan de startpagina toegevoegd
📦 Installatie - Arduino IDE Library Manager
- Open Arduino IDE
- Navigeer naar het Libraries-icoon in de linkerzijbalk van Arduino IDE.
- Zoek op "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Library door DIYables
- Klik op de Install-knop om de bibliotheek te installeren.
- Mogelijk wordt u gevraagd om aanvullende bibliotheekafhankelijkheden te installeren
- Klik op Install All om alle afhankelijkheden te installeren.
🔧 Afhankelijkheden
Deze bibliotheek vereist:
- DIYables_ESP32_WebServer bibliotheek (voor WebSocket ondersteuning)
🎯 Snelle Start
Voor gedetailleerde installatie-instructies en codevoorbeelden, raadpleeg:
- API Referentie Documentatie - Volledige API documentatie
- Voorbeeldhandleidingen - Uitgebreide gidsen voor elke webapplicatie:
- Web Chat Voorbeeld - Interactieve chatinterface met Arduino
- Web Monitor Voorbeeld - Real-time seriële monitor via webbrowser
- Web Plotter Voorbeeld - Real-time datavisualisatie en grafieken
- Web Digital Pins Voorbeeld - Digitale pincontrole en monitoring
- Web Slider Voorbeeld - Dubbele sliderbediening voor analoge/PWM-uitgangen
- Web Joystick Voorbeeld - Virtuele joystick voor richtingbesturing
- Web Analog Gauge Voorbeeld - Professionele cirkelmeter voor sensorbewaking
- Web Rotator Voorbeeld - Interactieve draaiende schijfbesturing voor servo/stappenmotoren
- Web Temperature Voorbeeld - Visuele thermometerweergave voor temperatuurmonitoring
- Web RTC Voorbeeld - Real-time klok met webgebaseerde tijdsynchronisatie en tijdzonebeheer
- Web Table Voorbeeld - Twee-koloms datatabel met real-time attribuut-waarde updates
- CustomWebApp Template - Compleet template voor het bouwen van eigen webapps
- Meerdere Web Apps Voorbeeld - Volledige integratiegids voor alle functies
📱 Webapplicaties
1. Home Page (`/`)
- Centraal navigatiepunt
- Links naar alle webapplicaties
- Alleen ingeschakelde/toegevoegde apps worden getoond
- Weergave van verbindingsstatus
- Responsive design
2. Web Monitor (`/web-monitor`)
- Browser-gebaseerde seriële monitor
- Real-time tweerichtingscommunicatie
- Tijdstempels en teller van berichten
- Commandovoer met geschiedenis
3. Web Plotter (`/web-plotter`)
- Real-time visualisatie en plotten van data
- Ondersteuning voor meerdere dataseries (tot 8 lijnen)
- Automatische schaling van Y-as of vaste bereiken
- Aanpasbare titels en aslabels
- WebSocket streaming voor minimale vertraging
- Perfect voor sensorbewaking en debugging
4. WebChat (`/chat`)
- Interactieve chatinterface
- Natuurlijke taal reacties
- LED-besturing via chatcommando’s
- Leuk en educatief
5. Web Digital Pins (`/web-digital-pins`)
- Individuele pinbesturing (pinnen 0-13)
- Elke pin kan in INPUT- of OUTPUT-modus worden geschakeld
- Alleen ingeschakelde pinnen worden in de Web UI getoond
- Monitoring van input- en outputpinnen
- Bulkacties (Alle ON/OFF, wisselen)
- Real-time statusfeedback van pinnen
6. Web Slider (`/web-slider`)
- Dubbele schuifregelaars (0-255)
- PWM-uitgangsbesturing
- Instelbare vooraf bepaalde waardeknoppen
- Gesynchroniseerde bediening
7. Web Joystick (`/web-joystick`)
- Interactieve joystick met touch- en muisondersteuning
- X/Y-coördinaten (-100 tot +100)
- Real-time positieteruggave
- Automatisch centreren kan in-/uitgeschakeld worden via ESP32 code
- Perfect voor robot- en voertuigbesturing
8. Web Analog Gauge (`/web-gauge`)
- Professionele cirkelmeter voor real-time sensorbewaking
- Instelbaar waardegebied, eenheden en precisie
- Soepele naaldanimatie met visuele feedback
- Kleurgemarkeerde zones (groen, geel, rood) voor statusindicatie
- Automatische configuratie - bereik instellen in constructor
- Ideaal voor druk-, spannings- en analoge sensorwaarden
9. Web Rotator (`/web-rotator`)
- Interactieve draaiende schijfbesturing met visuele feedback
- Twee modi: Continue (0-360°) en Beperkt (aangepast bereik)
- Real-time hoekteruggave met soepele rotatie
- Touch- en muisondersteuning voor desktop en mobiel
- Professioneel conische gradiënt met positie-indicator
- Perfect voor servo- en stappenmotorbesturing
10. Web Temperature (`/web-temperature`)
- Visuele thermometerweergave met real-time temperatuurbewaking
- Instelbaar temperatuurbereik en eenheden (°C, °F, K)
- Interactieve thermometeranimatie in kwikstijl
- Automatische configuratie - bereik instellen in constructor
- Real-time waardeverversing via WebSocket
- Uitstekend voor temperatuursensoren en milieubewaking
11. Web RTC (`/web-rtc`)
- Real-time klokweergave voor zowel ESP32 RTC als apparaatklok
- Eén-klik tijdsynchronisatie van webbrowser naar ESP32 RTC
- Visuele tijdsverschilindicator toont synchronisatie-accuratesse in minuten
- Twee-regelige tijdweergave met 12-uurs AM/PM formaat en volledige datum
- Real-time WebSocket updates voor directe synchronisatie
- Modern gradient UI met responsive card-achtige lay-out
- Tijdzonebewuste synchronisatie met lokale apparaatklok
- Ingebouwde RTC ondersteuning specifiek voor ESP32
- Verbindingsstatuscontrole met visuele WebSocket-indicatoren
- Automatische tijdsaanvragen bij laden van pagina
- Perfect voor timestamping, datalogging, planning en tijdgebaseerde automatisering
12. Web Table (`/web-table`)
- Twee-koloms tabel met attribuut-waarde paren voor overzichtelijke datadisplay
- Real-time waarde-updates via WebSocket voor directe data-refresh
- Configureerbare tabelstructuur ingesteld in ESP32 setup() functie
- Dynamische waarde-updates tijdens runtime zonder pagina verversen
- Modern responsive design met hover-effecten en visuele feedback
- Verbindingsstatuscontrole met visuele WebSocket indicatoren
- Leeg status afhandeling met gebruiksvriendelijke berichten bij geen data
- Handmatige vernieuwknop beschikbaar
- Flexibele datatypes (strings, getallen, geformatteerde waarden)
- Geheugen efficiënte opslag met configureerbaar maximum aantal rijen (standaard: 20)
- Automatische data-opvraging bij pagina-laden
- Perfect voor sensorbewaking, systeemstatus, configuratieweergave en realtime dashboards
13. CustomWebApp Template (`/custom`)
- Volledig template voor het maken van eigen webapplicaties
- Real-time WebSocket communicatie met automatische berichtfiltering
- Professioneel klasse-gebaseerd ontwerp met encapsulated APP_IDENTIFIER systeem
- Beginner-vriendelijk template met simpele tekstberichten uitwisseling tussen web en Arduino
- Auto-reconnect functionaliteit voor betrouwbare WebSocket verbindingen
- Mobiel responsive ontwerp voor telefoons, tablets en computers
- Conflictpreventie advies voor ontwikkeling van meerdere custom apps
- Modulaire bestandsstructuur met gescheiden HTML, ESP32-logic en bibliotheekintegratie
- Uitbreidbaar framework - pas template aan voor geavanceerde applicaties
- Integratie-klaar - werkt naadloos samen met andere DIYables ESP32 WebApps
- Perfect voor custom IoT interfaces, sensordashboards, bedieningspanelen, en educatieve projecten
🧩 Modulaire Architectuur
Geheugenoptimalisatie: De DIYables ESP32 WebApps Library heeft een modulair ontwerp waardoor u alleen de webapplicaties hoeft in te sluiten die u echt nodig heeft, wat het geheugengebruik op uw Arduino aanzienlijk vermindert.
Belangrijkste voordelen:
- Selectieve integratie: Voeg alleen de benodigde webapps toe aan uw project
- Geheugen efficiënt: Elke webapp is onafhankelijk en optioneel
- Schaalbaar: Begin klein en voeg functies toe wanneer nodig
- Prestaties geoptimaliseerd: Minder actieve apps = betere prestaties
Hoe het werkt:
// Basis setup – alleen opnemen wat u nodig heeft
DIYablesWebAppServer webAppsServer(80, 81);
DIYablesHomePage homePage; // Altijd aanbevolen
DIYablesWebSliderPage webSliderPage; // Alleen als u sliders nodig heeft
DIYablesWebJoystickPage webJoystickPage; // Alleen als u joystick nodig heeft
DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Alleen als u analoge meter nodig heeft
DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Alleen als u rotator nodig heeft
DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Alleen als u temperatuur nodig heeft
DIYablesWebRTCPage webRTCPage; // Alleen als u tijdsynchronisatie nodig heeft
// Voeg alleen de apps toe die u wilt
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webSliderPage); // Sla apps over die u niet nodig heeft
webAppsServer.addApp(&gaugePage); // Voeg alleen toe wat u gebruikt
webAppsServer.addApp(&tempPage); // Om geheugen te besparen
webAppsServer.addApp(&webRotatorPage); // Pas naar wens aan
webAppsServer.addApp(&webRTCPage); // Voegt tijdsynchronisatie toe
// Start server – kies passende methode
webAppsServer.begin("WiFi_SSID", "password"); // WiFi-verbinding
// OF
// webAppsServer.begin(); // Voor Ethernet of vooraf geconfigureerde verbindingen (toekomst)
// Runtime beheer (gevorderd)
if (sensorConnected) {
webAppsServer.addApp(&webJoystickPage); // Voeg dynamisch toe
}
Runtime flexibiliteit:
- Dynamisch beheer: Toevoegen of verwijderen van apps tijdens runtime via addApp() en removeApp()
- Voorwaardelijke loading: Laad apps op basis van hardware of configuratie
- Custom apps: Maak eigen webapplicaties door erven van DIYablesWebAppPageBase
- Geen hercompilatie: Verander beschikbare apps zonder geheel opnieuw te bouwen
🔌 API Referentie
Voor volledige API documentatie inclusief alle klassen, methoden en voorbeelden zie:
📋 Voorbeelden
De bibliotheek bevat uitgebreide voorbeeldhandleidingen:
- Web Chat Voorbeeld - Interactieve chatinterface met Arduino
- Web Monitor Voorbeeld - Real-time seriële monitor via webbrowser
- Web Plotter Voorbeeld - Real-time datavisualisatie en grafieken
- Web Digital Pins Voorbeeld - Digitale pincontrole en monitoring
- Web Slider Voorbeeld - Dubbele sliderbediening voor analoge/PWM-uitgangen
- Web Joystick Voorbeeld - Virtuele joystick voor richtingbesturing
- Web Analog Gauge Voorbeeld - Professionele cirkelmeter voor sensorbewaking
- Web Rotator Voorbeeld - Interactieve draaiende schijfbesturing voor servo/stappenmotoren
- Web Temperature Voorbeeld - Visuele thermometerweergave voor temperatuurmonitoring
- Web RTC Voorbeeld - Real-time klok met webgebaseerde tijdsynchronisatie en tijdzonebeheer
- Web Table Voorbeeld - Twee-koloms datatabel met real-time attribuut-waarde updates
- CustomWebApp Template - Compleet template voor het bouwen van eigen webapps
- Meerdere Web Apps Voorbeeld - Volledige integratiegids voor alle functies
Elke voorbeeldhandleiding bevat:
- Stapsgewijze installatie-instructies
- Hardware aansluitdiagrammen
- Complete codevoorbeelden
- Troubleshooting gidsen
- Projectideeën en integratietips
🌐 Webinterface URLs
Na verbinding met WiFi zijn de applicaties bereikbaar via:
- Home: http://[IP_ADDRESS]/
- Web Chat: http://[IP_ADDRESS]/chat
- Web Monitor: http://[IP_ADDRESS]/web-monitor
- Web Plotter: http://[IP_ADDRESS]/web-plotter
- Web Digital Pins: http://[IP_ADDRESS]/web-digital-pins
- Web Slider: http://[IP_ADDRESS]/web-slider
- Web Joystick: http://[IP_ADDRESS]/web-joystick
- Web Analog Gauge: http://[IP_ADDRESS]/web-gauge
- Web Rotator: http://[IP_ADDRESS]/web-rotator
- Web Temperature: http://[IP_ADDRESS]/web-temperature
- Web RTC: http://[IP_ADDRESS]/web-rtc
- Web Table: http://[IP_ADDRESS]/web-table
- Custom App: http://[IP_ADDRESS]/custom (bij gebruik van CustomWebApp template)
💡 Gebruiks Tips
- Geheugenoptimalisatie: Gebruik de modulaire architectuur – voeg alleen de webapps toe die u nodig heeft voor geheugenbesparing
- WiFi-verbinding: Zorg voor een sterk WiFi-signaal voor stabiele WebSocket-communicatie
- Pin veiligheid: Controleer altijd de pinmogelijkheden vóór aansluiten van externe apparaten
- Voeding: Gebruik een voldoende voedingsbron voor aangesloten apparaten
- Browsercompatibiliteit: Werkt het beste met moderne browsers (Chrome, Firefox, Safari, Edge)
- Mobielvriendelijk: Alle interfaces zijn responsive en werken op mobiele apparaten
- Begin klein: Start met 1-2 webapps, voeg later extra functies toe naarmate uw project groeit
🔍 Problemen oplossen
WiFi verbindingsproblemen
- Controleer SSID en wachtwoord
- Controleer WiFi signaalsterkte
- Zorg voor 2.4GHz netwerk (5GHz wordt niet ondersteund)
WebSocket verbindingsproblemen
- Controleer firewall-instellingen
- Verifieer IP-adres in de browser
- Probeer de webpagina te verversen
- Controleer seriële monitor op foutmeldingen
Prestatieproblemen
- Geheugenoptimalisatie: Verwijder ongebruikte webapps om RAM en Flash geheugen vrij te maken
- Selectief laden: Gebruik de modulaire architectuur om alleen noodzakelijke functionaliteit te laden
- Beperk updatefrequentie voor data met hoge frequentie
- Gebruik passende vertragingen in loop()
- Houd geheugenverbruik in de gaten bij langdurige applicaties
📚 Geavanceerd gebruik
Dynamisch appbeheer
De bibliotheek ondersteunt het toevoegen en verwijderen van webapplicaties tijdens runtime:
// Voeg apps dynamisch toe tijdens runtime
if (sensorConnected && !webAppsServer.getApp("/webmonitor")) {
webAppsServer.addApp(new DIYablesWebMonitorPage());
}
// Verwijder apps om geheugen vrij te maken
webAppsServer.removeApp("/chat"); // Verwijder webchat als niet nodig
// Verkrijg specifieke app-instanties
DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage();
if (pinsPage) {
pinsPage->enablePin(2, WEB_PIN_OUTPUT);
}
Custom webapplicaties
Maak uw eigen webapps door te erven van DIYablesWebAppPageBase:
class MySensorDashboard : public DIYablesWebAppPageBase {
public:
MySensorDashboard() : DIYablesWebAppPageBase("/sensors") {}
void handleHTTPRequest(WiFiClient& client) override {
sendHTTPHeader(client);
client.print("<h1>Sensor Dashboard</h1>");
client.print("<p>Temperature: " + String(getTemperature()) + "°C</p>");
}
void handleWebSocketMessage(WebSocket& ws, const String& message) override {
if (message == "get_data") {
sendWebSocketMessage(ws, "temp:" + String(getTemperature()));
}
}
};
// Voeg uw custom app toe
webAppsServer.addApp(new MySensorDashboard());
Custom HTML-pagina’s
U kunt de HTML-bestanden in de src/html/ map aanpassen om de webinterface naar wens te stylen en functionaliteit toe te voegen.
Meerdere WebSocket-clients
De bibliotheek ondersteunt meerdere gelijktijdige WebSocket-verbindingen, zodat meerdere gebruikers dezelfde Arduino kunnen bedienen.
Integratie met andere bibliotheken
Eenvoudige integratie met sensorbibliotheken, servo-besturing, motordrivers en andere ESP32 bibliotheken.
📄 Licentie
Deze bibliotheek wordt uitgebracht onder de MIT-licentie. Zie het LICENSE-bestand voor details.
Veel programmeerplezier met de DIYables ESP32 WebApps Library! 🎉