First post. Hello.
Posted:
Thu Jan 09, 2020 10:27 pmby Turbo Nasty
Good Day. I do have a question. I hope this is a good place for it. I don't know much about the site and its restrictions for new members. I have been learning how to program, using the Arduino ide. I am not great at it, but have come a long way. I have been building a WiFi robot with a camera and arm. It has helped me find some direction with the ESP8266. I have really enjoyed using the ESP8266.
Where would be a good place to post a question about Building web pages? I am having trouble with multiple slider on one page. I got it to work if I separate the sliders on to different pages with a button for each, but I would like to have access to all three on the same page. As I have it now with three sliders the first two work and the third wont send a get request.
I can/will post the code here if this is the right place. Thanks in advance
Re: First post. Hello.
Posted:
Fri Jan 10, 2020 10:26 pmby Turbo Nasty
Posted wrong code. I had an older copy pulled up when I Copied to past. this is the latest version.
Code: Select all
// 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
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 30px;"); //16px 40px
client.println("text-decoration: none; font-size: 15px; margin: 2px; cursor: pointer;}"); //30px
client.println(".button2 {background-color: #f70505;}"); //red
client.println(".button3 {background-color: #199c22; padding: 10px 15px;}"); //green
client.println(".button4 {background-color: #0237f5;padding: 10px 15px;}"); //blue
client.println ("table,th,td{border:1px solid black:}");
client.println(".slider { width: 300px; height:25px; background: #00FF00; outline:none; opacity: 0.7; }</style>");
client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
// Web Page Heading
client.println("</head><body><h1>Super Robot Project</h1>");
if (drivePageFlag == 1){
client.println("<p>Drive Page</p>");
client.println("<p><a href=\"/forward\"><button class=\"button\">Forward</button></a></p>");
client.println("<p><a href=\"/left\"><button class=\"button\">Left</button></a>");
client.println("<a href=\"/stop\"><button class=\"button button2\">Stop</button></a>");
client.println("<a href=\"/right\"><button class=\"button\">Right</button></a></p>");
client.println("<p><a href=\"/reverse\"><button class=\"button\">Reverse</button></a></p>");
if (motorSpeedFlag == 1){
client.println("<p><a href=\"/delaytime1\"><button class=\"button\">DelayTime</button></a></p>");
//value to display vv
client.println("<p>Speed: <span id=\"motorspeedpos\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"100\" step=\"10\" class=\"slider\" id=\"motorSlider\" onchange=\"motorSpeed(this.value)\" value=\""+valueString+"\"/>");
//position slider starts
client.println("<script>var slider = document.getElementById(\"motorSlider\");");
client.println("var motorP = document.getElementById(\"motorspeedpos\"); motorP.innerHTML = slider.value;");
//display this value^^
client.println("slider.oninput = function() { slider.value = this.value; motorP.innerHTML = this.value; }");
client.println(" function motorSpeed(pos) { ");
client.println("var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?mspeed=\" + pos + \"&\", true);");
client.println("xhr.send(); } </script>");
}else{
client.println("<p><a href=\"/motorspeed1\"><button class=\"button\">MotorSpeed</button></a></p>");
//figuer out right id to show position
client.println("<p>Delay: <span id=\"delayspeedpos\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"100\" step=\"10\" class=\"slider\" id=\"delaySlider\" onchange=\"delaySpeed(this.value)\" value=\""+valueString1+"\"/>");
//position slider starts
client.println("<script>var slider = document.getElementById(\"delaySlider\");");
client.println("var delayP = document.getElementById(\"delayspeedpos\"); delayP.innerHTML = slider.value;");
//display this value^^
client.println("slider.oninput = function() { slider.value = this.value; delayP.innerHTML = this.value; }");
client.println(" function delaySpeed(pos) { ");
client.println("var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?delay=\" + pos + \"&\", true);");
client.println("xhr.send(); } </script>");
}
client.println("<p><a href=\"/home\"><button class=\"button button3\">HOME</button></a></p>");
client.println("<p><a href=\"/arm\"><button class=\"button\">ARM</button></a></p>");
client.println("<p><a href=\"/sensor\"><button class=\"button\">SENSOR</button></a></p>");
client.println("<p><a href=\"/2drive2\"><button class=\"button\">DRIVE2</button></a></p>");
}else if (homePageFlag == 1){
client.println("<p><a href=\"/drive\"><button class=\"button\">DRIVE</button></a></p>");
client.println("<p><a href=\"/arm\"><button class=\"button\">ARM</button></a></p>");
client.println("<p><a href=\"/sensor\"><button class=\"button\">SENSOR</button></a></p>");
client.println("<p><a href=\"/2drive2\"><button class=\"button\">DRIVE2</button></a></p>");
}else if (armPageFlag == 1){
if (clawCloseFlag == 1){
client.println("<p><a href=\"/clawOpen\"><button class=\"button button3\">OPEN</button></a></p>");
}else{
client.println("<p><a href=\"/clawClose\"><button class=\"button button3\">CLOSE</button></a></p>");
}
client.println("<p><a href=\"/grab\"><button class=\"button\">grab</button></a>");
client.println("<a href=\"/armHome\"><button class=\"button\">armHome</button></a>");
client.println(" <a href=\"/place\"><button class=\"button\">place</button></a></p>");
//place button...
// if (lowerArmFlag == 1){
client.println("<p>LowerArmPos: <span id=\"lowerarmpos\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" class=\"slider\" id=\"lowerArmSlider\" onchange=\"lowerArm(this.value)\" value=\""+valueString2+"\"/>");
//position slider starts
client.println("<script>var slider = document.getElementById(\"lowerArmSlider\");");
client.println("var lowerArmP = document.getElementById(\"lowerarmpos\"); lowerArmP.innerHTML = slider.value;");
//display this value^^
client.println("slider.oninput = function() { slider.value = this.value; lowerArmP.innerHTML = this.value; }");
//send get request
client.println(" function lowerArm(pos) { ");
client.println("var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?lowarm=\" + pos + \"&\", true);");
client.println("xhr.send(); } </script>");
// }
// if (upperArmFlag == 1){
client.println("<p>UpperArmPos: <span id=\"upperarmpos\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" class=\"slider\" id=\"upperArmSlider\" onchange=\"upperArm(this.value)\" value=\""+valueString3+"\"/>");
//position slider starts
client.println("<script>var slider = document.getElementById(\"upperArmSlider\");");
client.println("var upperArmP = document.getElementById(\"upperarmpos\"); upperArmP.innerHTML = slider.value;");
//display this value^^
client.println("slider.oninput = function() { slider.value = this.value; upperArmP.innerHTML = this.value; }");
//send get request
client.println(" function upperArm(pos) { ");
client.println("var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?uparm=\" + pos + \"&\", true);");
client.println("xhr.send(); } </script>");
// if (SwivelFlag == 1){
/* client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" class=\"slider\" id=\"SwivelSlider\" onchange=\"Swivel(this.value)\" value=\"30\"/>"); //slider lay out with inital position valuestring
//position slider starts
client.println("<script>var slider = document.getElementById(\"SwivelSlider\");");
client.println("var SwivelP = document.getElementById(\"Swivelpos\"); SwivelP.innerHTML = slider.value;"); //get value for indicator
//display this value^^
client.println("slider.oninput = function() { slider.value = this.value; SwivelP.innerHTML = this.value; }");
//send get request
client.println(" function Swivel(pos) { ");
client.println("var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?Swivel=\" + pos + \"&\", true);");
client.println("xhr.send(); } </script>");
//added second slider to see if first would work second works first did not */
client.println("<p>SwivelPos: <span id=\"Swivelpos\"></span></p>"); //indicated position updates with change
client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" class=\"slider\" id=\"SwivelSlider\" onchange=\"Swivel(this.value)\" value=\""+valueString4+"\"/>"); //slider lay out with inital position valuestring
//position slider starts
client.println("<script>var slider = document.getElementById(\"SwivelSlider\");");
client.println("var SwivelP = document.getElementById(\"Swivelpos\"); SwivelP.innerHTML = slider.value;"); //get value for indicator
//display this value^^
client.println("slider.oninput = function() { slider.value = this.value; SwivelP.innerHTML = this.value; }");
//send get request
client.println(" function Swivel(pos) { ");
client.println("var xhr = new XMLHttpRequest();");
client.println("xhr.open('GET', \"/?Swivel=\" + pos + \"&\", true);");
client.println("xhr.send(); } </script>");
client.println("<p><a href=\"/home\"><button class=\"button\">HOME</button></a></p>");
client.println("<p><a href=\"/drive\"><button class=\"button\">DRIVE</button></a></p>");
client.println("<p><a href=\"/sensor\"><button class=\"button\">SENSOR</button></a></p>");
client.println("<p><a href=\"/2drive2\"><button class=\"button\">DRIVE2</button></a></p>");
}else if (drive2PageFlag == 1){
client.println("<p><a href=\"/home\"><button class=\"button\">HOME</button></a></p>");
client.println("<p><a href=\"/drive\"><button class=\"button\">DRIVE</button></a></p>");
client.println("<p><a href=\"/arm\"><button class=\"button\">ARM</button></a></p>");
client.println("<p><a href=\"/sensor\"><button class=\"button\">SENSOR</button></a></p>");
// client.println("<p><a href=\"/2drive2\"><button class=\"button\">DRIVE2</button></a></p>");
}else if (sensorPageFlag == 1){
client.println("<p><a href=\"/home\"><button class=\"button\">HOME</button></a></p>");
client.println("<p><a href=\"/drive\"><button class=\"button\">DRIVE</button></a></p>");
client.println("<p><a href=\"/arm\"><button class=\"button\">ARM</button></a></p>");
//client.println("<p><a href=\"/sensor\"><button class=\"button\">SENSOR</button></a></p>");
client.println("<p><a href=\"/2drive2\"><button class=\"button\">DRIVE2</button></a></p>");
}
client.println("</body></html>");
// 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("");
}
Re: First post. Hello.
Posted:
Fri Jan 10, 2020 10:36 pmby Turbo Nasty
A screen shot of above code