ESP32 Flappybird, oder wie man Webseiten ausgibt

English Version available here: https://shopofthings.ch/esp32-flappybird-or-how-to-serve-large-websites-from-esp32/

Komplexe Webseiten auf einem ESP32 Modul? Geht das?

Mit dem ESP32 Modul kann man schnell und unkompliziert Base64 (was ist Base64?) En- und dekodieren. Dies kann man mithilfe der Einbindung der externen C-Klasse base64.h erreichen.

Wer schon einmal einen Webserver in Arduino IDE programmiert hat, weiss, wie unschön das ganze wird. Folgendes Beispiel, wenn man zwei Knöpfe darstellen will.

Da muss es doch irgend eine Lösung geben, wie man den ganzen Webseitenkram ausserhalb von Arduino IDE programmieren kann und man es zum Schluss einfach auf das ESP-Modul kopieren kann.

Die Idee war es, die ganze Webseite nach Base64 zu enkodieren und als String abzuspeichern. Wird die Webseite dann ausgegeben, wird der entsprechende Base64-String decodiert und direkt an den Client geschickt.

Das hat den Vorteil, dass man die Webseite oder Webapp parallel entwickeln kann und z.B. über eine Schnittstelle bei Bedarf automatisch in einen Base64-Code umwandeln kann. Von dort kann man es dann in Arduino-IDE einbinden. Bei einer Änderung können die Dateien nativ als HTML oder JavasScript editiert werden. Man muss dann einfach noch den aktualisierten String in Arduino IDE ersetzen.

Ein kurzer Test hat ergeben, dass dies funktioniert. Geht dies aber auch für grössere Webseiten? Um die Motivation aufrechtzuerhalten haben wir ein HTML5 Spiel genommen. Der Code stammt von https://github.com/nebez/floppybird und wurde von uns so angepasst, dass er komplett in einer Datei geliefert werden kann. Dazu muss zuerst folgendes unternommen werden:

• Alle externen CSS-Codes in die HTML-Seite einbinden
• Alle externen Javascript-Dateien als inline-Javascript über <script>…</script>-Tags integrieren
• Alle Bilder als Daten-URI in die HTML-Seite integrieren (auch die in den CSS-Direktiven)
• Alle Audio-Files als Daten-URI in die HTML-Seite integrieren

Daten-URIs kannst Du an verschiedenen Orten online erstellen, zum Beispiel hier: https://www.browserling.com/tools/file-to-base64

Zum Schluss hat man ein einziges HTML-File, welches alle Elemente der Webseite enthält. Nun das ganze Base64 enkodieren und fertig? Der Test ist leider misslungen. Scheinbar ist der String zu lang, damit ESP32 diesen encodieren kann und das Modul resetet sich nach einem Absturz. Zu wenig RAM?

Also zurück in die IDE und den Code in kleinere Stücke aufteilen. Um auch künftig unkompliziert Änderungen vornehmen zu können, wird der Code wie folgt aufgeteilt:

jQuery ist riesig (123kB) und könnte warscheinlich mit wenig Aufwand nach Vanilla-Code umgeschrieben werden und gänzlich weggelassen werden. Den Aufwand machen wir aber heute nicht. Deshalb teilen wir jQuery in drei Teile auf.

Da das main.js File, welches wir nach game unbenennen, auch die Audiodateien enthält (je +/- 10kB), müssen wir leider auch dieses File aufsplitten.

Die Aufgesplitteten Dateien werden sofern nicht schon gemacht in duckduckgo.com minimiert. Dazu gibt man in duckduckgo “js minifier” ein und man erhält ein Formular, wo man den Code minimieren kann:

Der minimierte Code wird dann in einen Base64-Code umgewandelt. Zum Beispiel hier: https://www.base64encode.org/

Dann werden die ganzen Base64 Codes als String abgespeichert und an entsprechender Stelle im Programm decodiert und ausgegeben

Sieht doch schon viel ordentlicher aus, und das für eine Webseite mit einer Grösse von ca. 500kB und über 50 Dateien!

Den fertigen Code findest Du auf Github inklusive den einzelnen Programmteilen: https://github.com/janhajk/esp32_flappybird

Das ino-File kannst Du via Arduino-IDE auf Dein ESP32 Modul laden nachdem Du Deine W-Lan Daten entsprechend angepasst hast. Oder du änderst den Code so, dass Du direkt mit dem WLAN Deines Endgerätes auf das ESP32-Modul zugreifen kannst. Die IP vergibst Du entweder selber über Deine Netzwerkverwaltung oder sie wird automatisch vergeben und im Serial Monitor eingegeben. Danach im Browser die IP eingeben und los mit dem Spielen!

Viel Spass!

Alternativen

Mit SPIFFS kannst Du auf Deinem ESP-Modul ein Filesystem erstellen und die HTML, CSS und JS Dateien direkt darin speichern und abrufen. Ein Beispiel dazu findest Du hier: https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/