ESP Web File SPIFFS

Hi all don't know if anyone can lend there expertise to the ESP side i have a file named index.html that is read by SPIFFS and streamed to the client however i would like to display data from my code within the web page such as connection status ect.

The data does not need to be kept up to date after refresh and im after a simple solution if possible without the use of AJAX or web sockets i also would like to put data into a table using something like a for loop but every time i attempt to embed c code in my index.html file it prints it as plain text.

Any suggestions i have tried changing the file name to index.h still with no luck and the <% %> tags described on one web page.

Regards, Chris.

If the Webpage is in your SPIFFS, there must be a sketch that reads it from there and makes it available to whoever logs onto your ESP. Within that sketch you also have the data available that you want to include on the page, and there is where you should combine the 2. Without the sketch and the file it is just guesswork for us.

There is a .html file in the data folder on the SPIFFS i read this and stream the file my problem is the contents of the file is just a web page the function i use to stream the web page file is below.

bool stream_File(String fPath, String fType){ //Streams a file from SPIFFS to web page.
  Serial.println("Loading File: " + fPath);
  if (SPIFFS.exists(fPath)){ //Make sure the file exists.
    File fHandle = SPIFFS.open(fPath, "r"); //Open and read the file.
    size_t fSent = HTTPServer.streamFile(fHandle, fType); //Stream the file.
    fHandle.close(); //Close the file.
    return true;
  }
  Serial.println("Error: File not found.");
  return false;
}

Now you know the only thing in the file is HTML how do i go about embedding code if i use <% code here %> it is just displayed as plain text and i don't want to use AJAX or web sockets.

For me the easiest approach is to first stream the file into a String (or a few different ones would actually be better), locate where you want to add variable data (in between 2 Strings is the easiest) , add all parts together, and then send the whole thing. You would probably read the file only once.

Yes i have seen the method of using the HTTPServer.Send(200, String); command with the file stored as a header file and #include then stored in PROGMEM but i have 4 html pages that i display and are navigated from a menu that is a whole lot of String and because i have 4 pages thats why im storing them in SPIFFS.

A little bit of a if needs must solution to store it all in flash with includes but im sure someone somewhere must have a more suitable solution.

I struggled with this same problem for a long time. Finally gave up and used AJAX.

Oh, is it really this kind of problem.

If i don't have any luck on the ESP forum i may just have to move to AJAX although it just seem overkill for what i need.

from my project

but i have 4 html pages that i display and are navigated from a menu that is a whole lot of String and because i have 4 pages thats why im storing them in SPIFFS.

you could store 1 at the time in a String, keep the String local and it be destroyed when the callback function ends. If this is the only String(s) you use fragmentation will not occur. The ESP should have plenty of memory to deal with it.

Juraj:
from my project
Regulator/Regulator/WebServer.ino at master · JAndrassy/Regulator · GitHub
Regulator/Regulator/data/script.js at master · JAndrassy/Regulator · GitHub

The question that I (and I think @Shandy) could never find an answer to is:

Can you use the ESP8266WebServer class’s ‘streamFile()’ method to stream the first part of a web page from a SPIFFS file to the client and stop mid-page. Then, print some small amount of HTML with real-time data to the client from the code. Then use ‘streamFile()’ to stream the remainder of the web page -- either from the same file (seems unlikely) or a second SPIFFS file.

I don’t immediately see an answer to that here.

Can you use the ESP8266WebServer class's 'streamFile()' method to stream the first part of a web page from a SPIFFS file to the client and stop mid-page. Then, print some small amount of HTML with real-time data to the client from the code. Then use 'streamFile()' to stream the remainder of the web page -- either from the same file (seems unlikely) or a second SPIFFS file.

No ! there is the answer you want (or not want) the sending needs to be done in 1 go ! so you will need to stream into a buffer first.. then add the parts you want, or have a look in the espwebserver file that contains the function (this is not Java) and see if you can modify it to suit your needs.

Deva_Rishi:
...or have a look in the espwebserver file that contains the function and see if you can modify it to suit your needs.

Yes, I have had a go at that, it's a slog. It seems the developers of that code are either pretty advanced C++ programmers or like to write obfuscated code -- perhaps both. I get further through it every time I have a look and understand it fairly well at a high level. It will take a few more passes before I understand the details well enough to clone it into a new code with the necessary modifications. I'm sure I could do it eventually. But, at this point I lack the motivation as I'm not currently working on a project that requires it. I'd also have to study up some on HTML coding since I've only every learned / used enough to get done what I wanted at the time. So, in the end, AJAX turned out to be the path of least resistance.

gfvalvo:
The question that I (and I think @Shandy) could never find an answer to is:

Can you use the ESP8266WebServer class’s ‘streamFile()’ method to stream the first part of a web page from a SPIFFS file to the client and stop mid-page. Then, print some small amount of HTML with real-time data to the client from the code. Then use ‘streamFile()’ to stream the remainder of the web page -- either from the same file (seems unlikely) or a second SPIFFS file.

I don’t immediately see an answer to that here.

sorry I forgot to add a comment "AJAX is not an overkill" ("xslt would be")