了解如何使用 ESP8266 NodeMCU 构建网络服务器以在仪表盘中显示传感器读数。例如,我们将以两种不同的仪表显示 BME280 传感器的温度和湿度:线性和径向。您可以轻松修改项目以绘制任何其他数据。要构建仪表,我们将使用 canvas-gauges JavaScript 库。
项目概况
该项目将使用 ESP8266 构建一个 Web 服务器,该服务器显示来自BME280 传感器的温度和湿度读数。我们将创建一个看起来像温度计的线性仪表来显示温度,并创建一个径向仪表来显示湿度。
服务器发送的事件
使用服务器发送事件 (SSE) 在网页上自动更新读数。
保存在文件系统上的文件
为了让我们的项目更好地组织和更容易理解,我们将保存 HTML、CSS 和 JavaScript 文件以在开发板的文件系统 ( LittleFS )上构建网页。
先决条件
在继续该项目之前,请务必检查本节中的所有先决条件。
1.在Arduino IDE中安装ESP8266开发板
我们将使用 Arduino IDE 对 ESP8266 进行编程。因此,您必须安装 ESP8266 插件。如果您还没有,请自行搜索教程进行安装:在 Arduino IDE(Windows、Mac OS X、Linux)中安装ESP8266 开发板。
如果您想将 VS Code 与 PlatformIO 扩展一起使用,请自行搜索教程学习如何对 ESP8266 进行编程:开始适用于 ESP32 和 ESP8266 的 VS Code 和 PlatformIO IDE(Windows、Mac OS X、Linux Ubuntu)。
2.文件系统上传器插件
要将 HTML、CSS 和 JavaScript 文件上传到 ESP8266 文件系统 (LittleFS),我们将使用 Arduino IDE 的插件: LittleFS Filesystem Uploader。请自行搜索教程安装文件系统上传器插件:在 Arduino IDE 中安装 ESP8266 NodeMCU LittleFS 文件系统上传器。
如果您使用带有 PlatformIO 扩展的 VS Code,请自行搜索教程以了解如何将文件上传到文件系统:带有 VS Code 和 PlatformIO 的 ESP8266 NodeMCU:将文件上传到文件系统 (LittleFS)
3.安装库
要构建此项目,您需要安装以下库:
- Adafruit_BME280(Arduino 库管理器)
- Adafruit_Sensor 库(Arduino 库管理器)
- Arduino 版本 0.1.0 的 Arduino_JSON 库 (Arduino 库管理器)
- ESPAsyncWebServer (.zip 文件夹);
- ESPAsyncTCP (.zip 文件夹)。
您可以使用 Arduino 库管理器安装前三个库。转到 Sketch > Include Library > Manage Libraries 并搜索库的名称。
ESPAsyncWebServer 和 ESPAsynTCP 库无法通过 Arduino 库管理器安装,因此您需要将库文件复制到 Arduino Installation Libraries 文件夹。或者,下载库的 .zip 文件夹,然后在您的 Arduino IDE 中,转到 Sketch > Include Library > Add .zip Library 并选择您刚刚下载的库。
安装库(VS Code + PlatformIO)
如果您使用 PlatformIO 对 ESP8266 进行编程,则应将以下行添加到platformio.ini文件以包含库,将串行监视器速度更改为 115200,并将 LittleFS 用于文件系统:
所需零件
要学习本教程,您需要以下部分:
- ESP8266开发板
- BME280传感器
- 跳线
- 面包板
您可以使用任何其他传感器,或显示对您的项目有用的任何其他值。如果您没有传感器,您也可以尝试使用随机值来了解项目的工作原理。
原理图,示意图
我们将从 BME280 传感器发送温度和湿度读数。我们将使用 I2C 通信与 BME280 传感器模块。为此,将传感器连接到默认的 ESP8266 SCL(接口 5) 和 SDA (接口 4)管脚,如下图所示。
整理文件
为了使项目井井有条并使其更易于理解,我们将创建四个文件来构建 Web 服务器:
- 处理网络服务器的Arduino 服务器代码 ;
- index.html:定义网页内容;
- sytle.css:设置网页样式;
- script.js:对网页的行为进行编程——处理网络服务器响应、事件、创建仪表等。
您应该将 HTML、CSS 和 JavaScript 文件保存在 Arduino sketch 文件夹内名为 data 的文件夹中,如上图所示。我们会将这些文件上传到 ESP8266 文件系统 (LittleFS)。
HTML文件
将以下内容复制到index.html文件。
<!DOCTYPE html>
<html>
<head>
<title>ESP IOT DASHBOARD</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>
</head>
<body>
<div class="topnav">
<h1>ESP WEB SERVER GAUGES</h1>
</div>
<div class="content">
<div class="card-grid">
<div class="card">
<p class="card-title">Temperature</p>
<canvas id="gauge-temperature"></canvas>
</div>
<div class="card">
<p class="card-title">Humidity</p>
<canvas id="gauge-humidity"></canvas