How to create user interface for server hosted on esp32

Question

I have a esp32 in my home which i have programmed for controlling some christmas lights. I have set up a http server on it connected to my home wifi, and can control it by sending http requests to 10.0.0.22 using either the web browser or postman.

I would prefer to be able to make post requests and control the request body from the ui.

I do not have any other server in my home, and do not want to expose the esp32 to anything outside my home wifi.
What is a good way to build a ui for the lights where i do not hit these issues?

When i try make a UI using e.g. javascript i get hit by a a bunch of security walls (understandably). I tried using flutter, and it works in dev, but when i installed the apk to an android phone it stopped working. In flutter i used the http library.

This is an extremely broad question. You're basically looking for a tutorial, and StackOverflow is intended for focussed questions. Have you considered just running [WLED](https://github.com/Aircoookie/WLED)? — romkey, Dec 01 '22 at 18:24

score 0 · Accepted Answer · answered Dec 01 '22 at 20:46

You could make an android app, is fairly simple, then you could make a json string and send it as a POST html message from android app, to the local IP of the ESP32. I made a code similar a time ago and looks something like this:

       ui.button.setOnClickListener {
        ui.visorTexto.setText("")
        //val url = "http://192.168.100.235"
        val url = ui.urlTexto.text.toString()
        val jsonBody = JSONObject()
        //val valorPin = ui.pinTexto.text.toString().toIntOrNull()
        //val valorEstado = ui.estadoTexto.text.toString().toIntOrNull()
        val valorPin = 1
        val valorEstado = 1000

        if (valorPin != null) {
            if(valorPin in 0..13){
                if (valorEstado != null) {
                    if(valorEstado >= 0 && valorEstado <= 2000){
                        jsonBody.put("opcion", valorPin.toString())
                        jsonBody.put("tiempo", valorEstado.toString())

                        val jsonObjectRequest = JsonObjectRequest(Request.Method.POST, url, jsonBody,
                            { response -> ui.visorTexto.setText(response.toString())}
                        ) { error -> ui.visorTexto.setText(error.printStackTrace().toString()) }


                        jsonObjectRequest.retryPolicy = DefaultRetryPolicy(
                            10000,
                            DefaultRetryPolicy.DEFAULT_MAX_RETRIES,
                            DefaultRetryPolicy.DEFAULT_BACKOFF_MULT
                        )


                        val cache = DiskBasedCache(cacheDir, 1024 * 1024) // 1MB cap
                        val network = BasicNetwork(HurlStack())
                        var requestQueue = RequestQueue(cache, network).apply {
                            start()

                        }
                        requestQueue.add(jsonObjectRequest)

                    } else{
                        ui.visorTexto.setText("Error el estado es incorrecto: ${valorEstado}")
                    }
                }
                else{
                    ui.visorTexto.setText("Error2")

                }
            } else{
                ui.visorTexto.setText("Error el rango de pin es incorrecto")

            }
        }
        else{
            ui.visorTexto.setText("Error1 ${valorPin}")
        }






    }

The user interface on android studio just have a button, and the options to make a led on or off, any of the digital pins of the ESP32. I used kotling and Android Studio Dolphin.

I had tried this earlier, but didnt get it to work. Your comment inspired me and so now i got it to work, thanks. Also used these two https://stackoverflow.com/questions/60090417/cleartext-http-traffic-to-my-localhost-is-not-permitted https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted — Gwinter, Dec 05 '22 at 16:18

How to create user interface for server hosted on esp32

1 Answers1