昆明经济技术开发区官方门户网站,wordpress 输出文章,小程序开发平台认可的公司,网站的模板演示怎么做ESP32-Web-Server编程- 使用表格#xff08;Table#xff09;实时显示设备信息
概述
上节讲述了通过 Server-Sent Events#xff08;以下简称 SSE#xff09; 实现在网页实时更新 ESP32 Web 服务器的传感器数据。
本节书接上会#xff0c;继续使用 SSE 机制在网页实时显…ESP32-Web-Server编程- 使用表格Table实时显示设备信息
概述
上节讲述了通过 Server-Sent Events以下简称 SSE 实现在网页实时更新 ESP32 Web 服务器的传感器数据。
本节书接上会继续使用 SSE 机制在网页实时显示设备的数据进一步优化网页的前端设计通过表格显示传感器的数据使网页更加美观。
需求及功能解析
本节演示如何在 ESP32 上部署 SSE Web 服务器然后通过网页上的表格实时显示传感器的数据。
示例解析
目录结构
├── 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 目录即前述前端文件。main 目录包含 Web Server 的实现以及后端代码。
前端代码
前端代码components/fs_image/web_image/index.html中生成显示传感器数据的表格分别显示 Temperature、Humidity、Pressure
tabletrthREADING/ththVALUE/th/trtrtdTemperature/tdtdspan idtemp/span deg;C/td/trtrtdHumidity/tdtdspan idhum/span percnt;/td/trtrtdPressure/tdtdspan idpres/span hPa/td/tr
/table此外在 JS 代码components/fs_image/web_image/js/script.js中增加了在表格下方实时显示时间的函数
//Function to add date and time of last update
function updateDateTime() {var currentdate new Date(); var datetime currentdate.getDate() / (currentdate.getMonth()1) / currentdate.getFullYear() at currentdate.getHours() : currentdate.getMinutes() : currentdate.getSeconds();document.getElementById(update-time).innerHTML datetime;console.log(datetime);其他代码与上节代码相同。
示例效果 讨论
1示例的前端代码中用了很多 innerHTML 读者可以熟悉前端中的这种方法的使用写出灵动的网页设计。
总结
1本节主要是基于上节讲述的通过 Server-Sent Events以下简称 SSE 实现在网页实时更新 ESP32 Web 服务器的传感器数据。进一步优化网页端的设计通过表格显示传感器的数据。
资源链接
1ESP32-Web-Server ESP-IDF系列博客介绍 2对应示例的 code 链接 点击直达代码仓库
3下一篇ESP32-Web-Server编程- 通过 Highcharts 创建图表Chart实时显示设备信息
(码字不易感谢点赞或收藏)
