Problem mit der Lib "WebServer.h"

International Deutsch
1

Hallo,
ich möchte eine Webseite aus dem Flash-Speicher des MC ESP32 im Browser anzeigen.
Mit dem Code:

#include <WebServer.h>
WebServer server(80);
....
void setup {
server.on("/",[]() {
    server.send(200, "text/html", index_html);
  });
server.begin();
}

kann ich eine im Programm-Code gespeicherte Webseite anzeigen.

Wie kann ich aber eine Webseite die auf dem ESP32 geseichert ist anzeigen ?
Bei dem Code:

#include <WebServer.h>
#include <LittleFS.h>

WebServer server(80);
....
void setup {
LittleFS.begin(true);
server.on("/",[]() {
    server.send(LittleFS, "text/html", "index.html");  
  });
server.begin();
}

erhalte ich die Fehlermeldung:

Compilation error: no matching function for call to 'WebServer::send(fs::LittleFSFS&, const char [10], const char [12])'

MfG

Juergen

2

Hast du dir bei fips schon mal angesehen, wie das genau funktioniert ?
Da findest du Informationen, um die Website aus dem fs zu starten.

3

Möglicherweise suchst Du server.streamFile(dataFile, dataType), siehe Beispiel SDWebServer.ino.

4

Auf Fips hatten wir ihn nebenan schon hingewiesen.
Mal sehen, ob er hier Fragen beantwortet.

Gruß Tommy

5

Ja, stimmt. Daher kam mir der Username auch bekannt vor.
Da er sich aber nicht konsequent an den Aufbau hält, muss er wohl selbst sehen, wie er den murks hin bekommt.
Fips hat ja deutlich genug geschrieben, was alles benötigt wird.

6

Hallo,
bis jetzt habe ich immer sinnige Fragen beantwortet.
Zu Fips: habe ich mir schon angesehen, ist aber nicht einfach zu verstehen.
siehe LittleFS.ino

#include <detail/RequestHandlersImpl.h>
#include <list>
#include <tuple>

const char WARNING[] PROGMEM = R"(<h2>LittleFS konnte nicht initialisiert werden!)";
const char HELPER[] PROGMEM = R"(<form method="POST" action="/upload" enctype="multipart/form-data">
<input type="file" name="[]" multiple><button>Upload</button></form><H2>Lade die fs.html hoch.</H2>)";

void setupFS() {    // Funktionsaufruf "setupFS();" muss im Setup eingebunden werden
  LittleFS.begin(true);
  server.on("/format", formatFS);
  server.on("/fupload", HTTP_POST, sendResponce, handleUpload);
  server.on("/upload",[]() {
    server.send(LittleFS, "text/html", "upload.html");
  });
  server.onNotFound([](String path = server.urlDecode(server.uri())) {
    if (!handleFile(path)) server.send(404, "text/html", ("Page Not Found: ") + path);
  });
  const char * headerkeys[] = {"If-None-Match"};                                           // "If-None-Match" HTTP-Anfrage-Header einfügen
  server.collectHeaders(headerkeys, static_cast<size_t>(1));                               // für ETag Unterstüzung: vor Core Version 3.x.x.
}

bool handleList() {                                                                        // Senden aller Daten an den Client
  File root = LittleFS.open("/");
  using namespace std;
  using records = tuple<String, String, size_t, time_t>;
  list<records> dirList;
  while (File f = root.openNextFile()) {                                                   // Ordner und Dateien zur Liste hinzufügen
    if (f.isDirectory()) {
      uint8_t ran {0};
      File fold = LittleFS.open(static_cast<String>("/") + f.name());
      while (File f = fold.openNextFile()) {
        ran++;
        dirList.emplace_back(fold.name(), f.name(), f.size(), f.getLastWrite());
      }
      if (!ran) dirList.emplace_back(fold.name(), "", 0, 0);
    }
    else {
      dirList.emplace_back("", f.name(), f.size(), f.getLastWrite());
    }
  }
  dirList.sort([](const records & f, const records & l) {                                  // Dateien sortieren
    if (server.arg(0) == "1") {                                                            // nach Größe
      return get<2>(f) > get<2>(l);
    } else if (server.arg(0) == "2") {                                                     // nach Zeit
      return get<3>(f) > get<3>(l);
    } else {                                                                               // nach Name
      for (uint8_t i = 0; i < 31; i++) {
        if (tolower(get<1>(f)[i]) < tolower(get<1>(l)[i])) return true;
        else if (tolower(get<1>(f)[i]) > tolower(get<1>(l)[i])) return false;
      }
      return false;
    }
  });
  dirList.sort([](const records & f, const records & l) {                                  // Ordner sortieren
    if (get<0>(f)[0] != 0x00 || get<0>(l)[0] != 0x00) {
      for (uint8_t i = 0; i < 31; i++) {
        if (tolower(get<0>(f)[i]) < tolower(get<0>(l)[i])) return true;
        else if (tolower(get<0>(f)[i]) > tolower(get<0>(l)[i])) return false;
      }
    }
    return false;
  });
  String temp = "[";
  for (auto& t : dirList) {
    if (temp != "[") temp += ',';
    temp += "{\"folder\":\"" + get<0>(t) + "\",\"name\":\"" + get<1>(t) + "\",\"size\":\"" + formatBytes(get<2>(t)) + "\",\"time\":\"" + get<3>(t) + "\"}";
  }
  temp += ",{\"usedBytes\":\"" + formatBytes(LittleFS.usedBytes()) +                       // Berechnet den verwendeten Speicherplatz
          "\",\"totalBytes\":\"" + formatBytes(LittleFS.totalBytes()) +                    // Zeigt die Größe des Speichers
          "\",\"freeBytes\":\"" + (LittleFS.totalBytes() - LittleFS.usedBytes()) + "\"}]"; // Berechnet den freien Speicherplatz
  server.send(200, "application/json", temp);
  return true;
}

