{"id":8302,"date":"2025-03-17T14:43:35","date_gmt":"2025-03-17T13:43:35","guid":{"rendered":"https:\/\/willem.aandewiel.nl\/?p=8302"},"modified":"2025-03-26T13:15:54","modified_gmt":"2025-03-26T12:15:54","slug":"bibliotheken-om-het-leven-makkelijker-te-maken-part-2","status":"publish","type":"post","link":"https:\/\/willem.aandewiel.nl\/index.php\/2025\/03\/17\/bibliotheken-om-het-leven-makkelijker-te-maken-part-2\/","title":{"rendered":"Bibliotheken om het leven makkelijker te maken (part 2)"},"content":{"rendered":"\n

Single Page Application<\/h1>\n\n\n\n

[ 1,205 keer bekeken \/ views ]

Dit is de tweede post over bibliotheken die ik heb geschreven om het bouwen van een applicatie voor esp32 bordjes te vereenvoudigen.<\/p>\n\n\n\n

Deel 1: Networking<\/a>
Deel 2: Single Page Application (GUI)
Deel 3: Filesystem manager<\/a><\/p>\n\n\n\n

Deze post gaat dus over de SPAmanager. Een bibliotheek waarmee op een eenvoudige manier een GUI kan worden geschreven voor je volgende esp32 project.<\/p>\n\n\n\n

Wat is een Single Page Application (SPA)?<\/h1>\n\n\n\n

Een Single Page Application (SPA) is een webapplicatie of website die volledig binnen \u00e9\u00e9n enkele webpagina werkt. In plaats van elke keer een nieuwe pagina van de server op te halen wanneer een gebruiker navigeert, laadt een SPA eenmalig de essenti\u00eble HTML-, CSS- en JavaScript-bestanden en beheert daarna de navigatie en interacties via JavaScript.<\/p>\n\n\n\n

De SPAmanager bibliotheek zorgt ervoor dat de layout van de webapplicatie netjes voor je geregeld wordt. Hij ziet er altijd hetzelfde uit.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

De bovenste regel is gereserveerd voor (van links naar rechts) ruimte voor drop-down menu’s, een titel en de datum\/tijd.<\/p>\n\n\n\n

Op de onderste regel kunnen status- en fout-meldingen worden weergegeven.<\/p>\n\n\n\n

Alles daartussen is gereserveerd voor pagina’s met informatie van jouw project.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Je ontkomt er niet aan om voor iedere pagina die je nodig hebt kleine stukjes html te schrijven maar dit blijft beperkt tot alleen de zaken die je in jouw project nodig hebt. Hierbij zorgt de SPAmanager ervoor dat de layout consistent blijft.<\/p>\n\n\n\n

Om je project van pagina’s en menu’s te voorzien heeft de bibliotheek een aantal methoden beschikbaar. We zullen de belangrijkste \u00e9\u00e9n voor \u00e9\u00e9n behandelen.<\/p>\n\n\n\n

addPage() <\/h2>\n\n\n\n

Met deze methode kun je een pagina aan je SPA toevoegen. Iedere pagina heeft een naam en een (klein) stukje html. <\/p>\n\n\n\n

\/\/-- Voeg een eenvoudige hoofdpagina toe\nspaManager.addPage(\"Home\", R\"(\n  <div>\n    <h1>Welkom bij mijn ESP32 Project<\/h1>\n    <p>Huidige temperatuur: <span id=\"temp\">--<\/span> \u00b0C<\/p>\n    <button id=\"refreshBtn\">Vernieuwen<\/button>\n  <\/div>\n)\");<\/pre>\n\n\n\n
Bovenstaande code heeft dit resultaat:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bestaat je applicatie uit meerdere pagina’s, dan kun je \u00e9\u00e9n daarvan “actief” maken met de methode activatePage()<\/code>. Met deze methode worden alle andere pagina’s automatisch naar de achtergrond gestuurd.<\/p>\n\n\n\n
addMenu() <\/h2>\n\n\n\n
Met deze methode voeg je een drop-down menu toe aan de pagina.<\/p>\n\n\n\n
\/\/-- Voeg een hoofdmenu toe aan de homepagina\nspaManager.addMenu(\"Home\", \"Hoofdmenu\");\n\n\/\/-- Voeg een instellingenmenu toe aan de instellingenpagina\nspaManager.addMenu(\"Home\", \"Instellingenmenu\");<\/pre>\n\n\n\n
Bovenstaande code heeft dit als resultaat:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
addMenuItem() <\/h2>\n\n\n\n
Binnen het met addMenu() aangemaakte drop-down menu kun je keuzen plaatsen met addMenuItem(). Zo’n menu-item kan een URL starten, een functie aanroepen of een popup-menu activeren.<\/p>\n\n\n\n
\/\/-- Definieer een callback functie\nvoid ledAanzetten() \n{\n  digitalWrite(LED_PIN, HIGH);\n  Serial.println(\"LED aangezet\");\n}\n\n\/\/-- Voeg een menu-item toe dat de functie aanroept wanneer erop geklikt wordt\nspaManager.addMenuItem(\"Home\", \"Hoofdmenu\", \"LED AAN\", ledAanzetten);\n\n\/\/-- Voeg een menu-item toe dat naar een externe website navigeert\nspaManager.addMenuItem(\"Home\", \"Hoofdmenu\", \"Documentatie\", \"https:\/\/example.com\/docs\");<\/pre>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
disableMenuItem() <\/h2>\n\n\n\n
Mocht, in een bepaalde context een menu-item geen functie hebben, dan kan dat menu-item met deze methode “ge-grayed-out” gemaakt worden. Het menu-item blijft dan wel in de drop-down lijst staan, maar je kunt er niet meer op klikken.<\/p>\n\n\n\n
\/\/-- Schakel het \"Reset Apparaat\" menu-item uit\nspaManager.disableMenuItem(\"Home\", \"Hoofdmenu\", \"LED AAN\");\n\n\/\/-- Je kunt items uitschakelen op basis van voorwaarden\nif (!isWifiConnected) \n{\n  spaManager.disableMenuItem(\"Home\", \"Hoofdmenu\", \"LED AAN\");\n}<\/pre>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
enableMenuItem() <\/h2>\n\n\n\n
Met deze methode kan een menu-item weer actief gemaakt worden.<\/p>\n\n\n\n
\/\/-- Schakel het \"Reset Apparaat\" menu-item in\nspaManager.enableMenuItem(\"Instellingen\", \"Instellingenmenu\", \"Reset Apparaat\");\n\n\/\/-- Je kunt items inschakelen op basis van voorwaarden\nif (isWifiConnected) \n{\n  spaManager.enableMenuItem(\"Home\", \"Hoofdmenu\", \"Cloud Upload\");\n}<\/pre>\n\n\n\n
includeJsFile() <\/h2>\n\n\n\n
Eventuele extra javascript functies kunnen met de methode includeJsFile() in de, in de browser aanwezige, code worden ge\u00efnjecteerd. Hierdoor is het mogelijk om functionaliteit die niet standaard in de SPA aanwezig is, toe te voegen. Na het aanroepen van deze methode zal het nieuwe Javascript bestand niet direct naar de browser gestuurd worden. Dit zal pas gebeuren als de esp32 van de browser “hoort” dat de html pagina volledig is ingeladen.<\/p>\n\n\n\n
void onPageLoaded() \n{\n  \/\/-- Initialiseer het dashboard na het laden van scripts\n  spaManager.callJsFunction(\"initDashboard\");\n}\n\nvoid setup() \n{\n  \/\/-- Stel de display manager in\n  spaManager.begin(\"\/SYS\");\n\n  \/\/-- Registreer de callback voor wanneer de pagina is geladen\n  spaManager.pageIsLoaded(onPageLoaded);\n\n  \/\/-- Voeg JavaScript bestanden toe\n  \/\/-- deze bestanden worden door de SPAmanager geladen\n  \/\/-- zodra de html pagina volledig is geladen\n  spaManager.includeJsFile(\"\/scripts\/utils.js\");\n  spaManager.includeJsFile(\"\/scripts\/charts.js\");\n  spaManager.includeJsFile(\"\/scripts\/sensors.js\");  \n}<\/pre>\n\n\n\n
includeCssFile() <\/h2>\n\n\n\n
Deze methode doet hetzelfde als includeJsFile() maar dan voor style-sheets.<\/p>\n\n\n\n
void setup() \n{\n  \/\/-- Stel de display manager in\n  spaManager.begin(\"\/SYS\");\n\n  \/\/-- Voeg CSS bestanden toe\n  spaManager.includeCssFile(\"\/styles\/main.css\");\n  spaManager.includeCssFile(\"\/styles\/dashboard.css\");\n\n  \/\/-- Voeg conditioneel een thema CSS toe\n  if (darkModeEnabled) \n  {\n    spaManager.includeCssFile(\"\/styles\/dark-theme.css\");\n  } \n  else \n  {\n    spaManager.includeCssFile(\"\/styles\/light-theme.css\");\n  }  \n}<\/pre>\n\n\n\n
Hoe werkt deze SPAmanager intern<\/h1>\n\n\n\n
Bij het opstarten zal de esp32 intern een html-raamwerk opbouwen.
Zodra er een client (lees: webbrowser) verbinding maakt met de interne webserver zal dit raamwerk (SPAmanager.html) naar de browser worden gestuurd, samen met het bijbehorende style-sheet (SPAmanager.css) en de nodige Javascript (SPAmanager.js). Als de pagina volledig in de browser is geladen stuurt de browser een signaal naar de SPAmanager die vervolgens de door jouw opgegeven pagina’s met menu’s injecteert in de, in de browser reeds aanwezige, code. Ook kunnen extra Javascript en style-sheets worden ge\u00efnjecteerd. Vervolgens draait de hele SPA in de browser. Via web-sockets vindt er communicatie plaats tussen de browser en de interne webserver.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Voorbeelden<\/h1>\n\n\n\n
Alle in deze post gepresenteerde voorbeelden staan in de examples<\/code> folder van de github repository<\/a>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
\n\n\n\n
API Reference<\/h1>\n\n\n\n
SPAmanager(uint16_t port = 80)<\/h3>\n\n\n\n
Constructor for the SPAmanager class. <\/p>\n\n\n\n