将 slider 的值从 web 页面返回到更改 slider 的程序

Question

I am trying to program a ESP32 to control the LED brightness using a slider and have been using some bits cobbled together from https://randomnerdtutorials.com/esp32-servo-motor-web-server-arduino-ide/ and https:/ /randomnerdtutorials.com/esp32-pwm-arduino-ide/

到目前为止，我能够让 ESP32 连接到我的网络，显示 slider 及其值，当 slider 更改时，设置 PWM 以设置 LED 亮度。

不利的一面是，虽然我可以在浏览器中显示 slider 值，同时它正在被更改，但让我获得 slider 值的位仅在我释放鼠标按钮时运行。 因此，我得到了一个 slider 来设置跳跃中的 PWM 值，而不是 slider 实时控制 LED。

我想要做的是让 LED 亮度代表 slider 上的值，因为 slider 已更改（在释放鼠标按钮之前）。

我已经尝试过 oninput 和 onchange 但没有任何运气。 我在 HTML 方面的技能有些欠缺，这无济于事。

任何人都可以给我的任何指示将不胜感激。

我的代码如下： -

#include <WiFi.h>

/* Web server initialisation stuff */

/* Set the network credentials to connect to */

const char* ssid     = "MySID";
const char* password = "MySIDPassword";

/* Create a server instance on port 80 (http) */
WiFiServer server(80);

/* Create a variable to store the HTTP request */
String header;

/* Decode HTTP GET value */
String valueString = String(5);
int pos1 = 0;
int pos2 = 0;

/* LED initialisation stuff */
const byte led_pin = 2;
int intBbrightness = 0;

void setup() {
  /* Set the serial speed */
  Serial.begin(115200);

  /* Set up the LED Pin */
  ledcAttachPin (led_pin, 0);
  /* Set the initial PWM value, the frequency and the nummer of bits for resolution */
  ledcSetup(0,5000,8);

  /* Connect to Wi-Fi network with SSID and password */
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  /* Print local IP address and start web server */
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();   // Listen for incoming clients

  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 slider */
            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 */
            /* Give the page a header here */
            client.println("</head><body><h1>ESP32 with Servo</h1>");

            /* Show the slider here */
            client.println("<p>Position: <span id=\"servoPos\"></span></p>");          
            client.println("<input type=\"range\" min=\"0\" max=\"256\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");

            /* Javascript for the slider */
            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);

            /* Set the brightness of the LED based on the slider */
              ledcWrite(0,valueString.toInt());
              Serial.println(valueString); 
            }         
            /* 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("");
  }




}

Answer 1

如果要从网页更新代码的亮度，则必须使用onchange 。

这是“实时”更新的唯一方法。

我在您的代码中没有看到您的updateBrightness function。 你说，如果你发布slider，你可以改变它。 但是，如果没有代码可以更改呢？

如果更改 slider，则需要使用新页面调用 ESP。 要在此页面上收听，您必须将其添加到您的设置代码中： server.on("/slider", handleSliderChange); 例如。

为什么即使您使用onchange()也不起作用？
它不会起作用，因为 HTML 每秒将使用新值生成 1000 个请求。 您的 ESP 将永远无法处理如此多的请求。

您所要做的就是只向您的 ESP 发起 1 个请求并等待，直到 ESP 回答。 如果收到答复后，slider 值发生了变化，您可以发送下一个值，直到 slider 值不再变化。

如果在传输新值的过程中 slider 调用onchange ，您只需保存新的 slider 值，无需向 ESP 发送请求。