reading data from html slider using wifi web server

I am trying to control a servo motor using arduinos web server. I am working on the example which came with wifi101 library. I created a slider using html and print out the value via js. Is there a way to read that value parameter? Here is the code.

/*
  WiFi Web Server LED Blink

 A simple web server that lets you blink an LED via the web.
 This sketch will print the IP address of your WiFi Shield (once connected)
 to the Serial monitor. From there, you can open that address in a web browser
 to turn on and off the LED on pin 9.

 If the IP address of your shield is yourAddress:
 http://yourAddress/H turns the LED on
 http://yourAddress/L turns it off

 This example is written for a network using WPA encryption. For
 WEP or WPA, change the WiFi.begin() call accordingly.

 Circuit:
 * WiFi shield attached
 * LED attached to pin 9

 created 25 Nov 2012
 by Tom Igoe
 */
#include <SPI.h>
#include <WiFi101.h>

char ssid[] = "The Nest";      // your network SSID (name)
char pass[] = "ponnycornscantfly";   // your network password
int keyIndex = 0;                 // your network key Index number (needed only for WEP)

int status = WL_IDLE_STATUS;
WiFiServer server(80);

void setup() {
  Serial.begin(9600);      // initialize serial communication
  pinMode(6, OUTPUT);      // set the LED pin mode

  // check for the presence of the shield:
  if (WiFi.status() == WL_NO_SHIELD) {
    Serial.println("WiFi shield not present");
    while (true);       // don't continue
  }

  // attempt to connect to WiFi network:
  while ( status != WL_CONNECTED) {
    Serial.print("Attempting to connect to Network named: ");
    Serial.println(ssid);                   // print the network name (SSID);

    // Connect to WPA/WPA2 network. Change this line if using open or WEP network:
    status = WiFi.begin(ssid, pass);
    // wait 10 seconds for connection:
    delay(10000);
  }
  server.begin();                           // start the web server on port 80
  printWiFiStatus();                        // you're connected now, so print out the status
}


