ESP32-Web-Server编程- 通过滑动条向 Web 提交数据

news2025/1/6 20:10:31

ESP32-Web-Server编程- 通过滑动条向 Web 提交数据

概述

上一节我们讲述了通过文本框向 ESP32 发送字符串、数字。有时，我们需要向 ESP32 发送连续的值，这种需求可以通过在网页端实现滑动条来实现。

需求及功能解析

本节演示如何在 ESP32 上部署一个 Web 服务器，并在访问该 web 服务器时在网页端提供一个滑动条。可以在网页移动滑动条，每次移动滑动条都会触发将新的数字发送到 ESP32 的 Web 服务器。这在一些实时性要求较高的项目中，比如控制 PWM 马达的频率时比较有用。

示例解析

目录结构

├── CMakeLists.txt
├── main
│   ├── CMakeLists.txt
│   └── main.c                 User application
├── components
│   └── fs_image
└── README.md                  This is the file you are currently reading

目录结构主要包含主目录 main，以及组件目录 components.
其中组件目录components中包含了用于存储网页文件的 fs_image 目录（即前述前端文件）。

前端代码

前端代码的 HTML 部分在 components/fs_image/web_image/index.html 中，主要是创建一个滑动条 pwmSlider，然后每次更新时触发函数 updateSliderPWM()，将在该函数内向 ESP32 Web 的 /slider 发送 POST 请求：

 <div class="topnav">
    <h1>ESP WEB SERVER INPUT FIELDS</h1>
  </div>
  <script>
    function updateSliderPWM(element) {
      var sliderValue = document.getElementById("pwmSlider").value;
      document.getElementById("textSliderValue").innerHTML = sliderValue;
      console.log(sliderValue);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/slider?value="+sliderValue, true);
      xhr.send();
    }
  </script>

后端代码

后端代码主要是增加了浏览器通过网页向服务器推送数据时的处理函数update_values_post_handler()：

 {"/", HTTP_POST, update_values_post_handler, rest_context},

在该函数中，接收推动数据，并解析推送数据中的字符串和数字：

static esp_err_t update_values_post_handler(httpd_req_t* req)
{
    ESP_LOGI(TAG, "in post handler, uri=%s", req->uri);
    char filepath[FILE_PATH_MAX];
    rest_server_context_t* rest_context = (rest_server_context_t*) req->user_ctx;
    char* buf = ((rest_server_context_t*) (req->user_ctx))->scratch;
    int str_len = 0;
    char temp_str[128] = {0};

    str_len = httpd_find_arg(req->uri, "value", temp_str, sizeof(temp_str));
    if ((str_len != -1) && (strlen((char *)temp_str) != 0)) {
        my_num = atoi(temp_str);
        ESP_LOGI(TAG, "updates:num=%d", my_num);
    }

    return ESP_OK;
}