David Huisman asked 3 years 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 3 years 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 3 years 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 3 years 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.
Neville Croucher answered 6 months ago
I’m seeing exactly the same. The slider works with a phone, but not a tablet or a laptop. The slider moves on the screen but doesn’t send the response to the ESP.
Any suggestions?
Neville Croucher answered 6 months ago
Hi Sara,
It’s ‘Unit 9 – ESP32 Control Servo Motor Remotely (Web Server)’ from Learn ESP32 with Arduino.
I’ve changed the code to operate in AP mode.
It works absolutely well with my android smartphone. When the slider is moved I can see the response on the serial monitor. However when I’ve tried both an android tablet and a laptop using win 10, although the web page loads ok, moving the slider only shows on the device but doesn’t cause any response at the ESP32.
When the smartphone connects this is received:
GET / HTTP/1.1
-Host: 192.168.4.1
-Connection: keep-alive
-Cache-Control: max-age=0
-Upgrade-Insecure-Requests: 1
-User-Agent: Mozilla/5.0 (Linux; Android 10; MAR-LX1A) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-Accept-Encoding: gzip, deflate
-Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
When the tablet connects this is received:
GET / HTTP/1.1
-Host: 192.168.4.1
-Connection: keep-alive
-Cache-Control: max-age=0
-X-Chrome-offline: persist=0 reason=reload
-Upgrade-Insecure-Requests: 1
-User-Agent: Mozilla/5.0 (Linux; Android 5.1; Hudl 2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.74 Safari/537.36
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
-Accept-Encoding: gzip, deflate
-Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Is there something significant in the differences in these responses?
Thanks,
Neville
Sara Santos Staff answered 6 months ago
Hi again.
On your laptop. Open the JavaScript console: Press Control + Shift + J
Move the slider, and check if there are any error messages.
Neville Croucher answered 6 months ago
Hi Sara,
This is the output on the javascript console:
GET https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js net::ERR_NAME_NOT_RESOLVED
(index):13 Uncaught ReferenceError: $ is not defined
at (index):13:1
(anonymous) @ (index):13
2(index):14 Uncaught ReferenceError: $ is not defined
at servo ((index):14:1)
at HTMLInputElement.onchange ((index):9:112)
Sara Santos Staff answered 6 months ago
Hi.
I tested the code and it is working fine on my side.
I tried it on my Windows computer (Google Chrome) and iPhone (Safari) and everything is working as expected.
When you control the slider, do you get the “Client disconnected” message after the slider number? See picture below:
Which web browsers are you using?
Regards,
Sara
Neville Croucher answered 6 months ago
Hello Sara,
My laptop is win 10 and chrome.
When I first connect to the page I get the connection info and the ‘client disconnected’.
However when I move the slider there is nothing received by the ESP32.
I opened the JS console and when I first access the web page I get this message:
GET https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js net::ERR_NAME_NOT_RESOLVED
(index):13 Uncaught ReferenceError: $ is not defined
at (index):13:1
When I move the slider I get this message:
(index):14 Uncaught ReferenceError: $ is not defined
at servo ((index):14:1)
at HTMLInputElement.onchange ((index):9:112)
If I click on the index above this is the listing:
body { text-align: center; font-family: “Trebuchet MS”, Arial; margin-left:auto; margin-right:auto;}
.slider { width: 300px; }
ESP32 with Servo
Position:
var slider = document.getElementById(“servoSlider”);
var servoP = document.getElementById(“servoPos”); servoP.innerHTML = slider.value;
slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }
$.ajaxSetup({timeout:1000}); function servo(pos) {
$.get(“/?value=” + pos + “&”); {Connection: close};}
I think the problem is to do with the last couple of lines where the ‘$’ is not defined and so the slider info is not sent. Unfortunately I’m not familiar with any of this JS and so cannot sort this myself.
Kind regards,
Neville
Neville Croucher answered 5 months ago
Hi Sara,
I think I’ve found what is happening. I changed the firmware to run in AP mode. Tablet or laptop is connected to the ESP32 WiFi the following line cannot run as there is no internet connection:
client.println(“<script src=\”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\”></script>”);
With the smartphone because this had previously been run with internet connection this code had previously been executed and hence the apparent disparity between devices.
Does this seem to be the likely cause?
Kind regards,
Neville
Sara Santos Staff answered 5 months ago
Hi.
Yes.
If the ESP32 is in access point mode, it doesn’t have access to the internet. So, it can’t access JavaScript libraries and it won’t work as expected.
That’s the reason why it’s not working.
Regards,
Sara
I