marcjeanvandenbril asked 9 months ago
Good morning all,
I am a big fan of RandomNerdTutorials (in the "beginner" category ...). To practice, I try to modify the proposed sketches. I tried to modify the sketch "webServer with slider" to add a second slider.
No problem for the web page.
The * .js file works but I can't get the info "pwmSlider4" to pass to the "getCurrentValue" function.
The two sliders control LED 2 (and just that ...)
I attach the HTML, JS and * .ino files to you.
Can you help me ?
Many thanks in advance
https://pastebin.com/TEfY8j6f
Sara Santos Staff answered 9 months ago
Hi.
In your code, there are two LEDs. But you have both LEDs attached to the same channel. This means, that when you change the duty cycle for one LED it will also change for the other. Is this what you want to do?
For the getCurrentValue, you can either modify the Arduino sketch to send a JSON variable with the current value of both sliders. Or you can add another function that requests the current value of the seconds slider.
For example, let’s create a getCurrentValue4() function like this in the JS file:
function getCurrentValue4() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("pwmSlider4").value = this.responseText;
document.getElementById("textSliderValue4").innerHTML = this.responseText;
}
};
xhr.open("GET", "/currentValue4", true);
xhr.send();
}
This function makes a request on the ESP32 /currentValue4 path and handles the responses. It puts the response on the HTML element with the “textSliderValue4” id.
Then, call this function on the onload event like this:
function onload(event) {
initWebSocket();
getCurrentValue();
getCurrentValue4();
}
This will make two requests to the ESP32 when the page loads. One on the /currentValue path and another on the /currentValue4 path.
Now, you need to handle what happens on the ESP32 when it receives that request. So, in your main.cpp file, add the following (which you already have):
server.on("/currentValue4", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(200, "/text/plain", String(sliderValue4).c_str());
});
And it should be it.
I hope this is clear.
Regards,
Sara