如何在HTML(esp8266)中复制滑块

问题描述 投票:1回答:1

我正在使用ESP8266做一些事情,我需要一些有关HTML部分的帮助。我想复制1个滑块:代码是:

  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>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>ESP32 with Servo</h1>");
            client.println("<p>Start Temperature: <span id=\"servoPos\"></span></p>");          
            client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");

            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; }");
            client.println("$.ajaxSetup({timeout:1000}); function servo(pos) { ");
            client.println("$.get(\"/?value=\" + pos + \"&\"); {Connection: close};}</script>");

            client.println("</body></html>");     

            //GET /?value=180& HTTP/1.1
            if(header.indexOf("GET /?value=")>=0) {
              pos1 = header.indexOf('=');
              pos2 = header.indexOf('&');
              valueString = header.substring(pos1+1, pos2);

              //Rotate the servo
              //myservo.write(valueString.toInt());
            //  Serial.println(valueString); 
            }   
  } 
        }

    // Clear the header variable
    header = "";


这给了我一个滑块,但是我想要另一个在不同的变量下控制其他事物。由于我不太了解HTML,因此我尝试更改一些变量并自己复制代码,但没有成功。滑块可以工作,但是出现很多错误。

html slider esp8266 arduino-esp8266
1个回答
0
投票

第二(独立)滑块

       client.println("<p>Start Sensor2: <span id=\"servoPos2\"></span></p>");          
        client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider2\" onchange=\"servo2(this.value)\" value=\""+valueString+"\"/>");

        client.println("<script>var slider2 = document.getElementById(\"servoSlider2\");");
        client.println("var servoP2 = document.getElementById(\"servoPos2\"); servoP2.innerHTML = slider2.value;");
        client.println("slider2.oninput = function() { slider2.value = this.value; servoP2.innerHTML = this.value; }");

未显示的其余代码中的伺服功能(pos)(我的猜测)必须是重复或???为了停止猜测和为您提供帮助,请添加以下信息:源代码esp8266,或者如果是标准示例,则ino文件的名称

错误类型-在编译期间,在浏览器控制台上,在串行端口上?

© www.soinside.com 2019 - 2024. All rights reserved.