An easy way to edit or add HTML in the source of the ESP-WHO camera web server example
Using the CyberChef online tool makes it easy to convert from your own HTML to the Gzipped Hex format found in the the index_html_gz variable in the code for Arduino and IDF ESP-WHO libraries.
Where does the HTML come from in the CameraWebServer example?
The third tab from the Sketch contains some strange looking code assigned to a variable called index_html_gz:
In the app_httpd.cpp tab this variable is used in this code:
The index_handler function above serves HTML to the browser.
In the video below you can see this strange looking code in the index_html_gz variable magically turning into HTML:
Replacing the HTML
So now we have seen where the HTML comes from. How do we reverse the process so we can edit the HTML or replace it with our own?
Quick version – Click here to open the CyberChef online tool, edit or paste your HTML in the Input field. The code you need to paste into the Arduino IDE will appear in the Output area. Copy all of it except the first comma.
If you want prefer to manually set it up, go to the https://gchq.github.io/CyberChef/ website on GitHub, drag the following actions from the left menu.
- From Compression, drag ‘Gzip’
- From Data Format, drag ‘To Hex’
- From Utils, drag ‘Split’
Copy the settings as below:
Now you can make your own page by editing or pasting your own HTML code into the Input window and copying the result (minus the first comma) over the existing code in the Arduino IDE.
When the code has uploaded, refresh the browser and you will see the new page. Once set up, it’s very quick to make an edit to the HTML, copy and paste the new Hex into the IDE, upload and preview.
ESP32-CAM Video Playlist
IF you prefer your tutorials in video format you can visit the Robot Zero One YouTube channel and view the ESP32-CAM playlist here: https://www.youtube.com/channel/UCpqVEutU_Jcq34ws4tyUReQ/playlists
Another way of doing this – https://gist.github.com/me-no-dev/f137a950ce6dedb641d427d8db6355d2 if you want to automate it.
If you liked this tutorial and want me to create more then please say thanks by buying me a coffee here...