The AyncElegantOTA library is an easy way to add WebOTA to your projects with well, uh an ‘Elegant’ interface.
A recent discussion an facebook was about ‘how can I modify the AsyncElegantOTA?’
It might be worthwhile though to ask yourself why you would want to change the AsyncElegantOTA library, why not just use the native ESP8266HTTPUpdateServer library and make any desired modifications in that one (coz let’s admitt it, that one has a boring interface). No need to decode any encrypted files. You will find that library in C:\Users\<name>\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.7.3\libraries\ESP8266HTTPUpdateServer.src. There is a great example of this library being modified to include password protection and to look a bit more jazzy.
But if you really want to tackle the AsyncElegantOTA library here is how to do it:
Go to where you installed the AsyncElegantOTA files and open the elegantWebpage.h file. It looks like this:
The part we are interested in is de PROGMEM content, but we can’t do anything with it as long as it is still encoded. To decode it copy the PROGMEM content in its entity, without the brackets. So in fact just the numbers with the comma’s in between
Then go to the Cyberchef webpage, and paste the PROGMEM content in the input field. We need to do 2 decoding actions on the inputfield.
First: Under operations choose “From Decimal”, double click it so it is moved under “Recipe” and pick ‘Comma’ as the delimiter. (if you follow the link I gave, both operations should already be added)
Before we add the second operation, we will first do a check:
If you check ‘length’ in the ‘OUTPUT heading, you will see that number is equal to the ELEGANT_HTML_SIZE constant that is mentioned in the elegantWebpage.h. if you are using version 2.2.5 of the library, that number most likely is “53715”. Just take a mental note of where that number popped up because we need it later to calculate a new value Output’
The second decoding we need to add is an unzip. So under operations we now choose “Gunzip”, and in the output file an HTML structure should appear.
const char ELEGANT_HTML PROGMEM = R"---(
but then you would need to make a change in the AsyncElegantOTA.h file as well:
The above line would need to be changed to something like:
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", ELEGANT_HTML);
provided that “ELEGANT_HTML” now is the name you gave to the raw literal. This is not the method I followed though, as I found it simpler to just encode the HTML file again. In order to do this, we go back to the Cyberchef website but now paste the HTML file in the input field. Either remove or pause the two previous operations and now add “Gzip” and “To Decimal”, like so:
If you have done right you now should get a new decimal code in your output field. Copy that and paste it over the previous PROGMEM content in your ‘elegantWebpage.h’ file.
You are now almost done. you need to update the size constant in your elegantWebpage.h file.
const uint32_t ELEGANT_HTML_SIZE = 53715;
Well, remember how I asked you to make a mental note earlier?
After you copied your “altered and recrypted to decimal again” file from the output field and pasted it in the elegantWebpage.h file, you now paste it in the input field of the Cyberchef website again. Make sure the only operation you choose is “From Decimal” with ‘Comma’ set as delimiter. Now in the Output field header you will see the new size: use that one to update the ELEGANT_HTML_SIZE constant.
Your modifcations should work now