完整域名展示网站源码,做网站 找风投,泉州app制作,内容营销什么意思ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO
概述
上节 ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 讲述了如何通过网页控制一个 GPIO。本节实现在网页上控制多个 GPIO。
示例解析
前端设计
前端代码建立了四个 GPIO#xff0c;如下死 GPIO 2 在前端的…ESP32-Web-Server 实战编程-通过网页控制设备多个 GPIO
概述
上节 ESP32-Web-Server 实战编程-通过网页控制设备的 GPIO 讲述了如何通过网页控制一个 GPIO。本节实现在网页上控制多个 GPIO。
示例解析
前端设计
前端代码建立了四个 GPIO如下死 GPIO 2 在前端的定义注意不同的 GPIO其对应的 id 不同。前端的每个 GPIO在状态发生改变时将触发 toggleCheckbox() 函数。 div classcard p classcard-titlei classfas fa-lightbulb/i GPIO 2/plabel classswitchinput typecheckbox onchangetoggleCheckbox(this) id2span classslider/span/labelp classstateState: span id2s/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 timefunction getStates(){}
// Send Requests to Control GPIOsfunction 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?output2state1
I (76060) example_main: updates:gpio_num2
I (76060) example_main: updates:gpio[2]_status1讨论 每个前端的请求都需要在发送完数据后回复一个 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灯的物联网工程。
资源链接
1ESP32-Web-Server ESP-IDF系列博客介绍 2对应示例的 code 链接 点击直达代码仓库
3下一篇ESP32-Web-Server 实战编程-使用文件系统建立强大的 web 系统
(码字不易感谢点赞或收藏)
