Page 1 of 1

Changing values that were been using in program from Webpage ( please ESP-IDF)

Posted: Thu Jun 06, 2024 8:49 am
by electronic4706
Hello,

I need a help about how can create construction on webpage for changing values that were been using in program.
I don't know which html code for input or read values on webpage. I don't know construction that need for it .

Can you help me please ?

Best regards...

Re: Changing values that were been using in program from Webpage ( please ESP-IDF)

Posted: Thu Jun 06, 2024 1:49 pm
by MicroController
You can use HTML forms to take user input and send it to the server.
You can also send data back from JavaScript via XMLHttpRequests.
Values can be sent via "GET", i.e. appended to the URL, or via "POST" as data inside the HTTP request. On the server side, you then extract the data either from the URL's "query parameters" (GET), or read and parse the request body (POST).

Re: Changing values that were been using in program from Webpage ( please ESP-IDF)

Posted: Sat Jun 08, 2024 8:11 am
by electronic4706
MicroController wrote:
Thu Jun 06, 2024 1:49 pm
You can use HTML forms to take user input and send it to the server.
You can also send data back from JavaScript via XMLHttpRequests.
Values can be sent via "GET", i.e. appended to the URL, or via "POST" as data inside the HTTP request. On the server side, you then extract the data either from the URL's "query parameters" (GET), or read and parse the request body (POST).
Hi MicroController,
Thank you i am looking HTML form .I am reading to understand forms. However, Can you talk about how can take from input to my main program. i think that should use one webpage.html file for use captive portal. I want to use same webpage.html page for inputs ( for example wifi credential or counter values ). i can understand form but how can take date to my main program or show my variable on screen ( for example for radio button variable). what can do essential in my main program for interchanging variable my webpage.html.

Re: Changing values that were been using in program from Webpage ( please ESP-IDF)

Posted: Sun Jun 09, 2024 1:05 pm
by limpens
I usually use websockets (CONFIG_HTTPD_WS_SUPPORT=y), just register an uri handler for the index.html (HTTP_GET handler, is_websocket=false) and an uri handler to capture the websocket calls (is_websocket = true).

The embedded html page has some basic javascript basic to connect to the esp, using stuff like:

Code: Select all

const ws_socket = new WebSocket(`ws://${window.location.host}/ws/`);

...
ws_socket.send(JSON.stringify(o));
and the handler code on the esp site will use calls like httpd_ws_recv_frame to get the content from the browser/javascript code.

updates from the esp end to html/javascript/browser is done by sending over the websocket, using httpd_queue_work.


When you add jquery to the mix, it is not difficult to create a dynamic page with all variables controlled by the code on your esp.

hth.

Re: Changing values that were been using in program from Webpage ( please ESP-IDF)

Posted: Sun Jun 09, 2024 2:02 pm
by mikemoy