Как скопировать слайдер в HTML (esp8266) - PullRequest
Новая
       11

Как скопировать слайдер в HTML (esp8266)

1 голос
/ 26 февраля 2020

Я что-то делаю с 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, я попытался изменить некоторые переменные и сам продублировать код, но безуспешно. Слайдер работает, но я получаю много ошибок.

1 Ответ

0 голосов
/ 27 февраля 2020

Второй (независимый) ползунок 

       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; }");

Функция servo (pos) (мое предположение) в остальном коде, который не показан, должна быть дублирована или ???
чтобы перестать гадать и помогать вам, пожалуйста, добавьте следующую информацию:
Исходный код esp8266 или, если это стандартный пример, имя файла ino

Тип ошибки - во время компиляции , на консоли браузера, на последовательном порту?

...