Posting a value to html from esp-idf code

[orbitcoms]

Hi Mair,
Which video in your course is the one that shows how to post a value from esp-idf code to the generate web page?

I have an app that generates a web page with input box and button. Users can enter a value and click button and my "C" code handler and script gets the value ok. But I want to be able to display the last value saved when url is first hit and after a new value is entered.

At the moment my html code and script looks like below

<form action="/setrange" id="rangeset" method="POST" name="rangeset"> <label for="range">Sensor Range</label> <input id="range" type="number" name="range" min="0" max="255"/> <br> <input type="submit" value="Save Range"> </form>

const range_value = document.getElementById("range");

async function getRangeValue() {
const result = await fetch("/range");
const new_range = await result.json();
range_value.value = new_range.range;
console.log(new_range);
}
getRangeValue();

[Mair]

Hi @orbitcoms
The videos to understand how to do this are covered in Internet Server section. Your code above uses the default HTTP GET which can get values from the server (ESP32) but in order to send values to the chip you will need to use an HTTP POST.
Have a look at this video. https://www.youtube.com/watch?v=44Kqyphvlxk it goes into the details of HTTP protocol with plenty of examples. Its a good idea to understand it. It will make this sort of work very easy
Hope that Helps

[orbitcoms]

I followed the video and could not see anywhere how to update a label on the ESP32 html generated web page on first hit of url.

For update I can add a script or alter my html code to update value of label each time number box changes but still cannot figure out how to set the label value on first.

I found script that changes label but not sure how to set with my "C" code value (called "range") upon first ht of url.

Also, not sure of how to implement and "on_change" function for the number box to do a similar thing

function changeLabeltext()
{
document.getElementById("Label1").value = "new text value";
}

[Mair]

Oh, I think I understand what you mean.
you can do it by updating the html element https://www.w3schools.com/js/js_htmldom_html.asp

[orbitcoms]

Thanks Mair

That link shows how to manually write text to a label.

I need to know how to change the label text when the number input value changes
Also, how to set the initial label value based on the variable value in code when url first hit.

So, a user browses the site and sees the last saved value. They enter a new value in the number box and the label now shows the new value.
Next time they browse the url, the last saved number (obtained from variable value that was saved in NVS last time
) is now shown.

I think I have done something similar in the "slider" app we worked on a while ago, I'll also take a look at that and see if I can learn what I need.

[orbitcoms]

Mair,

I am working through your videos explaining end-points and server pages.

In your example you set up a on_get that triggered when browsing to /api/temperature which sent back temperature.
Then you added a js script to show temperature every 1 second.
In the example you used await for api/temperature to be hit.

The variable I want to update on the site "range" is on "/" url.

Do I simply change url to "/" instead of "api/temperature"
And then in the server code do I add the code below in the on_root_hit routine? (for now I will try fixed value "15" and later have my variable value instead.

char *message= "{"range":15}";
httpd_resp_send(req,message,strlen(message));

Thanks

[orbitcoms]

I think I am close to a solution but something is not quote right. Maybe the route? My web text "range-val" never gest updated

Can you please clarify a few things. I can process the POST ok and save new values entered in NVS on ESP32 but cannot update the saved values on client but GET is not working.

My form action is "/setrange" for sending data from web form to ESP
Then I have text that is supposed to show lasted value like this

Current Range is 0

In the script file I wait for /setrange and json result from ESP code and set the "range-val" like this
async function getRangeValue() {
const result = await fetch("/setrange");
const new_range = await result.json();
const el = document.getElementById("range-val");
el.innerText = new_range.range
console.log(new_range);
}

setInterval(getRangeValue,1000);

In the "server.c" file I set up route handling for GET like this
httpd_uri_t get_range_config = {
.uri = "/setrange",
.method = HTTP_GET,
.handler = get_range_handler};
httpd_register_uri_handler(server, &get_range_config);

And the actual code that generates the json result is here

static esp_err_t get_range_handler(httpd_req_t *req)
{
char response[100];
xTimerReset(sleep_timer_handler,0);
ESP_LOGI(TAG,"Restart Timer");
ESP_LOGI(TAG,"Sending %s",response);
sprintf(response,"{"range":%d}",myrange);
httpd_resp_set_hdr(req, "Content-Type", "application/json");
return httpd_resp_send(req, response, strlen(response));
}

[Mair]

@orbitcoms
Its a little difficult to get the context of what's happening here.
You may need to consult with me.
in your js are you calling getRangeValue()?

[orbitcoms]

These snippets are based on your web server videos (archived).
I am looking for clarification for How the GET function is working. Your video has 3 main components that make this happen (HTML, SCRIPT, ESP_IDF code - in server.c)

[Mair]

char *message ="{"range":18}"; 

should be

char *message ="{\"range\":18}"; 

Other then that I cant see a fault with what you have.

[orbitcoms]

I managed to use chrome browser and inspector on home PC with wifi.
The issue is that it has a problem setting the value. Below is inspector view.

This is the value my GET handler is sending
sprintf(response,"{"range":%d}",myrange); // results in {"range":0}

And this is the label I am trying to modify on web page
Existing Range

Is this just a syntax error in the way I am trying to set new label value?

THIS is reported error from Chrome:

scripts.js:6 Uncaught (in promise) TypeError: Cannot set properties of null (setting 'value')
at getRangeValue (scripts.js:6:23)

[orbitcoms]

Mair,
I set up debug in the script file and see that the value returned from ESP Get result is correct but there is a problem setting the html element value. (see attachment, the value displays in console ok but cannot be used to set html element on page)

Chrome CONSOLE output...

The element I am trying to set is "RANGE-VAL" in HTML

<h3>Current Range is <span id=""range-val">0</span></h3>

The script is thisbelow...

async function getRange(){
const result = await fetch("/getrange");
const range = await result.json();
console.log("Range is set to " + range.range);
const el = document.getElementById("range-val");
el.innerText = range.range;
}

getRange();

[orbitcoms]

Ahhh, got it, there is typo in span with additional "

[orbitcoms]

BTW:
One thing I kept getting confused about was the GET route.
I kept thinking that this was to process url that user entered but with the java script I realize the script is like a trigger that is stimulating an end-point route internally. Then the handler sends back a result that fetch is waiting for.