ESP32 web server error¿?

Projects Programming
1

Hello, first of all, apologize if it is not the appropriate area for this query!

I'm telling you, I'm trying to make a website to configure some things (the website is created with its html and css) it works well and it doesn't have any visualization problem in vscode.

It is the first time that I get into the ESP32 + web.... I have used the example of this website ESP32 Web Server using SPIFFS (SPI Flash File System) | Random Nerd Tutorials the only thing is that I have changed the SPIFFS by LITTLEFS.

Now comes the problem... the web does not load correctly, the images do not load, the index and css I can access by putting 192.168.0.26/styles but I don't know what happens with the images....

I tried another example of the webserver library and it loaded everything fine. What am I doing wrong?

The code that I use is the one in the example but I have removed the LED part...

#include "WiFi.h"
#include "ESPAsyncWebServer.h"
//#include "SPIFFS.h"
#include <LITTLEFS.h>
// Replace with your network credentials
const char* ssid = "vodafoneCA8B";
const char* password = "D5C3ZGQKYRLF98";

// Set LED GPIO
const int ledPin = 2;
// Stores LED state
String ledState;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Replaces placeholder with LED state value
String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
  return String();
}
 
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);

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

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LITTLEFS, "/index.html", String(), false, processor);
    Serial.println("CARGA INDEX");
  });
  
  // Route to load style.css file
  server.on("/estilos.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LITTLEFS, "/estilos.css", "text/css");
    Serial.println("CARGA CSS");
  });
   
/*
  // Route to set GPIO to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);    
    request->send(LITTLEFS, "/index.html", String(), false, processor);
  });
  
  // Route to set GPIO to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);    
    request->send(LITTLEFS, "/index.html", String(), false, processor);
  });
*/
  // Start server
  server.begin();
  LITTLEFS.begin();
}
 
void loop(){
  
}

As I say, it's the first time I've used it... Thank you, greetings!

2

I have moved your topic to the Programming category of the forum

3

where is your handler code for the images? are the images also in your LittleFS partition?

4

Hi Thanks UKHeliBob and sorry for not putting it in the correct area!

Hello J-M-L thanks, the images are also in the partition, in the main directory without folders such as html and css, with another example of the webserver library I think I remember... just load the index and everything came out.

Thx

5

that's likely because they had a handler looking for the files

here you have only two handlers, one for the html server.on("/", ... and one for the css server.on("/estilos.css",.. ➜ any other request will just be ignored so you don't get the pictures

➜ you need to add a handler returning the right images

6

Ok, I mean I have to add a call for each file that I put... I'll look at it in a while. Is there a way to load all the files with some instruction? Thx

7

you could indeed do something like this which means one call back per image

  server.on("/images/sun", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LITTLEFS, "/images/sun.png", "image/png");
  });
  server.on("/images/cloud", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LITTLEFS, "/images/cloud.png", "image/png");
  });
  server.on("/images/rain", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LITTLEFS, "/images/rain.png", "image/png");
  });

but that's heavy...

check out Serving files in directory - that's probably what you want

8

Thanks, J-M-L, before seeing your last message I copied and pasted the call several times, then I saw the message and with one line it is solved!

server.serveStatic("/imagenes", LITTLEFS, "/imagenes/");

Thank you very much for your help! Now I have a problem and it is that something in the CSS does not load well... in vscode it continues to work out well, as it is a "decoration" if I see that I cannot solve it I remove it and that's it....

9

Ok have fun

10

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.