Template Strings mit dem ESP8266 und dem ESPAsyncWebServer

von cooper.bin
veröffentlicht am 25.07.2024 aktualisiert am 25.07.2024

Template Strings sind eine einfache und effektive Möglichkeit, dynamische Inhalte in HTML-Seiten einzufügen. Das sogenannte Template-Rendering wird in der Webentwicklung sehr häufig genutzt - dafür wird in der Regel eine Template-Engine verwendet. Wer bereits Webprojekte umgesetzt hat, wird sehr wahrscheinlich bereits damit zutun gehabt haben. Eine Übersicht über gängige Template-Engines findest du hier - auch wenn es in freier Wildbahn weitaus mehr Auswahl gibt.

In diesem Tutorial geht es um die Verwendung von Template-Strings mit Mikrocontrollern wie dem ESP8266 und dem ESPAsyncWebServer. Im Gegensatz zu klassischen Template-Engines, die komplexe HTML-Dateien rendern und Code einbetten können, fungiert die Implementierung auf dem ESP8266 als eher einfacher String-Processor und ermöglicht keine Codeausführung im Frontend. Dennoch bietet das Processing von Template Strings eine effiziente und professionelle Möglichkeit, dein Projekt um vielfältige Darstellungsoptionen zu erweitern.

Produktempfehlungen und -suche in Verbindung mit dem Amazon Partnerprogramm:

¹ Angaben ohne Gewähr. Bei einem Kauf über den Link erhalten wir eine Provision.

Bevor wir tiefer in das Thema einsteigen, ist es hilfreich, den Blog-Artikel ESP8266 Webserver mit echten HTML Dateien zu kennen. In diesem Beitrag haben wir bereits die Grundlagen zur Einrichtung eines ESP8266 Webservers mit HTML-Dateien erläutert. Wir werden nun darauf aufbauen und zeigen, wie man mit Template Strings dynamische Inhalte in HTML-Seiten einfügen kann. Das Tutorial ist also Vorraussetzung für den Umgang mit Template-Strings auf dem ESP8266.

Zum Kapitel springen Was sind Template Strings?

Ein Template String ist im Wesentlichen ein Platzhalter innerhalb des HTML-Dokuments. Dieser Platzhalter wird noch vor dem Senden an den Client durch einen tatsächlichen Wert ersetzt. Nehmen wir als Beispiel eine gekürzte Fassung des esp8266-webserver-html-template.zip aus meinem anderen Tutorial.

<div class="content">
  <h1>Webserver HTML-Template</h1>
  <h3>MAC-Adresse: %MAC_ADDRESS%</h3>      
</div>

In diesem Beispiel wird der Platzhalter %MAC_ADDRESS% durch die MAC-Adresse des ESPs ersetzt. Der Webserver übernimmt diese Ersetzung, wie bereits erwähnt, bevor die HTML-Seite an den Client gesendet wird. Das heißt: Wir sehen direkt und ohne weitere Ladezeit die MAC-Adresse in unserem HTML-Dokument sobald wir es aufrufen.

Produktempfehlungen und -suche in Verbindung mit dem Amazon Partnerprogramm:

¹ Angaben ohne Gewähr. Bei einem Kauf über den Link erhalten wir eine Provision.

ESP8266 Webserver Template-String Beispiel ><

Wir nutzen in diesem Tutorial die MAC-Adresse, damit keine zusätzliche Hardware benötigt wird und jeder das Beispiel nachmachen kann. Was letztendlich verarbeitet wird, liegt in eurer Hand – zum Beispiel Sensordaten oder andere Werte. Dies ist besonders nützlich für Anwendungen, bei denen aktuelle Daten angezeigt werden sollen, ohne dass eine kontinuierliche Aktualisierung erforderlich ist.

Zum Kapitel springen Programmcode

Zum Kapitel springen Client

Wie das HTML-Dokument aussehen muss, um mit Template-Strings zu arbeiten, wurde bereits dargestellt. Auf der Clientseite muss nichts weiter unternommen werden – die Platzhalter werden an den gewünschten Stellen platziert und entsprechend durch die Logik auf dem ESP vor dem Ausliefern ersetzt.

