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

electronic4706
Posts: 5
Joined: Mon May 10, 2021 10:59 am

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

Postby electronic4706 » Thu Jun 06, 2024 8:49 am

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...
Kayip-Adam

MicroController
Posts: 1734
Joined: Mon Oct 17, 2022 7:38 pm
Location: Europe, Germany

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

Postby MicroController » 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).

electronic4706
Posts: 5
Joined: Mon May 10, 2021 10:59 am

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

Postby electronic4706 » Sat Jun 08, 2024 8:11 am

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.
Kayip-Adam

limpens
Posts: 13
Joined: Tue Jan 25, 2022 9:14 am

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

Postby limpens » Sun Jun 09, 2024 1:05 pm

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.


Who is online

Users browsing this forum: Dennie and 117 guests