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> °C</td>
</tr>
<tr>
<td>Humidity</td>
<td><span id="hum"></span> %</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)实时显示设备信息
(码字不易感谢点赞或收藏)