void loop() {
  WiFiClient client = server.available();   // listen for incoming clients

  if (client) {                             // if you get a client,
    Serial.println("new client");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n') {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();

            // the content of the HTTP response follows the header:
            client.print("Click <a href=\"/H\">here</a> turn the LED on pin 9 on
");
            client.print("Click <a href=\"/L\">here</a> turn the LED on pin 9 off
");
            client.print("<input type=\"range\" min=\"0\" max=\"360\" value=\"0\" step=\"1\" onchange=\"showValue(this.value)\" />
");
            client.print("<span id=\"range\">0</span>
");
            client.print("<script type=\"text/javascript\">function showValue(newValue){document.getElementById(\"range\").innerHTML=newValue;}</script>");
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          }
          else {      // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        }
        else if (c != '\r') {    // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }

        // Check to see if the client request was "GET /H" or "GET /L":
        if (currentLine.endsWith("GET /H")) {
          digitalWrite(6, HIGH);               // GET /H turns the LED on
        }
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(6, LOW);                // GET /L turns the LED off
        }
      }
    }
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }
}

void printWiFiStatus() {
  // print the SSID of the network you're attached to:
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  // print your WiFi shield's IP address:
  IPAddress ip = WiFi.localIP();
  Serial.print("IP Address: ");
  Serial.println(ip);

  // print the received signal strength:
  long rssi = WiFi.RSSI();
  Serial.print("signal strength (RSSI):");
  Serial.print(rssi);
  Serial.println(" dBm");
  // print where to go in a browser:
  Serial.print("To see this page in action, open a browser to http://");
  Serial.println(ip);
}

If you don’t care about latency, and if you don’t have to update it too often, you can use AJAX or XMLHttpRequests. The downside is that you have to open a new TCP connection for every new value.

Here’s an example: https://codepen.io/anon/pen/qjRQBq

<input id="servo" type="range" min=0 max=255 
onchange="sendPosition(this.id, this.value);">
function sendPosition(slider, value) {
  console.log(slider+": "+value);

  var request = new XMLHttpRequest();
  request.open("POST", "https://foo.bar/");
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  request.send(encodeURI(slider)+"="+value);
}

On the Arduino side, you just have to handle the POST request and take the data out of the body.

If you need a faster response time, you could use WebSockets. It keeps the TCP connection open all the time.
Here’s an examples that uses WebSockets with three sliders to control the RGB values of an LED. It uses an ESP8266 instead of an Arduino, but the principle should be more or less the same.
https://tttapa.github.io/ESP8266/Chap14%20-%20WebSocket.html

Pieter

@PieterP Do you know if there's any websocket library that works with the m0 wifi101 combination? Have tried for days to find something that works...

I know, I got it working with the ESP8266 but constantly yielding to the wifi and switching between wifi and code results in very low performance if you tried to controll led's, motors, etc.

Thanks so much for any input!

On the Arduino side, you just have to handle the POST request and take the data out of the body.

Hi! And… that’s exactly where I’m stuck!

here is what I’ve been trying so far, without success:

const char MAIN_page[] PROGMEM = R"=====(
<html>
  <head>
    <p> CAMERA IS: <span id="MEBORelay-state">__</span> <button onclick="myFunction('/ledstate')"> TOGGLE </button> </p>
    <p>MOTION IS: <span id="MVT-state">__</span> </p><p> </p>

    
    </form>;

  </head>
  <body>

    <table style="width:100%;text-align: center;">
      <tr>
        <th>MOVMENT</th>
        <th>VIDEO</th> 
        <th>ARM CONTROL</th>
      </tr>
      <tr>
        <td>
          <p><button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/fwd')"> ^ </button></p>
          <p><button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/left')"> < </button>
            <button style=width:100px;height:45px;margin-left:0;color:white;background-color:red onclick="MainFunc('/stop')"> STOP </button>
            <button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/right')"> > </button></p>
          <p><button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/rvs')"> V </button></p>
        </td>
        <td>


          <p>
            <OBJECT classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase='http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab' width='320' height='240' id='vlc' events='True'>
              <param name='Src' value='rtsp://admin:xxxxxxxxxxx@192.168.10.181:554/h264Preview_01_main' />
              <param name='ShowDisplay' value='True' />
              <param name='AutoLoop' value='False' />
              <param name='AutoPlay' value='True' />
              <embed id='vlcEmb' type='application/x-google-vlc-plugin' version='VideoLAN.VLCPlugin.2' autoplay='yes' loop='no' width='320' height='240' target='rtsp://cameraipaddress' ></embed>
      </OBJECT>
      </p>


    </td> 
  <td>  
    ARM  

    <p><button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/ArmUp')"> ^ </button>
      <button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/ArmDown')"> V </button></p>

    FOREARM
    <p><button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/ForeArmUp')"> ^  </button>
      <button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/ForeArmDown')"> V </button></p>

    CLAMP
    <p><button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/CloseClamp')"> > <  </button>
      <button style=width:100px;height:45px;margin-left:0 onclick="MainFunc('/OpenClamp')"> < > </button></p>

        </td>
      </tr>
      <tr>
        <td>
          <h4>PROGRAMMED RIDE</h14>

          <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>


    </p>

    <p> <button style=width:100px;height:45px;margin-left:0;color:white;background-color:navy blue onclick="execute()"> Execute FWD </button>
      <button style=width:100px;height:45px;margin-left:0;color:white;background-color:magenta onclick="rvsDistF()"> Execute RVS </button></p>

  </td>
  <td>AUTOMATIONS MANAGEMENT</td> 
  <td>94</td>
  </tr>
<tr>
  <td>

  </td>
  <td> 
    <p><button style=width:100px;height:45px;margin-left:0 onclick="selfdriveF()"> Auto-Roaming </button></p>

    <p><button style=width:100px;height:45px;margin-left:0 onclick="LineFWDF()">  Follow The Line (fwd)  </button></p>
    <p><button style=width:100px;height:45px;margin-left:0;color:white;background-color:red onclick="StopAllF()"> STOP ALL! </button>
      <button style=width:100px;height:45px;margin-left:0;color:white;background-color:blue onclick="CancelStopAllF()"> Reset Drive </button></p>
  </td> 
  <td>


  </td>
</tr>
</table>

</body>
<script>

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

  slider.oninput = function() {
    
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/" + slider, 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 xhr = new XMLHttpRequest();
    xhr.open("GET", "/" + slider2, true);
    xhr.send();
    output2.innerHTML = this.value; 
  }

 
  function myFunction($val)
  {
    console.log("button was clicked!");
    var xhr = new XMLHttpRequest();
    var url = $val;

    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("MEBORelay-state").innerHTML = this.responseText;
      }
    };

    xhr.open("GET", url, true);
    xhr.send();
  };
  document.addEventListener('DOMContentLoaded', myFunction, false);

  function MainFunc($val)
  {

    console.log("button was clicked!");
    var xhr = new XMLHttpRequest();
    var url = $val 

    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("state").innerHTML = this.responseText;
      }
    };

    xhr.open("GET", url, true);
    xhr.send();
  };
  document.addEventListener('DOMContentLoaded', MainFunc, false);
</script>
</html>
)=====";

server.on("/speedRange", getFwd); simply won’t get triggered on the arduino side when I move the slider, although I have no problem with simple buttons, of course, because there’s no variable involved… If anyone could help me, it’d save me a great deal of pain! (I’ve been on this for two days, it’s getting ridiculous…).

If anyone comes across this old topic again… Never know… :slight_smile:

server.on("/speedRange", getFwd); simply won't get triggered on the arduino side when I move the slider

You defined that slider to call sendPosition() when it moved. And, yet, you have no function in the script node with that name.

server.on("/speedRange", getFwd); simply won’t get triggered on the arduino side when I move the slider

Thank you for you answer,

Indeed, and that’s only because I simply forgot to delete that function (and its call). The data is dealt with by the slider.oninput = function() {} code.

It now works, except it’s very slow due to opening a new TCP connection for every increment. It’s fast enough when I click the cursor to a new position, but incredibly slow when sliding the cursor.

For whoever might be interested, here is how I made it work:

Javascript side:

 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();  
  }

Arduino C side, in setup:

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

  for (1; i < s; i++) {
//    Serial.println(i);
    String iString = String(i);
    String str1 = "/speedRange";
    String str2 = str1 + "=" + iString;
    server.on(str2, [i]() {
      //Serial.print("GETTING NEW SPEED: "); Serial.println(i);

      HttpReq = true; // tell mvt function that we have a new value requested from the user for next cmd
      // set the global variable
      SPEED = i;
      // now store this value so next fwd or rvs request will apply it
      rqSp = SPEED;
     
      //delay(100);
    });
  }

Now, I suppose that onmouseup instead of oninput should do the trick regarding the latency issue.