了解如何使用 ESP8266 NodeMCU 构建网络服务器以在仪表中显示传感器读数。 例如,我们将以两种不同的仪表显示来自 BME280 传感器的温度和湿度:线性和径向。
概述
该项目将使用 ESP8266 构建一个 Web 服务器,该服务器显示来自 BME280 传感器的温度和湿度读数。 我们将创建一个类似于温度计的线性仪表来显示温度,以及一个径向仪表来显示湿度。
服务器事件
使用服务器发送事件 (SSE) 在网页上自动更新读数。
文件保存系统
为了让我们的项目更好地组织和更容易理解,我们将保存 HTML、CSS 和 JavaScript 文件以在开发板的文件系统 (LittleFS) 上构建网页。
准备条件
在 Arduino IDE 中安装 ESP8266 开发板:
我们将使用 Arduino IDE 对 ESP8266 进行编程。因此,您必须安装 ESP8266 插件。
文件系统上传插件
要将 HTML、CSS 和 JavaScript 文件上传到 ESP8266 文件系统 (LittleFS),我们将使用 Arduino IDE 插件:LittleFS Filesystem Uploader。按照下一个教程安装文件系统上传插件:
库文件
安装
硬件需求
您可以使用任何其他传感器,或显示对您的项目有用的任何其他值。如果您没有传感器,您还可以尝试使用随机值来了解项目的工作原理。
原理图
文件组织
HTML 文件
CSS 文件
JavaScript 文件
读取代码解释
创建仪表
温度仪表代码解释
湿度仪表代码解释
事件处理
代码解释
Arduino 代码
代码分解
上传代码和文件
源代码
详情参阅http://viadean.com/esp8266_arduino_dash.html