void deleteFiles(const String &path) {
  DEBUG_F("delete: %s\n", path.c_str());
  if (!LittleFS.remove("/" + path)) {
    File root = LittleFS.open(path);
    while (String filename = root.getNextFileName()) {
      LittleFS.remove(filename);
      LittleFS.rmdir(path);
      if (filename.length() < 1) break;
    }
  }
}

bool handleFile(String & path) {
  if (server.hasArg("new")) {
    String folderName {server.arg("new")};
    for (auto& c : {34, 37, 38, 47, 58, 59, 92}) for (auto& e : folderName) if (e == c) e = 95;   // Ersetzen der nicht erlaubten Zeichen
    DEBUG_F("Creating Dir: %s\n", folderName.c_str());
    LittleFS.mkdir("/" + folderName);
  }
  if (server.hasArg("sort")) return handleList();
  if (server.hasArg("delete")) {
    deleteFiles(server.arg("delete"));
    sendResponce();
    return true;
  }
  if (!LittleFS.exists("/fs.html")) server.send(200, "text/html", LittleFS.begin(true) ? HELPER : WARNING);   // ermöglicht das hochladen der fs.html
  if (path.endsWith("/")) path += "index.html";
  if (path == "/spiffs.html") sendResponce();                                              // Umleitung für den Admin Tab 
  File f = LittleFS.open(path, "r");
  String eTag = String(f.getLastWrite(), HEX);                                             // Verwendet den Zeitstempel der Dateiänderung, um den ETag zu erstellen.
  if (server.header("If-None-Match") == eTag) {
    server.send(304);
    return true;
  }
  server.sendHeader("ETag", eTag);
  return LittleFS.exists(path) ? server.streamFile(f, StaticRequestHandler::getContentType(path)) : false;
}
void handleUpload() {                                                                      // Dateien ins Filesystem schreiben
  static File fsUploadFile;
  HTTPUpload& upload = server.upload();
  if (upload.status == UPLOAD_FILE_START) {
    if (upload.filename.length() > 31) {                                                   // Dateinamen kürzen
      upload.filename = upload.filename.substring(upload.filename.length() - 31, upload.filename.length());
    }
    DEBUG_F("handleFileUpload Name: /%s\n", upload.filename.c_str());
    fsUploadFile = LittleFS.open("/" + server.arg(0) + "/" + server.urlDecode(upload.filename), "w");
  } else if (upload.status == UPLOAD_FILE_WRITE) {
    DEBUG_F("handleFileUpload Data: %u\n", upload.currentSize);
    fsUploadFile.write(upload.buf, upload.currentSize);
  } else if (upload.status == UPLOAD_FILE_END) {
    DEBUG_F("handleFileUpload Size: %u\n", upload.totalSize);
    fsUploadFile.close();
  }
}

void formatFS() {                                                                          // Formatiert das Filesystem
  LittleFS.format();
  sendResponce();
}

void sendResponce() {
  server.sendHeader("Location", "fs.html");
  server.send(303, "message/http");
}

const String formatBytes(size_t const & bytes) {                                           // lesbare Anzeige der Speichergrößen
  return bytes < 1024 ? static_cast<String>(bytes) + " Byte" : bytes < 1048576 ? static_cast<String>(bytes / 1024.0) + " KB" : static_cast<String>(bytes / 1048576.0) + " MB";
}

und aus der Funktion: bool handleFile(String & path)

if (!LittleFS.exists("/fs.html")) server.send(200, "text/html", LittleFS.begin(true) ? HELPER : WARNING);   // ermöglicht das hochladen der fs.html
  if (path.endsWith("/")) path += "index.html";
  if (path == "/spiffs.html") sendResponce();                                              // Umleitung für den Admin Tab 
  File f = LittleFS.open(path, "r");
  String eTag = String(f.getLastWrite(), HEX);                                             // Verwendet den Zeitstempel der Dateiänderung, um den ETag zu erstellen.
  if (server.header("If-None-Match") == eTag) {
    server.send(304);
    return true;
  }
  server.sendHeader("ETag", eTag);
  return LittleFS.exists(path) ? server.streamFile(f, StaticRequestHandler::getContentType(path)) : false;
}

Ich möchte doch nur den Code wissen analog wie bei der Lib "ESPAsyncWebServer":

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", "text/html");
  });

MfG
Juergen

7

Danke und Ende

8

Weil du es immer anders aufbaust.
Mach es so wie in der Beschreibung steht und es funktioniert.
Danach kannst du es deinen Wünschen anpassen.

Zudem macht es keinen Sinn hier und in anderen Foren ständig anderen Code zu zeigen.
Da findet keiner mehr durch.

9

OK....