passing a variable from a html/js slider to arduino globals... Struggling...

Hello everybody,

Here is a code I’m working on and if I successfully got my javascript buttons to send commands to the arduino using the server.on() function, I just can’t get to pass variables through to the sketch. Here is what I’ve been trying so far, without success:

const char MAIN_page[] PROGMEM = R"=====(
<html>
  <head>
        

  </head>
  <body>

    <p>
          <div class="slidecontainer">
            SPEED: <span id="speed"></span>  &nbsp  &nbsp
            <input type="range" min="140" max="200" value="170" class="slider" id="speedRange" onchange="sendPosition(this.id, this.value)">
          </div>
          <div class="slidecontainer">
            DISTANCE: <span id="distance"></span>  &nbsp
            <input type="range" min="1" max="200" value="15" class="slider" id="distanceRange">
          </div>

 

</body>
<script>

  var slider = document.getElementById("speedRange");
  var output = document.getElementById("speed");
  output.innerHTML = slider.value;

  slider.oninput = function() {
    
    var url = "/" + "speedRange"; // I can't even get to use the slider2 var defined right above... 
    xhr.open("GET", url, true);
    xhr.send();  
    output.innerHTML = this.value;  
  }

  var slider2 = document.getElementById("distanceRange");
  var output2 = document.getElementById("distance");
  output2.innerHTML = slider2.value;
  
  slider2.oninput = function() {
       
    var url = "/" + "distanceRange"; // can't even get to use the slider2 var defined right above... 
    xhr.open("GET", url, true);
    xhr.send();
    output2.innerHTML = this.value; 
  }

 
 
</script>
</html>
)=====";

on the sketch side, of course, I get the the following line to trigger a local c function:

server.on("/speedRange", a_local_c_function)

Now, what I need, is to pass the variable value of the slider.

(I’m asking this question after working using topic : https://forum.arduino.cc/index.php?topic=484418 which is so old that I don’t think anybody will see my question there. Sorry for the redundancy!

Ok, so… in fact, after 2 days of work but only 1 hour after I posted this previous message, I finally figured it out. Instead of deleting my message I’ll leave it for whoever might face the same problem. So, here how it works now:

on the javascript part:

<script>

  var slider = document.getElementById("speedRange");
  var output = document.getElementById("speed");
  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value; 
    sendSlider(this.id, this.value);
  }

  function sendSlider(slider, value){
    var xhr = new XMLHttpRequest();
    var url = "/" + slider + "=" + value;
    xhr.open("GET", url, true);
    xhr.send();  
  }

on the arduino sketch part, in setup:

 int i = 0;
  int s = 200; // max speed value

  for (1 == 1; i < s; i++) {
    Serial.println(i);
    String iString = String(i);
    String str1 = "/speedRange";
    String str2 = str1 + "=" + iString;
    server.on(str2, getFwd);
  }

I hope this will help someone some day! :slight_smile: