Home
Arduino UNO R4

DIYables WebApps Bibliotheek - Compleet Arduino Web Applicatie Framework

DIYables WebApps Bibliotheek

Een uitgebreide Arduino bibliotheek voor het maken van WebSocket-gebaseerde webapplicaties op Arduino Uno R4 WiFi en DIYables STEM V4 IoT. Deze bibliotheek biedt meerdere kant-en-klare webapplicaties voor het monitoren, besturen en interactie met uw Arduino projecten via een moderne web interface. Speciaal geoptimaliseerd voor het DIYables STEM V4 IoT educatieve platform met verbeterde IoT mogelijkheden en ingebouwde sensoren.

Met deze bibliotheek kunt u met uw Arduino communiceren via een webbrowser op uw smartphone of PC door:

  • Gebruik van voorgebouwde web apps uit de 11 meegeleverde applicaties zonder enige kennis van web programmeren
  • Aanpassen van de voorgebouwde web apps om te voldoen aan uw specifieke projectvereisten
  • Bouwen en toevoegen van uw eigen web apps met behulp van de flexibele framework architectuur
Arduino UNO R4 DIYables WebApps

🚀 Functies

  • Modulaire Architectuur: Voeg alleen de web apps toe die u nodig hebt om geheugengebruik te optimaliseren
  • Geheugenefficiënt: Elke web app kan onafhankelijk in- en uitgeschakeld worden
  • Geheugengeoptimaliseerd: HTML-, JavaScript- en CSS-code zijn geminimaliseerd om codegrootte te reduceren terwijl UI en functionaliteit behouden blijven. Originele niet-geminimaliseerde broncode is opgenomen in de bibliotheek voor referentie en aanpassing
  • 11 Voorgebouwde Webapplicaties: Volledige Arduino besturing zonder kennis van web programmeren vereist
    • Home Page: Centraal knooppunt met links naar alle webapplicaties
    • Web Monitor: Real-time seriële monitor in uw browser via WebSocket
    • Web Chat: Interactieve chat interface met uw Arduino
    • Web Digital Pins: Bestuur en monitor alle digitale pinnen met web interface
    • Web Slider: Dubbele slider besturing voor analoge/PWM uitgangen
    • Web Joystick: Interactieve joystick voor robot- en voertuigbesturing
    • Web Analog Gauge: Cirkelvormige gauge weergave voor sensormonitoring
    • Web Rotator: Draaibare schijfbesturing met continue/beperkte modi
    • Web Temperature: Thermometer visualisatie met configureerbare bereiken
    • Web RTC: Real-time klok met tijdsynchronisatie en timezone afhandeling
    • Web Table: Twee-kolom attribuut-waarde tabel met real-time updates
    • Web Plotter: Real-time datavisualisatie en plotting
  • Custom Web App Template: Compleet sjabloon voor het maken van uw eigen webapplicaties met real-time WebSocket communicatie
  • Responsief Ontwerp: Werkt op desktop en mobiele apparaten
  • Real-time Communicatie: WebSocket-gebaseerd voor directe updates
  • Eenvoudige Integratie: Simpele callback-gebaseerde API
  • Ondersteuning voor Meerdere Apps: Ondersteunt het toevoegen van meerdere web apps tegelijkertijd
  • Automatische Home Page Integratie: Toegevoegde web app wordt automatisch als link weergegeven op de home page
  • Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan worden uitgebreid voor andere hardwareplatforms. Zie DIYables_WebApps_ESP32

📦 Installatie - Arduino IDE Bibliotheekbeheer

  • Open Arduino IDE
  • Navigeer naar het Libraries icoon in de linkerbalk van de Arduino IDE.
  • Zoek "DIYables WebApps", vind dan de DIYables WebApps bibliotheek door DIYables
  • Klik op de Install knop om de bibliotheek te installeren.
Arduino UNO R4 DIYables WebApps library
  • U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren
  • Klik op de Install All knop om alle bibliotheekafhankelijkheden te installeren.
Arduino UNO R4 DIYables WebApps dependency

🔧 Afhankelijkheden

Deze bibliotheek vereist het volgende:

  • UnoR4WiFi_WebServer bibliotheek (voor WebSocket ondersteuning)

🎯 Snelle Start

Voor gedetailleerde setup instructies en codevoorbeelden, raadpleeg:

📱 Webapplicaties

1. Home Page (`/`)

  • Centraal navigatieknooppunt
  • Links naar alle webapplicaties
  • Alleen ingeschakelde/toegevoegde apps worden weergegeven op de home page
  • Verbindingsstatus weergave
  • Responsief ontwerp

2. Web Monitor (`/web-monitor`)

  • Browser-gebaseerde seriële monitor
  • Real-time bidirectionele communicatie
  • Berichtentijdsstempeling en telling
  • Commandoinvoer met geschiedenis

3. Web Plotter (`/web-plotter`)

  • Real-time datavisualisatie en plotting
  • Ondersteuning voor meerdere dataseries (tot 8 lijnen)
  • Auto-schaling Y-as of vaste bereiken
  • Aanpasbare plottitels en aslabels
  • WebSocket streaming voor minimale latentie
  • Perfect voor sensormonitoring en debugging

4. WebChat (`/chat`)

  • Interactieve chat interface
  • Natuurlijke taalresponses
  • LED besturing via chatcommando's
  • Leuke en educatieve interacties

5. Web Digital Pins (`/web-digital-pins`)

  • Individuele pinbesturing (pinnen 0-13)
  • Elke pin kan worden ingeschakeld als INPUT of OUTPUT modus
  • Alleen ingeschakelde pinnen worden weergegeven in de Web UI
  • Input- en output pinmonitoring
  • Bulkbewerkingen (Alles AAN/UIT, Omschakelen)
  • Real-time pin status feedback

6. Web Slider (`/web-slider`)

  • Dubbele range sliders (0-255)
  • PWM uitgangsbesturing
  • Vooringestelde waardeknopen
  • Gesynchroniseerde besturingsopties

7. Web Joystick (`/web-joystick`)

  • Interactieve joystickbesturing met touch/muis ondersteuning
  • X/Y coördinatenwaarden (-100 tot +100)
  • Real-time positiefeedback
  • Auto-center terugkeer kan worden in-/uitgeschakeld via Arduino code
  • Perfect voor robot- en voertuigbesturing

8. Web Analog Gauge (`/web-gauge`)

  • Professionele cirkelvormige gauge weergave voor real-time sensormonitoring
  • Configureerbaar waardenbereik, eenheden en precisie
  • Soepele naaldanimatie met visuele feedback
  • Kleur-gecodeerde zones (groen, geel, rood) voor statusindicatie
  • Automatische config afhandeling - stel bereik eenmaal in constructor in
  • Perfect voor druksensoren, spanningsmonitoring en analoge metingen

9. Web Rotator (`/web-rotator`)

  • Interactieve draaibare schijfbesturing met visuele feedback
  • Twee bedrijfsmodi: Continue (0-360°) en Beperkt (aangepast bereik)
  • Real-time hoekfeedback met soepele rotatie
  • Touch- en muisondersteuning voor desktop en mobiel
  • Professioneel conisch verloop ontwerp met positie-indicator
  • Perfect voor servomotoren, stappenmotoren en rotatie besturing

10. Web Temperature (`/web-temperature`)

  • Visuele thermometerweergave met real-time temperatuurmonitoring
  • Configureerbaar temperatuurbereik en eenheden (°C, °F, K)
  • Interactieve thermometervisualisatie met kwik-stijl animatie
  • Automatische config afhandeling - stel bereik eenmaal in constructor in
  • Real-time waarde-updates via WebSocket
  • Perfect voor temperatuursensoren en omgevingsmonitoring

