ESP8266 web page programming

I am quite new to programming the ESP8266. before anypone points it out, I do plan to port my code to the newer ESP32 when I get one to develop with, but for now the ESP8266 is the only development hardware I have to work with.

On the ESP8266 I now have WiFi configured and a basic html page being returned on request from a browser. The basic function to return a html page was pulled from a tutorial example and uses snprintf to generate the HTML and place it into a character buffer. The HTML can include variables inserted into the HTML stream. The buffer is then sent using a server.send() command. All this works nicely and I can incorporate data e.g. such as firmware version or IP address of the AP into the web page. I also have a second function that returns a CSS styling page in response to a CSS link embedded into the HTML document. At this point, I have no plans to include an Javascript but to control all functions from the sketch. Not sure how this will work out yet, but I'm trying to keep it simple, but make it look professional.

I have designed a configuration page on my PC which I would now like to get programmed onto the ESP8266, but I have run into an interesting problem. A typical config web page body might broadly consist of:

  • a header section and a div containing some kind of navigation which is consistently shown on each page
  • a body div which will display different configuration options depending on the navigation option chosen
  • a footer section which may contain the authors name, version number, date etc. which again is displayed consistently on every page

Currently I have plans to provide 4 separate configuration pages by function group:

  • Page 1: general options such as AP or station mode and enabling/disabling options
  • Page 2: WiFi configuration including IP address, gateway and mask, as well as wifi security
  • Page 3: configuration parameters for the hardware interface that I am building
  • Page 4: admin functions such as resetting the password, re-instating default settings and reboot

Given the small amount of memory on a microcontroller, I would like to define the header and footer sections only once and build a page that automatically adds them to the top and bottom of the selected configuration options section. The problem I have encountered is, that one can only use one server.send() in response to a request, and only one snprintf statement to compose the page. So how do I pull the 3 sections of the page together into one response without otherwise duplicating the header and footer section in each of the 4 functions that will return a configuration page?

what type of ESP8266 ? a WeMos D1 Mini would have 4Megs of storage, which you could use with SPIFFS to store your web site and leverage AJAX to provide dynamic updates to your page for example

J-M-L:
what type of ESP8266 ?...

Yes, I guess there are various boards that use the ESP8266 module. The one I have is a LoLin NodeMCU v3. From the output in the Arduino IDE I see that it does have 4Mb of flash memory. Currently my sketch seems to have used a little under 300kb. I presume that the majority of this is down to the included ESP8266wifi and ESP8266webserver software modules.

J-M-L:
... a WeMos D1 Mini would have 4Megs of storage, which you could use with SPIFFS to store your web site and leverage AJAX to provide dynamic updates to your page for example

I am not familiar with SPIFFS although I have heard of our web developers at work mentioning AJAX. I will look into both of those possibilities. Thanks.

May be with google translate you can have a look at my tutorial in french

I see that AJAX does require the use of JavaScript which I was hoping to avoid. Ah well! Perhaps JavaScript is unavoidable after all.

J-M-L, thanks for the tutorial. This was nice and easy to follow.

Taking an Ajax approach helps you minimize what you send from the Arduino to the web page, and you can keep most of the web design as static files in SPIFFS. This way all will be more responsive

BitSeeker:
Yes, I guess there are various boards that use the ESP8266 module. The one I have is a LoLin NodeMCU v3. From the output in the Arduino IDE I see that it does have 4Mb of flash memory.

4Mb is 4 mega bit == 512 kB == 0.5 MB.
but NodeMcu v3 should have 4 MB

the tutorial looks good, but doesn't use the ESP8266WebServer library

As full example, my main Arduino project is published on GitHub and uses static pages and AJAX. It too doesn't use the ESP8266WebServer because it is ported on different MCU and can use SD card or SPIFFS.
WebServer of the project
static web files