CUSTOMIZING THE BUILD-IN HTML

[patience4711]

Customizing the build-in html can be a bit of a pain. I spent a lot of time to make some minor changes so i thought i'd share it here, maybe it helps others.

I want a webserver with its own specific purpose that has a menu from which i can go to 'edit' and 'setup'.
To go back to the homepage i need a close button ( "X" ) on the setup and edit pages.

I started with making a test_setup.htm file in my fs. I copied the original html from /built-in-webpages/setup/setup.htm to this testfile.
I also made a file setupstyle.css and copied from /built-in-webpages/setup/style.css into this file.
I made the csslink in my test_setup.htm point to /setupstyle.css
Now i have a test environment to experiment with.
After a lot of experiments i have a bar with the X button directing to the root folder.

Now i went to /build-in-webpages/setup and copied my new html to the file 'setup.htm'. And the same with the edited css file. (remember to set the link to the stylesheet back to the original 'style.css')
Next i opened the commandprompt in Windows and went to
F:\ArduinoIDE\Arduino IDE\sketchbook\libraries\AsyncEspFsWebserver\built-in-webpages\setup\build_setup
Now i runned node minify.js (first had to install the latest node version)
Opened the file (still in build-setup) setup_htm.h and copied the content to
F:\ArduinoIDE\Arduino IDE\sketchbook\libraries\AsyncEspFsWebserver\src\setup_html.h
Then compiled without problems.
After update and reboot... i got my webpage, but it was not working oke.

Turns out that you can't just delete some element. F.i. i tried to remove the IP addres info to get more space. But that caused the javascript to crash because it could't find the element. Insteat you can make an element 'display:none' like i did with the store credentials button. (To compensate for the space of the added bar on top).

So in the end, i didn't touch much of the original html, i only added a div on top of everything and some style and script lines in the head section. And made the store credentials button 'display:none' to get more space and i probably never use it.
I must say that it was a lot of trial and error but i have the desired result.

[patience4711]

Now i would like to do the same thing for the edit page.
I started with test_edit.htm file in my fs and edited this to my needs. After a lot of experiments, i finally have my closing link button.

There is no built-edit directory to minify this html so i did the following:
In F:\ArduinoIDE\Arduino IDE\sketchbook\libraries\AsyncEspFsWebserver\built-in-webpages\setup\build_setup i copied the minify script to minify_edit.js and made the changes so that it would output a minified edit.htm file.
I copied the content of my edit testfile to /built-in-webpages/setup/edit.htm (new file).
In the windows command prompt i went to
/F:\ArduinoIDE\Arduino IDE\sketchbook\libraries\AsyncEspFsWebserver\built-in-webpages\setup\build_setup and runned node minify_edit.js.
Now got a edit_htm.h file and copied this to sketchbook\libraries\AsyncEspFsWebserver\src\edit_html.h

Compiled oke and after updating to the new firmware.... yes!, i see my close link.