ESP32-CAM web server page built with GrapesJS and jQuery offline for AJAX text updates with no reload javascript
In this recording I am showing how you can load a jQuery powered web server page onto an Espressif ESP32-CAM board, so that the page does not have to be reloaded, when any of the buttons are pressed. I have also added a large image to the page, to show that web pages on microcontrollers don't have to look ugly.
I am building the web page using a drag and drop HTML builder caller Grapesjs and it allowed me to build the web ui in quite a short time, while also allowing me to add custom code to the blocks that can be dragged around. I decided to do things this way, because I have seen so many videos on YouTube where people have been using some seriously ugly methods, to get their HTML code onto their microcontrollers. The c programming language has supported literal strings for quite a while, so I do not see why programmers have not been using them so much in their YouTube videos. If you are also using a decent text editor, which the Arduino IDE is not, then you will be able to switch the file types and then have the syntax highlighting for the HTML and JavaScript. Using the string literals allowed me to be able to easily edit the html text even after I had built it. Another advantage with using makefiles is that you can even arrange for the html file to be processed by xxd, if you want to work with a pure html file.