WebApp Development for a Esp32 Arduino Sketch

AJAX or websockets will allow nicer development. I’m trying BootStrap to get a tidy interface. Bootply.com and layitout.com enable you to easily create a css/html set of file to display nice buttons and the like. Pingendo (a desktop app) was better for detailed design of the interface. This gives a bare interface, that does nothing (yet!) – just CSS, Javascript for the interface and HTML. No form submission or information retrieval from the server.

Next, how to use JS or jQuery or something to communicate with the webserver? Websockets are good for statuses, and Restful APIs are good for less interactive things.

Setup Dev Env

I used WebStorm editting the html/css/js and provides a webserver to test it locally (on a pc).

A better webserver, which can emulate the ESP32, would be nice to speed development (i.e. no upload to ESP32). Node.JS, which works in WebStorm, runs a server that can easily serve RestApis and WebSockets. I installed WebStorm, Node.JS and ws (for Node.JS websockets) on Ubuntu.

Client (Browser) to Server (Esp32) Communication

This take a bit to wade through the options. I favored simplicity over enterprise grade, as there’s few clients attached to the Esp32.

We want to be able to configure the Esp32 from the browser (e.g. set the photo interval), and quickly see stats from the Esp32 (e.g. free heap, last image).

• Kept the HTML/CSS (from Bootstrap 4 maker) seperate. Use “addEventListener” to attach actions to buttons.

• Used WebSockets for most communications between client and server. Used a very simple event system to ease this process:

        ws = new FancyWebSocket("ws://localhost:8080/status");
        ws.onopen = function () {
            ws.send("message", {"text": "Client connected"});
            console.log("Socket open");
        };     

• Each form’s button has an JS event. This uses formToObject to automatically read the form and convert it to JSON. This is send over the WebSocket:

function sendFormWS(evt) {
    let o = formToObject(evt.target.form.id);
    ws.send(evt.target.form.id,o);
    evt.preventDefault();
}

• Used populate.js to take a websocket JSON event and fill out the form:

  ws.bind('settings', function (msg) {
            populate(document.getElementById('settings'), msg);
        });

• And finally some home code to dynamically create a list of properties from the ESP32. [ Clearly a beginner at JS! Probably 5 lines would suffice.]

ws.bind('status', function (msg) {
            for (let p in msg) {
                if (msg.hasOwnProperty(p)) {
                    let t = document.getElementById("statustable");
                    let f = document.getElementById(p);
                    if (!f && t) {
                        let row = t.insertRow();
                        row.id = p
                        let n = row.insertCell();
                        let text = document.createTextNode(p);
                        n.appendChild(text);
                        let v = row.insertCell();
                        text = document.createTextNode(msg[p]);
                        v.appendChild(text);
                    }
                }
            }
        });

• To read a log file, I just used a HTTP GET.

So this gives us a nice system to:

• Test the WebApp with a Node.JS server before upload. Then just have to make the Esp32 server similiar content.
• Flexible way to populate and “post” (via websockets) forms. No error nice checking and the like, through – could add.
• For the server to push updates to the client quickly.
• For the client to control the ESP32
• Other clients can connect via a websocket + JSON. For example, use “Simple WebSocket Client” in Firefox to connect.

Create WebServer on ESP32 with WebSockets and JSON

We’ll now replace the Node.JS server, which served dummy data, with a real ESP32 server.

ArdunioJSON and ASyncWebServer can hopefully do this.