该项目展示了如何使用 ESP32 构建网络服务器,以在具有多个系列的图表中绘制传感器读数。 例如,我们将在同一张图表上绘制来自四个不同 DS18B20 温度传感器的传感器读数。 您可以修改项目以绘制任何其他数据。

https://embed.notionlytics.com/wt/ZXlKd1lXZGxTV1FpT2lKa01tSmtPRFJqTW1ZNU1EazBZVGczT1RCbVptSmtNalJtTkRBMVlXRmpNaUlzSW5kdmNtdHpjR0ZqWlZSeVlXTnJaWEpKWkNJNklsZHNTR2hsVEZSUFdXeHpaVmRhUW1ZNU1YQmxJbjA9

概述

该项目将使用 ESP32 构建一个 Web 服务器,该服务器在同一图表上显示来自四个 DS18B20 温度传感器的温度读数 - 具有多个系列的图表。 该图表为每个系列最多显示 40 个数据点,每 30 秒添加一次新读数。 您可以在代码中更改这些值。

DS18B20 温度传感器

服务器发送事件

使用服务器发送事件 在网页上自动更新读数。

保存在文件系统上的文件

为了让我们的项目更好地组织和更容易理解,我们将保存 HTML、CSS 和 JavaScript 文件以在开发板的文件系统 (SPIFFS) 上构建网页。

在 Arduino IDE 中安装 ESP32 开发板

我们将使用 Arduino IDE 对 ESP32 进行编程。因此,您必须安装 ESP32 插件。如果您还没有,请按照下一个教程进行操作:

如果您想将 VS Code 与 PlatformIO 扩展一起使用,请按照下一个教程学习如何对 ESP32 进行编程:

文件系统上传插件

要将 HTML、CSS 和 JavaScript 文件上传到 ESP32 闪存 (SPIFFS),我们将使用 Arduino IDE 插件:SPIFFS 文件系统上传器。按照下一个教程安装文件系统上传插件:

如果您使用带有 PlatformIO 扩展的 VS Code,请阅读以下教程以了解如何将文件上传到文件系统:

库安装

安装库(VS Code + PlatformIO)

零件需求

原理图

获取 DS18B20 传感器的地址