Creating a Web Interface for ESP32 [closed]

Question

I am working on a project that involves moving various servos and lights and I need a good UI to work with the device. I've previously used Blynk, which worked very well but I didn't like some of the limits it has. My current code works with Blynk and I'd like to change it to a web server so it can work on any device without an app or internet connection.

Right now my esp configures itself as an access point and I can navigate to its IP address to get to my "hello world file" but after that I'm stuck. What really stumps me is getting the input from the interface that I make in HTML, I could fairly easily make an arrangement of buttons, sliders, and fields, that fits my need but how do I get the value of these as a variable in my arduino code?

I've seen some examples of code that are very simple essentially a couple buttons redirect to different web pages on the server and it takes these commands to assign a variable, but that seems kind of poor form, is there a better way, or how do I make that work with a complex interface with many buttons and switches.

I've heard of Jquery and Ajax but not familiar on how to make this work with Arduino code.

Answer 1

I would highly recommend splitting it into two parts: back end (C++) and front end (JS). You'll probably want to connect to a router, so your clients, like a phone and laptop need not be on that AP hotspot w/o internet.

You first build an API with arduino using GET params to control, example pin values int level = server.arg("level").toInt(); analogWrite(2, level);, or whatever you need to do. Put that in a function called handlePin, and subscribe it in setup(): server.on("/pin", handlePin);. Then just add CORS to the server response: server.sendHeader("Access-Control-Allow-Origin","*"); and you can now hit it from any computer on the network. To test, just enter it's URL and some params into a browser URL bar; http://192.168.2.123/pin?level=512 to dim halfway.

Once you have the URLs working, the interface part is built completely separately using whatever tools you want. All you need to do is have your UI hit the API using simple ajax calls. As a quick and dirty example: Level:<input type=range id=val max=1024> <br> <button onclick="fetch('http://192.168.2.123/pin?level='+val.value)">update</button>

That's hows the pros do it, you just swap C++ for PHP or C# or whatever, and use any UI framework you want. Once you have the source of your client app ready, you can upload it to the SPIFFS of the ESP, but I find it easier to host and update system-wide on a "real" server.

If you don't want to write the UI code yourself, you can use node-red to make a quick and dirty "control panel", just like HTML but with drag and drop functionality (more or less). You still use the same API on the ESP, and you can use more than one system at a time; all the ESPs care about is hitting the right URL.

Answer 2

I could fairly easily make an arrangement of buttons, sliders, and fields, that fits my need but how do I get the value of these as a variable in my arduino code?

The same way a web server does! What you need to do is implement a web server on the ESP32. You will serve a page with the controls, and then that page must make a request back to the server which will then processes it and do whatever you program it to do.

There are two ways to do this:

• Use a get/post form; send all the data at once
• Something like ajax; each control sends data asynchronously