ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO

ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO

概述

上节 ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 讲述了如何通过网页控制一个 GPIO。本节实现在网页上控制多个 GPIO。

示例解析

前端设计

前端代码建立了四个 GPIO,如下死 GPIO 2 在前端的定义,注意不同的 GPIO,其对应的 id 不同。前端的每个 GPIO,在状态发生改变时,将触发 toggleCheckbox() 函数。

 <div class="card">             
  <p class="card-title"><i class="fas fa-lightbulb"></i> GPIO 2</p>
  <label class="switch">
    <input type="checkbox" onchange="toggleCheckbox(this)" id="2">
    <span class="slider"></span>
  </label>
  <p class="state">State: <span id="2s"></span></p>
</div>

此外,前端代码还定义了两个 JS 函数:getStates()toggleCheckbox()

window.addEventListener('load', getStates);
// Function to get and update GPIO states on the webpage when it loads for the first time
  function getStates(){}
// Send Requests to Control GPIOs
  function toggleCheckbox (element) {}

getStates() 将在重新加载网页时查询当前所有 GPIO 的状态,并更新到网页上。

toggleCheckbox() 将在网页端的对应 GPIO 状态改变时触发检测 GPIO 的状态。

注意,两个函数中都使用了XML 组件生成的 URL 来设置具体的 http 请求。如

xhr.open("GET", "/states", true);

上述语句将向 /states URL 实际发出一个 的 GET 类型的请求。

此外,在前端代码中还使用了 JSON 字符串,JSON 是一种常用的结构化文本结构,这里不做详细科普,感兴趣的可以搜索相关资料进行了解。json.parse 的相关参考资料参考 javascript-json-parse

后端设计

后端代码中主要增加两个 handler,"/states" 和 "/update",它们分别响应对应的上述两个前端的函数 getStates() 、toggleCheckbox()。

{"/states", HTTP_GET, output_states_get_handler, NULL},
{"/update", HTTP_GET, update_state_get_handler, NULL},

为了实现上报多个 GPIO 的状态,我们在后端代码中使用了 JSON 格式,通过 JSON 字符串获取每个 GPIO 对象详细的信息。

为了与前端解析 JSON 的过程相对应,我们需要在后端将信息封装为 JSON 字符串。这需要在文件中增加 JSON 功能的头文件 include "cJSON.h",然后使用 cJSON 的函数制作 JSON 对象。示例演示了常见的用法,并通过 cJSON_Print() 打印最终生成的 JSON 字符串,读者可以尽情封装,在使用中体会 JSON 字符串的使用方法。

cJSON* root = cJSON_CreateObject();
cJSON *gpio_array = cJSON_CreateArray();

最后前端回复的字符串中包含 GPIO 的详细信息,我们通过字符串解析函数 httpd_find_arg() 解析要控制的是哪一个 GPIO,以及要设置该 GPIO 是否输出高电平。

示例效果

点击不同的按钮可以切换网页的显示效果:

在网页端更新 GPIO 状态时,可以看到后端代码对应的响应,如下是对控制 GPIO2 的后端代码响应 log:

I (76050) example_main: req:/update?output=2&state=1
I (76060) example_main: updates:gpio_num=2
I (76060) example_main: updates:gpio[2]_status=1

讨论

  1. 每个前端的请求都需要在发送完数据后回复一个 OK,或者 error 编码,这在我们前述的 HTML 基础 章节中讲述了 HTTP 传输协议的原理。

    void modbus_dtu_web_response_OK(httpd_req_t *req)
    {
        httpd_resp_set_type(req, HTTPD_TYPE_JSON);
        httpd_resp_set_status(req, HTTPD_200);
        httpd_resp_sendstr(req, "{\"state\": 0}");
    }
    
    void modbus_dtu_web_response_error(httpd_req_t *req, const char *status)
    {
        httpd_resp_set_type(req, HTTPD_TYPE_JSON);
        httpd_resp_set_status(req, status);
        httpd_resp_sendstr(req, "{\"state\": 1}");
    }
    
  2. 为了在网页端每次设置 GPIO后都重新加载整个网页的 GPIO 信息,我们增加了一个重定义 handler:

    redirect_index_html(req);
    

    通过重新加载整个网页,避免网页端显示的 GPIO 状态与设备实际的 GPIO 状态不同步。这显然不是较好的做法,因为重新加载整个网页涉及的传输开销很大。我们将在后续的项目中优化这一点。

  3. 试想当多个浏览器同时访问该 web 服务器时将发生什么?

    因为当前的 web 服务器不能将更新以主动通知的形式通知所有连接的设备,当多个设备同时访问该 web 服务器时,会出现 A 浏览器更改了对应 GPIO 状态,但是 B 浏览器没有主动更新网页的情况下,是无法知道当前 GPIO 状态已经更改了的。因此当前的设计不支持多设备访问。我们将在后面修正这点设计的不足。

总结

1)本节主要是演示最常见的控件-button,以及可以绑定一个事件来描述按钮按下时发生的行为。

2)通过本节的 ESP32 Web Server Mutil GPIOs 的示例,你可以模仿写出一个网友控制多个外部传感器、LED灯的物联网工程。

资源链接

1)ESP32-Web-Server ESP-IDF系列博客介绍

2)对应示例的 code 链接 (点击直达代码仓库)

3)下一篇:ESP32-Web-Server 实战编程-使用文件系统建立强大的 web 系统

(码字不易感谢点赞或收藏)

相关推荐
pk_xz12345635 分钟前
Shell 脚本中变量和字符串的入门介绍
linux·运维·服务器
小珑也要变强37 分钟前
Linux之sed命令详解
linux·运维·服务器
海绵波波10744 分钟前
Webserver(4.3)TCP通信实现
服务器·网络·tcp/ip
九河云3 小时前
AWS账号注册费用详解:新用户是否需要付费?
服务器·云计算·aws
Lary_Rock3 小时前
RK3576 LINUX RKNN SDK 测试
linux·运维·服务器
幺零九零零4 小时前
【计算机网络】TCP协议面试常考(一)
服务器·tcp/ip·计算机网络
云飞云共享云桌面5 小时前
8位机械工程师如何共享一台图形工作站算力?
linux·服务器·网络
hairenjing11236 小时前
使用 Mac 数据恢复从 iPhoto 图库中恢复照片
windows·stm32·嵌入式硬件·macos·word
模拟IC攻城狮8 小时前
华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目——共8套(每套四十题)
嵌入式硬件·华为·硬件架构·芯片
IT B业生8 小时前
51单片机教程(六)- LED流水灯
单片机·嵌入式硬件·51单片机