11. Web RTC (`/web-rtc`)

  • Real-time klokweergave voor zowel Arduino RTC als client apparaattijd
  • Eén-klik tijdsynchronisatie van webbrowser naar Arduino RTC
  • Visuele tijdverschil indicator die synchronisatienauwkeurigheid in minuten toont
  • Twee-lijns tijdsformaat met 12-uurs AM/PM weergave en volledige datum
  • WebSocket-gebaseerde real-time updates voor directe tijdsynchronisatie
  • Moderne verloop UI met responsief kaart-stijl layout
  • Timezone-bewuste synchronisatie met gebruik van lokale apparaattijd
  • Ingebouwde RTC ondersteuning specifiek voor Arduino Uno R4 WiFi
  • Verbindingsstatus monitoring met visuele WebSocket indicatoren
  • Automatische tijdsverzoeken bij pagina laden voor directe weergave
  • Perfect voor tijdsstempeling, data logging, planning en tijd-gebaseerde automatisering

12. Web Table (`/web-table`)

  • Twee-kolom datatable met attribuut-waarde paren voor georganiseerde data weergave
  • Real-time waarde updates via WebSocket voor directe data verversing
  • Configureerbare tabel structuur eenmalig ingesteld in Arduino setup() functie
  • Dynamische waarde updates tijdens runtime zonder pagina verversing
  • Modern responsief ontwerp met hover effecten en visuele feedback
  • Verbindingsstatus monitoring met visuele WebSocket indicatoren
  • Lege status afhandeling met gebruiksvriendelijke berichten wanneer geen data beschikbaar
  • Handmatige verversingsmogelijkheid met dedicated verversingsknop
  • Flexibele datatypes ondersteunend strings, nummers en geformateerde waarden
  • Geheugenefficiënte opslag met configureerbaar maximum aantal rijen (standaard: 20)
  • Automatische dataverzoeken bij pagina laden voor directe tabel populatie
  • Perfect voor sensormonitoring, systeemstatus, configuratie weergave en real-time dashboards

13. CustomWebApp Sjabloon (`/custom`)

  • Compleet sjabloon voor het maken van uw eigen aangepaste webapplicaties
  • Real-time WebSocket communicatie met automatische berichtfiltering
  • Professioneel class-gebaseerd ontwerp met ingekapseld APP_IDENTIFIER systeem
  • Beginnersvriendelijk sjabloon met eenvoudige tekstberichten tussen web en Arduino
  • Auto-herverbind functionaliteit voor betrouwbare WebSocket verbindingen
  • Mobiel responsief ontwerp werkend op telefoons, tablets en computers
  • Conflictpreventie begeleiding voor ontwikkeling van meerdere aangepaste apps
  • Modulaire bestandsstructuur met gescheiden HTML, Arduino logica en bibliotheekintegratie
  • Uitbreidbaar framework - wijzig sjabloon om geavanceerde applicaties te maken
  • Integratie gereed - werkt naadloos samen met andere DIYables WebApps
  • Perfect voor aangepaste IoT interfaces, sensor dashboards, apparaatbesturingspanelen en educatieve projecten

🧩 Modulaire Architectuur

Geheugenoptimalisatie: De DIYables WebApps bibliotheek heeft een modulair ontwerp waarmee u alleen de webapplicaties kunt toevoegen die u daadwerkelijk nodig hebt, wat het geheugengebruik op uw Arduino aanzienlijk vermindert.

Belangrijkste Voordelen:

  • Selectieve Integratie: Voeg alleen benodigde web apps toe aan uw project
  • Geheugenefficiënt: Elke web app is onafhankelijk en optioneel
  • Schaalbaar: Begin klein en voeg meer functies toe naar behoefte
  • Prestatie Geoptimaliseerd: Minder actieve apps = betere prestaties

Hoe het Werkt:

