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” (under the heading ‘Dataformat’), 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)
However, before you add the second operation (the ‘Unzip’), we will first do a check: Look in the ‘Output’ header. You will find 3 parameters
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/when that number popped up (i.e. ‘after the ‘From decimal conversion of the encoded section’) because we need that mental note later to calculate a new value Output’
The second decoding we need to add is an unzip. So under operations we now choose “Gunzip” (find it under the ‘Compression’ heading), 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 in total (the HTML and the JS) 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 of where you could find the length of the file?
Well we have to find that length for our modified and recrypted file
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
Arduino, ESP8266, ESP32 & Raspberry Pi stuff 
Thanks, exactly what I needed
Glad you found it useful
Awesome! Thank you.
My pleasure. Glad you found it helpfull
How can I change logo , ı didnt find it js code
If you mean the ‘buy me a coffee logo’ that is part of the buy me a coffee link
Normally one would only change a logo with one of your own if you want to pass it off as your own program. I can’t judge on the legality of that.
How can I change logo , ı didnt find it js code
See reply to yr first question
You did not fully decode the webpage
Thank you so so so much. This article help me a lot. Thanks once again.
My pleasure