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
讨论
-
每个前端的请求都需要在发送完数据后回复一个 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}"); }
-
为了在网页端每次设置 GPIO后都重新加载整个网页的 GPIO 信息,我们增加了一个重定义 handler:
redirect_index_html(req);
通过重新加载整个网页,避免网页端显示的 GPIO 状态与设备实际的 GPIO 状态不同步。这显然不是较好的做法,因为重新加载整个网页涉及的传输开销很大。我们将在后续的项目中优化这一点。
-
试想当多个浏览器同时访问该 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 系统
(码字不易感谢点赞或收藏)