I have a device I would like to configure through a web interface to allow users to easilly change settings.
Instead of an LCD on the device and buttons to slowly scroll through and change operating parameters I would like to have fillable fields that the user can use a phone or pc to change with a nice interface. I think a web server hosted on the device would be well suited for this because everything would be contained on the device with no internet required or apps for the phone to deal with.
My device is based on the ESP32 and currently, I am storing an HTML page on the SPIFFS. The device is running in soft AP mode, so I connect to the network on my phone or pc, and go to the IP address in the browser. The user is presented with fields and labels, and finally, a save button that sends the whole form back to the esp32 to be processed, settings are saved to memory, etc. All that is currently working, I just want to make it nice for the user.
The problem is it just seems kinda clunky. I know very little about HTML (and what I have learned, I honestly don't like the language much!) So my configuration page is basic and ugly. On cell phones, the input constraints don't seem to do anything until the user clicks the save button, and then it gives a warning if the input is out of range, but doesnt immediatly warn or clamp the input. It works, but it doesn't look or feel good to use...
I have written programs and apps for windows and android in the past and making a GUI is fairly straight forward and in its simplest form can be drag and drop, screen size ndependent, and depending on your skill level more than just plain text and number fields to change. Ideally, and space permitting some images and the ability to have the inputs placed over parts of the image would be a great way to make the value being changes intuitive to the user. (Think of changing the parameters of a square wave where the input for period and duty cycle would be placed over the image left to right, and the amplitude would be placed at the top of the peak) that would be cool but not absolutely necessary
If such a thing is even possible to host on the esp32 and send over a network? What should I be looking into? Would it be advanced HTML/CSS, or maybe a java applet if it is even possible to host one on the esp32? My only concern is investing a bunch of time into learning HTML or whatever it may be, only to discover it is not a good fit for the application. So if anyone could point me in the right direction that would be great!