ESP8266 Webserverinhalte wie Bilder (PNG und JPEG) aus dem internen Flash-Speicher laden

Der ESP8266 NodeMCU kann als Webserver mit im Code hinterlegten html Webseiten verwendet werden. Es besteht jedoch vielleicht auch der Wunsch Bilder in die Webseite einzufügen. Dies kann mit Hilfe von SPIFFS (SPI Flash File System) erreicht werden. In dieser Anleitung wird diese Möglichkeit beispielhaft gezeigt.

Benötigte Tools für diese Anleitung:

Neben der Arduino IDE und der Installation der ESP8266 Plugins (hier beschrieben) wird das Tool “ESP8266 Sketch Data Upload” benötigt.

  1. Laden Sie das Tool aus folgendem Git-Repository herunter: https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.1.3/ESP8266FS-0.1.3.zip
  2. Erstellen Sie in Ihrem Arduino Installations-Verzeichnis das Verzeichnis “tools”, falls es noch nicht existiert.
  3. Entpacken Sie das .zip Archiv in dieses Verzeichnis (der Pfad sollte dann wie folgt aussehen: <Installations-Verzeichnis>/Arduino/tools/ESP8266FS/)
  4. Starten Sie die Arduino IDE neu
  5. Erstellen Sie einen neuen Sketch und speichern Sie diesen
  6. Navigieren Sie das Abgabeverzeichnis des Sketches (auch über die Arduino IDE möglich durch: Sketch -> Sketch-Ordner Anzeigen)
  7. Erstellen Sie den Unterordner “data” und legen Sie die Bilddateien und HTML-Dateien hier ab.
  8. Wenn nun das richtige Board und COM-Port ausgewählt ist, so wie der Serielle Monitor geschlossen ist, können die Dateien über:
    Werkzeuge -> ESP8266 Sketch Data Upload an den ESP übertragen werden.

Erstellung der HTML-Webseite mit einem Bild als Beispiel

Erstellen Sie eine neue Text-Datei im bereits angelegten data-Ordner des zu verwendenden Sketches. Die angelegte Datei muss nun in index.html umbenannt und mit dem Texteditor Ihrer Wahl editiert werden. Zu empfehlen ist der Sublime Text-Editor.

Dies ist der Beispiel HTML-Code, welcher in der index.html Datei gespeichert wird:

<!DOCTYPE html>
<html>
<body>
 
<p>Dies ist eine Beispiel, wie sich eine HTML-Seite und eine Bild aus dem Dateisystem des ESP-Flash laden l&auml;sst:</p>

<a href="https://goo.gl/eZWtAM"><img src="\image.png" alt="Bild aus dem ESP8266 Flashspeicher" width="350" height="100"></a>

</body>
</html>

Als Bild wird in diesem Beispiel unser Logo benutzt, welches Sie über einen Rechtsklick und “Bild speicher unter …” ebenfalls im data-Ordner unter dem Namen image.png ablegen.

Der Arduino-Sketch mit dem ESP8266 Webserver

In den bereits angelegten Sketch fügen Sie folgenden Code ein (In der ESP-WLAN-Konfiguration muss der SSID und das dazugehörige Passwort hinterlegt werden):

#include <ESP8266WiFi.h>           // Für die WLAN-Funktion des ESP8266
#include <ESP8266WebServer.h>      // Für die Web-Server-Funktion des ESP8266
#include <FS.h>                    // Für die Dateisystemverwaltung des ESP8266
 
// Die SSID und das dazügehörige Passwort müssen angepasst werden! 

const char* imagefile = "/image.png";
const char* htmlfile = "/index.html";
 
//ESP-WLAN Konfiguration
const char *ssid = "SSID-von-Ihrem-Lokalen-WLAN";
const char *password = "PW-des-lokalen-WLAN";

//ESP-Web-Server Konfiguration
ESP8266WebServer server(80);
 
void handleRoot(){
  server.sendHeader("Location", "/index.html",true);   //Weiterleitung auf die eigene HTML-Seite
  server.send(302, "text/plane","");
}
 
void handleWebRequests(){
  if(loadFromSpiffs(server.uri())) return;
  String message = "File Not Detected\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  Serial.println(message);
}
 
void setup() {
  delay(1000);
  Serial.begin(9600);
  Serial.println();
 
  //Initialisierung des Dateisystems
  SPIFFS.begin();
  Serial.println("Dateisystem initialisiert");
 
  //Initialisierung des WLAN-Clienten
  Serial.print("Verbunden mit ");
  Serial.println(ssid);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("WLAN verbunden");
  Serial.println("IP-Addresse: ");
  Serial.println(WiFi.localIP());
 
  //Initialisierung Webserver
  server.on("/",handleRoot);
  server.onNotFound(handleWebRequests); 
  server.begin();  
}
 
void loop() {
 server.handleClient();
}
 
bool loadFromSpiffs(String path){
  String dataType = "text/plain";
  if(path.endsWith("/")) path += "index.htm";
 
  if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
  else if(path.endsWith(".html")) dataType = "text/html";
  else if(path.endsWith(".htm")) dataType = "text/html";
  else if(path.endsWith(".css")) dataType = "text/css";
  else if(path.endsWith(".js")) dataType = "application/javascript";
  else if(path.endsWith(".png")) dataType = "image/png";
  else if(path.endsWith(".gif")) dataType = "image/gif";
  else if(path.endsWith(".jpg")) dataType = "image/jpeg";
  else if(path.endsWith(".ico")) dataType = "image/x-icon";
  else if(path.endsWith(".xml")) dataType = "text/xml";
  else if(path.endsWith(".pdf")) dataType = "application/pdf";
  else if(path.endsWith(".zip")) dataType = "application/zip";
  File dataFile = SPIFFS.open(path.c_str(), "r");
  if (server.hasArg("download")) dataType = "application/octet-stream";
  if (server.streamFile(dataFile, dataType) != dataFile.size()) {
  }
 
  dataFile.close();
  return true;
}

Dieser Sketch wird nun auf den ESP8266 übertragen.

Im Anschluss wird die HTML-Datei und das PNG-Bild über: Werkzeuge -> ESP8266 Sketch Data Upload übertragen.

Die erfolgreiche Übertragung erkennt man an folgender Konsolenausgabe der Aruino IDE:

Das Ergebnis lässt sich nun im Browser betrachten. Um die aufzurufende IP-Adresse herauszufinden wird der Serielle Monitor geöffnet und der ESP8266 neu gestartet.

Nun kann der ESP-Web-Server über den Browser angefragt werden. In diesem Beispiel ist die Adresse: http://192.168.2.61/index.html

Die Beispielseite sieht dann wie folgt aus:

 

 

 

 

Passende Beiträge:

  1. Getting started mit dem WeMos D1 WLAN/WiFi Arduino mit ESP-8266
  2. Hello World! Erstes Projekt mit dem ESP8266 NodeMCU V3 und der Arduino IDE Getting Started
  3. Größe des ESP8266 Flash-Speicher sowie Chip ID ausgeben und mit der Konfiguration überprüfen
  4. ESP8266 Flash Dateisystem SPIFFS beispielhaft benutzen