CODEWITHSUNDEEP
webserveresp32spiffs
fundakk
fundakk

Reputation: 79

Add multiple SPIFFS files to captive portal on Async web server on ESP32

I'm using simple code of modified Captive portal with asynchronous web portal (from ESPAsyncWebServer library - https://github.com/me-no-dev/ESPAsyncWebServer). It send html page from SPIFFS flash memory.

The way it is working now, is that it send index.html on any connection. I've just modified single line that in mentioned example was sending hmtl code. What I'd like to archive, is to be able to send more files, like html file and image.

So here is my code:

#include <DNSServer.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include "ESPAsyncWebServer.h"
#include <SPIFFS.h>

DNSServer dnsServer;
AsyncWebServer server(80);

class CaptiveRequestHandler : public AsyncWebHandler {
  public:
    CaptiveRequestHandler() {}
    virtual ~CaptiveRequestHandler() {}

    bool canHandle(AsyncWebServerRequest *request) {
      //request->addInterestingHeader("ANY");
      return true;
    }

    void handleRequest(AsyncWebServerRequest *request) {
      request->send(SPIFFS, "/index.html", String(), false);
    }
};

void setup() {

  Serial.begin(115200);

  if (!SPIFFS.begin()) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  WiFi.softAP("esp-captive");
  dnsServer.start(53, "*", WiFi.softAPIP());

  server.addHandler(new CaptiveRequestHandler()).setFilter(ON_AP_FILTER);//only when requested from AP

  server.on("/image1", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/image1.jpg", "image/jpg"); // this part has been modified
  });

  server.begin();
}

void loop() {
  dnsServer.processNextRequest();
}

I've tried to add

  server.on("/image1", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/image1.jpg", "image/jpg"); // this part has been modified
  });

in setup section as explained here - https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

But it's not working. I've tried messing with path changing "/" in places whare it appears, but with no luck. Further, if I change

void handleRequest(AsyncWebServerRequest *request) {
  request->send(SPIFFS, "/index.html", String(), false);
}

to

void handleRequest(AsyncWebServerRequest *request) {
  request->send(SPIFFS, "/image1.jpg", "image/jpg");
}

when logging to AP I get image not website, so I think paths are good.

To add more information this is my webpage code:

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-image: url('image1'); background-size: contain; background-color: black; background-repeat: no-repeat; background-position: 50% 0%; height=100%">
<h1 style="color:white">ESP32</h1>
</body>
</html>

and it is working fine on non-captive_portal solution (as explaind in previously mentioned tutorial).

So my question is how can I get to load not only single file on captive portal in asynchronous webserver, but more complicated (still very simple) webpage?

Upvotes: 0

Views: 3924

Answers (1)

Dr.Random
Dr.Random

Reputation: 500

I struggeled with it for a while. But here is the answer. On the CaptiveRequestHandler() {} you can place your http calls.

Here is an example for you:

class CaptiveRequestHandler : public AsyncWebHandler {
  public:
    CaptiveRequestHandler() {
      /* THIS IS WHERE YOU CAN PLACE THE CALLS */
       server.onNotFound([](AsyncWebServerRequest *request){
        AsyncWebServerResponse* response = request->beginResponse(SPIFFS, "/NotFound.html", "text/html");
        request->send(response);
       });

      server.on("/Bootstrap.min.css", HTTP_GET, [](AsyncWebServerRequest *request) {
        AsyncWebServerResponse* response = request->beginResponse(SPIFFS, "/Bootstrap.min.css", "text/css");
         request->send(response);
      });
    }
    virtual ~CaptiveRequestHandler() {}

    bool canHandle(AsyncWebServerRequest *request) {
      //request->addInterestingHeader("ANY");
      return true;
    }

    void handleRequest(AsyncWebServerRequest *request) {
      request->send(SPIFFS, "/index.html", String(), false);
    }
};

Upvotes: 1

Related Questions