David Huisman asked 7 months ago
HI,
I am having trouble with the “GET” not working for slider. I can move the slider and it updates the valuestring on screen but does not do the html get (I see nothing happen in url when moving slider). The read and write buttons work ok. My code snippet is below. Thanks for any help
if (client) { // If a new client connects,
Serial.println(“New Client.”); // print a message out in 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
header += c;
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(“Connection: close”);
client.println();
// Display the HTML web page
client.println(“<!DOCTYPE html><html>”);
client.println(“<head><meta name=\”viewport\” content=\”width=device-width, initial-scale=1\”>”);
client.println(“<link rel=\”icon\” href=\”data:,\”>”);
// CSS to style the on/off buttons
client.println(“<style>body { text-align: center; font-family: \”Trebuchet MS\”, Arial; margin-left:auto; margin-right:auto;}”);
client.println(“.slider { width: 300px; }</style>”);
client.println(“<script src=\”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\”></script>”);
// Web Page
client.println(“</head><body><h1>BodyGuard Portable Detector</h1>”);
client.println(“<p>Range : <span id=\”servoPos\”></span></p>”);
client.println(“<input type=\”range\” min=\”1\” max=\”16\” class=\”slider\” id=\”servoSlider\” onchange=\”servo(this.value)\” value=\””+valueString+”\”/>”);
//JAVA script
client.println(“<script>var slider = document.getElementById(\”servoSlider\”);”);
client.println(“var servoP = document.getElementById(\”servoPos\”); servoP.innerHTML = slider.value;”);
client.println(“slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }”);
//AJAX
client.println(“$.ajaxSetup({timeout:1000}); function servo(pos) { “);
client.println(“$.get(\”/?value=\” + pos + \”&\”); {Connection: close};}</script>”);
client.println(“<p><a href=\”/read\”><button class=\”button\”>READ</button></a></p>”);
client.println(“<p><a href=\”/write\”><button class=\”button\”>WRITE</button></a></p>”);
client.println(“</body></html>”);
//GET /?value=180& HTTP/1.1 if slider change, puts value into valueString
if(header.indexOf(“GET /?value=”)>=0) {
pos1 = header.indexOf(‘=’);
pos2 = header.indexOf(‘&’);
valueString = header.substring(pos1+1, pos2);
Serial.println(“Value = ” + valueString);
}
else if(header.indexOf(“GET /read”) >= 0)
{
GetRange();
}
else if(header.indexOf(“GET /write”) >= 0)
{
SetRange();
}
// 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
}
}
}
// Clear the header variable
header = “”;
// Close the connection
client.stop();
Serial.println(“Client disconnected.”);
Serial.println(“”);
}
}
Steve Mercer answered 7 months ago
Is this the free example at https://randomnerdtutorials.com/esp32-servo-motor-web-server-arduino-ide/ ?
I just tried it and it worked perfectly for me. I am using the Heltec WiFi Kit 32 board with 0.96″ OLED display. I did have to power the servo externally as it drew too much power and the board would constantly reset. I just used an Arduino Uno and connected 5V and GND to the servo and then pin 12 of the Heltec board to the signal line of the servo.
If you are having issues you can spread a few Serial.println() calls in your code at various places to make sure you are getting what you’re supposed to get.
David Huisman answered 7 months ago
The code was responding to button presses from phone but not slider change. Then I used a different phone and it works ok. Both are Samsung phones, maybe there is a setting during connection? They both state no internet available on connection and the serial monitor in Arduino shows a DCHP error on first connect with both phones.
Steve Mercer answered 7 months ago
I don’t believe in debugging other people’s code for them. You should revert your code to the point that it worked and then add your modifications one at a time and test until it fails. Then you know where to debug. Add Serial.println() calls to see what you are actually getting as opposed to what you think you should be getting.
Also, you can use a computer instead of a phone and use Firefox debugging tools to see what is sent and received in the browser.
Good luck.