makesmart - ESP8266 Webserver

Webserver HTML-Template

Dieses Template basiert auf echtem HTML, CSS und Javascript. Die Entwicklung gestaltet sich dadurch sehr einfach.

Dank dem ESPAsyncWebserver und dem LittleFS auf dem ESP8266 kann man einen richtigen dateibasierten Webserver erstellen. Dies ermöglicht die einfache Speicherung und Verwaltung von Webinhalten direkt auf dem Mikrocontroller, was für IoT-Projekte besonders nützlich ist.

Mit dieser Kombination aus Hardware und Software kann man komplexe Webserver-Anwendungen entwickeln, die stabil und effizient laufen, und dabei Webstandards wie HTML5, CSS3 und JavaScript nutzen, um eine ansprechende Benutzeroberfläche zu schaffen.


Echtes Javascript

Durch das Ausliefern echter Dateien kann man auch echtes Javascript verwenden. Klicke hier, um ein Alert-Fenster zu triggern!

Sieh dir gerne die Datei /assets/js/script.js an, um den Code für das alert() zu sehen.

Echte Bilder

Wusstest du, dass das Bild im Header auch auf dem ESP8266 gespeichert ist?

Ziemlich cool! Denn so kann man auch ohne tatsächliche Internetverbindung eine richtig schicke grafische Oberfläche auf dem ESP8266 zaubern! Und weil es so schön ist, hier nochmal das makesmart Logo!

Echte Dateien

Lass deinen Ideen freien Lauf. Nutze die Dateien die du benötigst um das beste aus deinem Projekt rauszuholen!


Dateistruktur

Natürlich können beliebig viele Dateien auf den ESP8266 hochgeladen werden; hauptsache die maximale Flash-Speichergröße wird dabei nicht überschritten. Aktuell sind die Dateien auf dem ESP8266 recht übersichtlich:

./data
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── images/
│   │   └── favicon-96.png
│   └── js/
│       └── script.js
└── index.html