// Basis setup - voeg alleen toe wat u nodig hebt DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; // Altijd aanbevolen DIYablesWebSliderPage webSliderPage; // Alleen als u sliders nodig hebt DIYablesWebJoystickPage webJoystickPage; // Alleen als u joystick nodig hebt DIYablesWebAnalogGaugePage gaugePage(0.0, 100.0, "V"); // Alleen als u analoge gauge nodig hebt DIYablesWebRotatorPage webRotatorPage(ROTATOR_MODE_CONTINUOUS); // Alleen als u rotator nodig hebt DIYablesWebTemperaturePage tempPage(-10.0, 50.0, "°C"); // Alleen als u temperatuur nodig hebt DIYablesWebRTCPage webRTCPage; // Alleen als u tijdsync nodig hebt // Voeg alleen de apps toe die u wilt webAppsServer.addApp(&homePage); webAppsServer.addApp(&webSliderPage); // Sla apps over die u niet nodig hebt webAppsServer.addApp(&gaugePage); // Voeg alleen toe wat u gebruikt webAppsServer.addApp(&tempPage); // om geheugen te besparen webAppsServer.addApp(&webRotatorPage); // Pas aan naar behoefte webAppsServer.addApp(&webRTCPage); // Voeg tijdsynchronisatie toe // Start server - kies juiste methode webAppsServer.begin("WiFi_SSID", "wachtwoord"); // WiFi verbinding // OF // webAppsServer.begin(); // Voor Ethernet of vooraf geconfigureerde verbindingen (toekomst) // Runtime beheer (geavanceerd) if (sensorConnected) { webAppsServer.addApp(&webJoystickPage); // Voeg dynamisch toe }

Runtime Flexibiliteit:

  • Dynamisch Beheer: Voeg apps toe of verwijder ze tijdens runtime met addApp() en removeApp()
  • Voorwaardelijk Laden: Laad apps gebaseerd op hardware of configuratie
  • Aangepaste Apps: Maak aangepaste webapplicaties door te erven van DIYablesWebAppPageBase
  • Geen Hercompilatie: Wijzig beschikbare apps zonder herbouwen

🔌 API Referentie

Voor volledige API documentatie inclusief alle klassen, methoden en gebruiksvoorbeelden, zie:

API Referentie Documentatie

📋 Voorbeelden

De bibliotheek bevat uitgebreide voorbeeld tutorials:

Elke voorbeeld tutorial bevat:

  • Stap-voor-stap setup instructies
  • Hardware verbindingsdiagrammen
  • Volledige codevoorbeelden
  • Probleemoplossingshandleidingen
  • Projectideeën en integratietips

🌐 Web Interface URL's

Eenmaal verbonden met WiFi, toegang tot de applicaties op:

  • Home: http://[IP_ADRES]/
  • Web Chat: http://[IP_ADRES]/chat
  • Web Monitor: http://[IP_ADRES]/web-monitor
  • Web Plotter: http://[IP_ADRES]/web-plotter
  • Web Digital Pins: http://[IP_ADRES]/web-digital-pins
  • Web Slider: http://[IP_ADRES]/web-slider
  • Web Joystick: http://[IP_ADRES]/web-joystick
  • Web Analog Gauge: http://[IP_ADRES]/web-gauge
  • Web Rotator: http://[IP_ADRES]/web-rotator
  • Web Temperature: http://[IP_ADRES]/web-temperature
  • Web RTC: http://[IP_ADRES]/web-rtc
  • Web Table: http://[IP_ADRES]/web-table
  • Custom App: http://[IP_ADRES]/custom (wanneer CustomWebApp sjabloon wordt gebruikt)

🔧 Hardware Setup

DIYables STEM V4 IoT (Aanbevolen Platform)

  • Ingebouwde WiFi mogelijkheid met geoptimaliseerd antenne-ontwerp
  • Onboard LED's en sensoren klaar voor gebruik uit de doos
  • Uitgebreide I/O opties met extra connectiviteit
  • Onderwijs-gericht ontwerp perfect voor het leren van IoT ontwikkeling
  • Professionele kwaliteit componenten voor betrouwbaar prototyping
  • Uitgebreide pin layout geoptimaliseerd voor breadboard gebruik
  • Verbeterd energiebeheer voor stabiele werking
  • Perfect voor STEM onderwijs en IoT project ontwikkeling

Arduino Uno R4 WiFi

  • Geen extra hardware vereist voor basisfunctionaliteit
  • Verbind LED's met digitale pinnen voor visuele feedback
  • Verbind sensoren met analoge pinnen voor monitoring
  • Standaard Arduino compatibiliteit