ESP8266 Webserver Template-Strings Vergleich ><

Zum Kapitel springen Server

Der Programmcode für das Ersetzen der Template-Strings ist überraschend übersichtlich. Wir müssen lediglich eine Funktion zur Ersetzung der Platzhalter und eine Anpassung in der Server-Route vornehmen, um die HTML-Seite korrekt auszuliefern. Diese Funktion überprüft den übergebenen Platzhalter und ersetzt ihn durch den entsprechenden Wert, in diesem Fall die MAC-Adresse des ESP:

// Funktion zur Ersetzung der Template Strings
String processor(const String& var) {
  if (var == "MAC_ADDRESS") {
    return WiFi.macAddress();
  }
  return String();
}

Diese Funktion kann an einer beliebigen Stelle im Programmcode eingefügt werden, sollte jedoch idealerweise vor ihrem ersten Aufruf definiert werden.

Zusätzlich muss diese Funktion in der entsprechenden Server-Route übergeben werden. Da wir das Rendering nur in der index.html-Seite vornehmen, reicht es, den Prozessor dort zu übergeben:

// Datei `index.html` wird ausgeliefert
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(LittleFS, "/index.html", String(), false, processor);
});

Das war es eigentlich schon! Das geänderte Programm kann nun auf den ESP geladen werden. Sobald der ESP läuft und mit dem WLAN verbunden ist, wird die HTML-Seite mit den ersetzten Template-Strings ausgeliefert.

Zum Kapitel springen Template Strings, Javascript & Websockets

Template Strings bieten eine einfache und effektive Methode, um dynamische Inhalte in Webseiten zu integrieren, die von einem ESP8266-Webserver bereitgestellt werden. Sie sind besonders nützlich für Anfänger, die schnell Ergebnisse erzielen möchten, und für erfahrene Nutzer, die eine einfache Lösung für die Anzeige dynamischer Daten suchen. Durch die Kombination von Template Strings mit AJAX oder Websockets können Seiten zudem nach dem initialen Laden aktuell gehalten werden, was die Vorteile beider Ansätze vereint.


cooper.bin Avatar

cooper.bin

Unterstütze mich und meine Arbeit, so kann ich weiter meiner Leidenschaft nachgehen. Ich lege viel Wert auf Qualität und stecke daher sehr viel Zeit in meine Beiträge. Wenn sie dir gefallen kannst du dir gerne auch meine anderen Artikel anschauen.

Mit PayPal unterstützen

Ich bin auf dem makesmart Discord-Server aktiv. Dort bin ich auch relativ gut erreichbar.

Teile diesen Beitrag



Diese Artikel könnten dich auch interessieren

ESP8266 Webserver mit echten HTML Dateien

Mit dem ESPAsyncWebserver kann man einen dateibasierten Webserver auf dem ESP8266 realisieren. Dieser kann HTML, CSS, Javascript und jede andere Art von Datei ausliefern.

cooper.bin am 28.04.2024

ESP8266 Websocket Server für Echtzeitkommunikation

Mit einem Websocket-Server auf dem ESP8266 kann man Daten in Echtzeit austauschen. Im Gegensatz zu HTTP kann der Server den Client über neue Events benachrichtigen, ohne vorher angefragt zu werden.

cooper.bin am 02.05.2024

ESP8266 Webserver: GET-Variablen auslesen

GET-Parameter sind Variablen, die über die URL übergeben werden. Diese Variablen können auf einem ESP8266 ausgelesen werden, um bestimmte Aktionen in der Software auszulösen.

cooper.bin am 17.02.2024

ESP8266 D1 Mini WLAN-Relais mit HTTP API

Mit diesem einfachem Webserver auf dem ESP8266 mit HTTP API kannst du ein Relais smart machen! Steuere das Relais über deinen Webbrowser oder automatisiert durch andere Dienste.

cooper.bin am 20.02.2024

ESP8266 - Ein einfacher Webserver mit mDNS

Während Webserver wie Apache2 oder NGNIX auf Rechnern laufen, kann man auch auf einem ESP8266 einen Webserver verwenden. In diesem Tutorial werden wir ein Grundgerüst implementieren.

cooper.bin am 13.02.2024