How to modify the AsyncElegantOTA library…..if you really need to

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?’

Ofcourse it is not so hard to do that if you know something about JavaScript and/or HTML, but one who dives into the library files will soon see that a large part of it seems to be encrypted, which no doubt is a hurdle for many, but it can be taken.

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.

If you scroll through the HTML, you will see that it has JavaScript embedded in it the HTML code. This now is the code you can modify. What you exactly want to modify is up to you.

Once you have modified the HTML /Javascript file, there are several ways you could embed it in the library again; You could leave it uncrypted and put it back in your elegantWebpage.h file as a ‘Raw literal’, like so:

const char ELEGANT_HTML[] PROGMEM = R"---(
<html>
<head>
...
)---";



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