💡 Gebruikstips

  1. Geheugenoptimalisatie: Gebruik modulaire architectuur - voeg alleen de web apps toe die u nodig hebt om geheugen te besparen
  2. WiFi Verbinding: Zorg voor sterk WiFi signaal voor stabiele WebSocket communicatie
  3. Pin Veiligheid: Controleer altijd pin mogelijkheden voordat u externe apparaten aansluit
  4. Stroomvoorziening: Gebruik adequate stroomvoorziening voor uw aangesloten apparaten
  5. Browser Compatibiliteit: Werkt het best met moderne browsers (Chrome, Firefox, Safari, Edge)
  6. Mobiel Vriendelijk: Alle interfaces zijn responsief en werken op mobiele apparaten
  7. Begin Klein: Start met 1-2 web apps, voeg dan meer functies toe naarmate uw project groeit

🔍 Probleemoplossing

WiFi Verbindingsproblemen

  • Verifieer SSID en wachtwoord
  • Controleer WiFi signaalsterkte
  • Zorg voor 2.4GHz netwerk (5GHz niet ondersteund)

WebSocket Verbindingsproblemen

  • Controleer firewall instellingen
  • Verifieer IP-adres in browser
  • Probeer de webpagina te vernieuwen
  • Controleer Seriële Monitor voor foutmeldingen

Prestatieproblemen

  • Geheugenoptimalisatie: Verwijder ongebruikte web apps om RAM en Flash geheugen vrij te maken
  • Selectief Laden: Gebruik modulaire architectuur om alleen benodigde functionaliteit toe te voegen
  • Beperk update frequentie voor hoge-frequentie data
  • Gebruik geschikte delays in loop()
  • Monitor geheugengebruik voor lang-lopende applicaties

📚 Geavanceerd Gebruik

Dynamisch App Beheer

De bibliotheek ondersteunt runtime toevoeging en verwijdering van webapplicaties:

// 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 // Krijg specifieke app instances DIYablesWebDigitalPinsPage* pinsPage = webAppsServer.getWebDigitalPinsPage(); if (pinsPage) { pinsPage->enablePin(2, WEB_PIN_OUTPUT); }

Aangepaste Webapplicaties

Maak uw eigen web apps 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>Temperatuur: " + String(getTemperature()) + "°C</p>"); } void handleWebSocketMessage(WebSocket& ws, const String& message) override { if (message == "get_data") { sendWebSocketMessage(ws, "temp:" + String(getTemperature())); } } }; // Voeg uw aangepaste app toe webAppsServer.addApp(new MySensorDashboard());

Aangepaste HTML Pagina's

U kunt de HTML bestanden in de src/html/ directory wijzigen om het web interface uiterlijk en functionaliteit aan te passen.

Meerdere WebSocket Clients

De bibliotheek ondersteunt meerdere gelijktijdige WebSocket verbindingen, waardoor meerdere gebruikers dezelfde Arduino kunnen besturen.

Integratie met Andere Bibliotheken

Eenvoudige integratie met sensorbibliotheken, servobesturing, motoraandrijvingen en andere Arduino bibliotheken.

📄 Licentie

Deze bibliotheek is uitgebracht onder de MIT Licentie. Zie LICENSE bestand voor details.

🔗 Links

Veel plezier met coderen met DIYables WebApps Bibliotheek! 🎉

Gerelateerde Tutorials

※ ONZE BERICHTEN

  • U bent welkom om de link naar deze tutorial te delen. Gebruik onze inhoud echter niet op andere websites. We hebben veel moeite en tijd gestoken in het maken van de inhoud, respecteer alstublieft ons werk!
OPENBAARMAKING
Newbiely.nl is deelnemer aan het Amazon Services LLC Associates Program, een affiliate-reclameprogramma dat is ontworpen om websites een manier te bieden om advertentie-inkomsten te verdienen door te adverteren en te linken naar Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl en Amazon.se
Copyright © 2026 Newbiely.nl. Alle rechten voorbehouden.
Algemene Voorwaarden | Privacybeleid
Email: newbiely.com@gmail.com