ESP8266 NodeMCU Web 服务器：在仪表盘中显示传感器读数

VIP文章莲藕

于 2023-06-01 12:19:00 发布

阅读量409

点赞数

文章标签：服务器运维

本文链接：https://blog.csdn.net/hhqidi/article/details/130983541

版权

了解如何使用 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>

最低0.47元/天解锁文章

莲藕

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ESP8266 NodeMCU Web 服务器：在仪表盘中显示传感器读数

了解如何使用 ESP8266 NodeMCU 构建网络服务器以在仪表盘中显示传感器读数。例如，我们将以两种不同的仪表显示 BME280 传感器的温度和湿度：线性和径向。您可以轻松修改项目以绘制任何其他数据。要构建仪表，我们将使用 canvas-gauges JavaScript 库。
复制链接

扫一扫