thebigpotatoe
commented
4 years ago You make some excellent points, both of which I am aware of myself. The problem is I have played around with many implementations of web pages on the ESP8266, and found that all methods had pro's and con's depending on what was trying to be implemented.
I haven't published how I make changes to the web page, but essentially, I have the website.html file which is packaged in this repo. In there is the exact copy of the website written into C found in the Web_Server.ino file.
What I do is make changes in the HTML file in something like visual studio code with a HTML editing add on. This allows me to make changes and debug it much faster as I can load the HTML file in a browser and make changes very quickly.
After editing I found the best way to get it onto the ESP was a couple of search and replace tricks leveraging REGEX inside the find and replace option in VS code. This at line 19 is in the Web_Server.ino file so I can remember it. Through copy and paste, it takes no time at all to just overwrite the html section of the Arduino code with the new updated webserver.
The reason I wrap each line instead of just copy and pasting the whole document into say flash or a .index file like you have linked, is that it reduces the amount of RAM used at one time. I am no expert on this, so I could be approaching this completely wrong, but when compiled the total amount of global RAM used is much less. Especially for a large website like this one. And from what I have found, the website still loads pretty quickly anyway.
There was the option of uploading it to the SPIFFS, but I wanted to avoid this extra step for beginners as it is just another possible step to fail on. Thus the website is copy pasted directly into code like I mentioned above.
As for the maintainability and user friendliness of adding new items, you are right, it's pretty awful even in a HTML editor. This was just due to the fact I wrote it in a week for the competition on Instructables. So there is definitely potential to improve how it is written and if it can possibly dynamically create itself.
Perhaps a move towards having a really basic HTML template which adds menu items dynamically and allows the main C++ program to send it HTML code written by users for their mode (like in b). This would allow users to write how their mode should look in a tab on the web page. Something along these line perhaps?
LarsMichelsen
The bundled HTML in servePage looks like a maintenance nightmare. While I was working on #16, I saw that you have to touch many different places. I can imagine two ways improving the situation a bit:
a) The HTML page could be moved to a dedicated header file where it could probably be declared as single structure, like it's done here: https://circuits4you.com/2016/12/16/esp8266-web-server-html/. This would not reduce the amount, but at least separate the HTML code a bit and reduce the overhead of all restServer.sendContent_P(PSTR()) calls.
b) Splitting up the HTML into modular parts, where some can be generated automatically. One could, for example, maintain a central data structure in the C code for registering animations, which automatically generates menu items and containers in HTML. For each animation you could also move the individual frontend code into a separate structure to make it clearer.
Looks like a little contradictory approach. What do you think?