• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

Web server with slider

Q&A Forum › Category: ESP32 › Web server with slider
0 Vote Up Vote Down
marcjeanvandenbril asked 4 years 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
1 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 4 years 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

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.