First post. Hello.

So you're a Noob? Post your questions here until you graduate! Don't be shy.
 Reply

User avatar

First post. Hello.

By Turbo Nasty
- Thu Jan 09, 2020 10:27 pm #85224 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
User avatar

Re: First post. Hello.

By Turbo Nasty
- Fri Jan 10, 2020 10:19 pm #85237 crickets...

I'll just start here...

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 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A;}</style></head>");
           
            // Web Page Heading
            client.println("<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\">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>");
                 
                 client.println("<p>MotorSpeed: <span id=");    //\"  \"></span></p>");
                 client.println(valueString);
                 client.println("></span></p>");   
                 client.println("<input type=\"range\" min=\"0\" max=\"100\" step=\"10\" id=\"motorSlider\" onchange=\"motorSpeed(this.value)\" mspeed=\"" + valueString + "\"/>");
                 client.println("<script> 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=");   //\"\"delayValue></span></p>");   
                 client.println(driveDelay);
                 client.println("></span></p>");
                 client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" id=\"delaySlider\" onchange=\"delaySpeed(this.value)\" delay=\"" + valueString1 + "\"/>");
                 client.println("<script> 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\">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 (homePageFlag == 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 (armPageFlag == 1){
              if (clawCloseFlag  == 1){
                 client.println("<p><a href=\"/clawOpen\"><button class=\"button\">OPEN</button></a></p>");
              }else{
                 client.println("<p><a href=\"/clawClose\"><button class=\"button\">CLOSE</button></a></p>");
              }
              client.println("<p><a href=\"/grab\"><button class=\"button\">grab</button></a></p>");
               if (lowerArmFlag == 1){
                 
                   client.println("<p>LowerArmPos:"); // <span id=\"  \"></span></p>");   
                   client.print (valueString2); //(S4.read() );
                   client.println("</span></p>");                                                                             //(low.vale)
                 client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" id=\"lowerArmSlider\" onchange=\"lowerArm(this.value)\" lowarm=\"" + valueString2 + "\"/>");
                 client.println("<script> 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=\"  \"></span></p>");   
                   client.print (valueString3); //(S4.read() );
                   client.println("</span></p>");
                 client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" id=\"upperArmSlider\" onchange=\"upperArm(this.value)\" uparm=\"" + valueString3 + "\"/>");
                 client.println("<script> 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.print("<p>swivelPos:"); //works for now add ajax?      // <span id=\"swivelPosition\"</span></p> ");
                  client.print (valueString4); //(S4.read() );
                  client.println("</span></p>");   
                 client.println("<input type=\"range\" min=\"0\" max=\"180\" step=\"1\" id=\"swivelSlider\" onchange=\"swivelPosition(this.value)\" swivel=\"" + valueString4 + "\"/>");
                 client.println("<script> function swivelPosition(pos) { ");
                 client.println("var xhr = new XMLHttpRequest();");
                 client.println("xhr.open('GET', \"/?swivel=\" + pos + \"&\", true);");
                 client.println("xhr.send(); } </script>");
                 }
               
               //client.println(S4.read());
              client.println("<p><a href=\"/upperarmslider\"><button class=\"button\">UPPER ARM</button></a>");
              client.println("<a href=\"/lowerslider\"><button class=\"button\">lower ARM</button></a>");
              client.println("<a href=\"/swivelslider\"><button class=\"button\">swivel</button></a></p>");
               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 (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("");
  }

User avatar

Re: First post. Hello.

By Turbo Nasty
- Fri Jan 10, 2020 10:26 pm #85238 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("");
  }
 Reply
Return to Newbie Corner