美橙网站建设经典案例上海网站制作开发

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：

<table><tr><th>READING</th><th>VALUE</th></tr><tr><td>Temperature</td><td><span id="temp"></span> &deg;C</td></tr><tr><td>Humidity</td><td><span id="hum"></span> &percnt;</td></tr><tr><td>Pressure</td><td><span id="pres"></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 服务器的传感器数据。进一步优化网页端的设计，通过表格显示传感器的数据。

资源链接

1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接 （点击直达代码仓库）

3）下一篇：ESP32-Web-Server编程- 通过 Highcharts 创建图表（Chart）实时显示设备信息

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