基于Arduino的ESP32服务器的温度采集显示与LED远程控制

已于 2023-06-28 10:53:36 修改
阅读量1.4k 收藏 13
点赞数 1
分类专栏： ESP32开发 文章标签： 单片机 物联网
于 2023-06-27 22:10:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52619462/article/details/131426195
版权

前言

 建立一个异步ESP32 Web Server实时接收来自串口1 Serial1的发送的温度值数据，并在ESP32托管网页上实时显示当前温度值，Web客户端可以发送指令至串口1 Serial1远程控制LED。

先前准备

1.ESP32开发板+USB供电线+(C51/STM32:用于采集温度值+控制LED)

 当然，我们也可以不通过C51/STM32去做温度值采集、LED控制，直接通过ESP32就可以完成这些。笔者使用这些，只是某个实习项目必须要求的。

2.开发环境Arduino+VSCode+PlatformIO

 开发环境配置就不在此赘述，google上有相关教程，在此附上一个。

3.依赖库安装

 ESPAsyncWebServer 和 AsyncTCP 库。

使用异步Web Server优势：

1.可以处理多个连接

2.当发送请求同时，可以处理其他请求连接

3.处理请求模板更简单

网页界面

 ESP32网页客户端界面如下： [

代码架构

 主要文件在./src中。

main.hpp

#ifndef MAIN_HPP
#define MAIN_HPP

#include <WiFi.h>

struct WiFiConfig
{
    /* data */
    const char *ssid;
    const char *password;
};

struct ParamConfig
{
    /* data */
    const char *PARAM_INPUT_1;
    const char *PARAM_INPUT_2;
};

String read_uart_data();
String processor(const String &var);
void server_request();

#endif

main.cpp

/*
    Srerial串口：
    DEBUG用

    Serial1串口IO口:
    RX --------- SD2
    TX --------- SD3
*/

#include "main.hpp"
#include "WiFi.h"
#include "AsyncTCP.h"
#include "ESPAsyncWebServer.h"

WiFiConfig mywifi = {
    "dxxy16-402-1",
    "dxxy16402"};

ParamConfig param = {
    "output",
    "state"};

char recv_num[100];

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>

<head>
    <title>ESP Web Server</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:,">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <style>
        html {
            font-family: Arial;
            display: inline-block;
            text-align: center;
            margin: 0px auto;
        }

        h2 {
            font-size: 3.0rem;
        }

        p {
            font-size: 3.0rem;
        }

        body {
            max-width: 600px;
            margin: 0px auto;
            padding-bottom: 25px;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 120px;
            height: 68px
        }

        .switch input {
            display: none
        }

        .slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            border-radius: 6px
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 52px;
            width: 52px;
            left: 8px;
            bottom: 8px;
            background-color: #fff;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 3px
        }

        input:checked+.slider {
            background-color: #b30000
        }

        input:checked+.slider:before {
            -webkit-transform: translateX(52px);
            -ms-transform: translateX(52px);
            transform: translateX(52px)
        }

        .units {
            font-size: 1.2rem;
        }

        .ds-labels {
            font-size: 1.2rem;
            vertical-align: middle;
            padding-bottom: 15px;
        }
    </style>
</head>

<body>
    %BUTTONPLACEHOLDER%

    <p>
        <i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
        <span class="ds-labels">Temperature Celsius</span>
        <span id="temperaturec">%TEMPERATUREC%</span>
        <sup class="units">°C</sup>
    </p>

    <script>
        function toggleCheckbox(element) {
            var xhr = new XMLHttpRequest();
            if (element.checked) { xhr.open("GET", "/update?output=" + element.id + "&state=1", true); }
            else { xhr.open("GET", "/update?output=" + element.id + "&state=0", true); }
            xhr.send();
        }

        setInterval(function () {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("temperaturec").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "/temperaturec", true);
            xhttp.send();
        }, 20000);
    </script>
</body>

</html>
)rawliteral";

void setup()
{
    Serial.begin(9600);
    Serial1.begin(9600);

    // Connect to Wi-Fi
    WiFi.begin(mywifi.ssid, mywifi.password);
    while (WiFi.status() != WL_CONNECTED)
    {
        delay(1000);
        Serial.println("Connecting to WiFi..");
    }

    // Print ESP Local IP Address
    Serial.println(WiFi.localIP());

    server_request();
}

void loop()
{
}

void server_request()
{
    // Route for root / web page
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
              { request->send_P(200, "text/html", index_html, processor); });

    // Send a GET request to <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
    server.on("/update", HTTP_GET, [](AsyncWebServerRequest *request)
              {
        String inputMessage1;
        String inputMessage2;
        // GET input1 value on <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
        if (request->hasParam(param.PARAM_INPUT_1) && request->hasParam(param.PARAM_INPUT_2)) {
            inputMessage1 = request->getParam(param.PARAM_INPUT_1)->value();
            inputMessage2 = request->getParam(param.PARAM_INPUT_2)->value();
        }
        else {
            inputMessage1 = "No message sent";
            inputMessage2 = "No message sent";
        }
        Serial.print(inputMessage1+inputMessage2);
        Serial1.print(inputMessage1+inputMessage2);

        request->send(200, "text/plain", "OK"); });

    server.on("/temperaturec", HTTP_GET, [](AsyncWebServerRequest *request)
              { request->send_P(200, "text/plain", read_uart_data().c_str()); });

    // Start server
    server.begin();
}

// 读取串口数据
String read_uart_data()
{
    unsigned short i = Serial1.available(); // 获取串口接收数据个数
    unsigned short count = i;
    unsigned short j;
    char temp;

    if (i != 0)
    {
        j = 0;
        memset(recv_num, 0, sizeof(recv_num)); // 清空我们的目标字符串存储区域
        while (i--)
        {
            /* code */
            temp = Serial1.read();
            if (temp == '?')
                break;
            if (temp == 'C')
                break;
            recv_num[j] = temp;
            j++;
        }
        // Serial1.print(recv_num);
    }
    else
    {
        NULL;
    }

    // DEBUG
    Serial.print(recv_num);
    return String(recv_num);
}

// Replaces placeholder with button section in your web page
String processor(const String &var)
{
    // Serial.println(var);
    if (var == "BUTTONPLACEHOLDER")
    {
        String buttons = "";
        buttons += "<h3>LED0</h3><label class=\"switch\"><input type=\"checkbox\" οnchange=\"toggleCheckbox(this)\" id=\"0\"><span class=\"slider\"></span></label>";
        buttons += "<h3>LED1</h3><label class=\"switch\"><input type=\"checkbox\" οnchange=\"toggleCheckbox(this)\" id=\"1\"><span class=\"slider\"></span></label>";
        buttons += "<h3>Warning</h3><label class=\"switch\"><input type=\"checkbox\" οnchange=\"toggleCheckbox(this)\" id=\"2\"><span class=\"slider\"></span></label>";
        return buttons;
    }
    if (var == "TEMPERATUREC")
    {
        return read_uart_data();
    }
    return String();
}

代码如何运作

1.首先，包含必要的库：

#include "main.hpp"
#include "WiFi.h"
#include "AsyncTCP.h"
#include "ESPAsyncWebServer.h"

2.定义所需的变量和结构体变量：

WiFiConfig mywifi = {
    "dxxy16-402-1",
    "dxxy16402"};

ParamConfig param = {
    "output",
    "state"};

char recv_num[100];

3.创建一个 异步网络服务器的 server对象监听 80端口

AsyncWebServer server(80);

4.process()函数

 process()函数会将值赋在我们创建的HTML网页上的占位符上。它接受占位符("BUTTONPLACEHOLDER"和 "TEMPERATUREC")作为参数，并返回一个替代占位符的字符串。

String processor(const String &var)
{
    // Serial.println(var);
    if (var == "BUTTONPLACEHOLDER")
    {
        String buttons = "";
        buttons += "<h3>LED0</h3><label class=\"switch\"><input type=\"checkbox\" οnchange=\"toggleCheckbox(this)\" id=\"0\"><span class=\"slider\"></span></label>";
        buttons += "<h3>LED1</h3><label class=\"switch\"><input type=\"checkbox\" οnchange=\"toggleCheckbox(this)\" id=\"1\"><span class=\"slider\"></span></label>";
        buttons += "<h3>Warning</h3><label class=\"switch\"><input type=\"checkbox\" οnchange=\"toggleCheckbox(this)\" id=\"2\"><span class=\"slider\"></span></label>";
        return buttons;
    }
    if (var == "TEMPERATUREC")
    {
        return read_uart_data();
    }
    return String();
}

5.read_uart_data()函数

 read_uart_data()函数用来将读取串口接受的数据，在本项目中，用于接收串口1发送的温度值数据。

String read_uart_data()
{
    unsigned short i = Serial1.available(); // 获取串口接收数据个数
    unsigned short count = i;
    unsigned short j;
    char temp;

    if (i != 0)
    {
        j = 0;
        memset(recv_num, 0, sizeof(recv_num)); // 清空我们的目标字符串存储区域
        while (i--)
        {
            /* code */
            temp = Serial1.read();
            if (temp == '?')
                break;
            if (temp == 'C')
                break;
            recv_num[j] = temp;
            j++;
        }
        // Serial1.print(recv_num);
    }
    else
    {
        NULL;
    }

    // DEBUG
    Serial.print(recv_num);
    return String(recv_num);
}

6.server_request()函数

 server_request()函数主要用来处理Web服务器请求并启动服务器。

void server_request()
{
    // Route for root / web page
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
              { request->send_P(200, "text/html", index_html, processor); });

    // Send a GET request to <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
    server.on("/update", HTTP_GET, [](AsyncWebServerRequest *request)
              {
        String inputMessage1;
        String inputMessage2;
        // GET input1 value on <ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
        if (request->hasParam(param.PARAM_INPUT_1) && request->hasParam(param.PARAM_INPUT_2)) {
            inputMessage1 = request->getParam(param.PARAM_INPUT_1)->value();
            inputMessage2 = request->getParam(param.PARAM_INPUT_2)->value();
        }
        else {
            inputMessage1 = "No message sent";
            inputMessage2 = "No message sent";
        }
        Serial.print(inputMessage1+inputMessage2);
        Serial1.print(inputMessage1+inputMessage2);

        request->send(200, "text/plain", "OK"); });

    server.on("/temperaturec", HTTP_GET, [](AsyncWebServerRequest *request)
              { request->send_P(200, "text/plain", read_uart_data().c_str()); });

    // Start server
    server.begin();
}

7.setup()函数

 主要用串口的波特率初始化，wifi的连接以及网页服务器的请求与开启。

void setup()
{
    Serial.begin(9600);
    Serial1.begin(9600);

    // Connect to Wi-Fi
    WiFi.begin(mywifi.ssid, mywifi.password);
    while (WiFi.status() != WL_CONNECTED)
    {
        delay(1000);
        Serial.println("Connecting to WiFi..");
    }

    // Print ESP Local IP Address
    Serial.println(WiFi.localIP());

    server_request();
}

教程源码链接及其他

Github:https://github.com/Yogurt-994/esp32-project/tree/master/esp32-webserver
ESP32官网:https://randomnerdtutorials.com/getting-started-with-esp32/https://randomnerdtutorials.com/getting-started-with-esp32

Yogurt-994
关注
专栏目录
【花雕学编程】Arduino动手做（231）---XIAO ESP32S3 Sense 麦克风+OV2640 语音视觉AI识别主控模组套装
雕爷学编程
09-17 2144
鉴于本人手头积累了一些传感器和执行器模块，依照实践出真知（一定要动手做）的理念，以学习和交流为目的，这里准备逐一动手尝试系列实验，不管成功（程序走通）与否，都会记录下来——小小的进步或是搞不掂的问题，希望能够抛砖引玉。XIAO ESP32S3 Sense 是 Seeed Studio 推出的一个强大的迷你型开发板，它集成了多种传感器和丰富的接口，非常适合用于物联网(IoT)、AI人工智能、智能家居、工业自动化、数据采集、教育和娱乐等领域的项目开发。1、5V-这是从USB端口输出的5V。
基于Arduino 的 ESP32 TCP Server 建立
01-06
需要用到“有人调试助手app” 链接：https://pan.baidu.com/s/1W7_jb8FkUSkzD8BfsHZY2Q  提取码：qm7k 注意事项： 1、建立热点，通过使用ESP32开发板建立热点。 2、建立服务器链接，这里ESP32作为服务器使用，有人调试助手作为客户端使用。 /**  * Demo：  *    演示WiFiServer功能  *    打开有人调试助手app  模拟TCP client请求  */ #include //定义可连接的客户端数目最大值 #define MAX_SRV_CLIENTS 1 const char* ssid = “ESP32”;
ESP32 Web 服务器控制LED
qq_49516462的博客
09-03 1768
在本项目中，将创建一个带有 ESP32 的独立 Web 服务器，该服务器使用 Arduino IDE 编程环境控制输出（两个 LED）。Web服务器是移动响应式的，可以使用任何设备作为本地网络上的浏览器进行访问。接下来将逐步展示如何创建 Web 服务器以及代码的工作原理。将两个 LED 连接到 ESP32，如下图所示 – 一个 LED 连接到GPIO 26，另一个到GPIO 27.在浏览器上的操作也可以在串口监视器上显示。串口会打印出IP地址。
ESP32应用开发-Webserver
最新发布
dropLin的博客
08-29 753
ESP32作为AP模式，终端连接该AP，通过地址即可访问该web服务器了，前端界面文件通过http GET方式获取，包括css文件，图片，js文件等。，是支持lambda函数的，锁直接把函数传参直接写在调用处，是不是很方便。，是支持lambda函数的，锁直接把函数传参直接写在调用处，是不是很方便。字段中，以json字符串的形式存放。post消息体的body数据放在。，Arduino的编译链为。，Arduino的编译链为。把整个前端文件的内容放在。
使用基于ESP32的Web服务器的Internet控制LED-电路方案
04-20
在本文中，我将解释如何使用Arduino IDE创建基于ESP32的Web服务器，该服务器允许远程打开/关闭LED。 硬件组件: DFRobot FireBeetle ESP32物联网微控制器（支持Wi-Fi和蓝牙）× 1 LED（通用）× 1 Adafruit RGB背光LCD - 16x2× 1 电阻221欧姆× 1 USB-A到Micro-USB线× 1 软件应用程序和在线服务: Arduino IDE 在这个例子中，我们将弄清楚如何使基于ESP32的Web服务器控制LED状态，可以从世界上任何地方访问。 您将需要一台用于此项目的Mac计算机，但您甚至可以在廉价且低功耗的计算机（如Raspberry Pi）上运行此软件。 电路城原创内容，未经同意，不得转载！
基于 Arduino 库实现 ESP32 TCP Server 应用例程
weixin_42083266的博客
07-06 1435
【代码】基于 Arduino 库实现 ESP32 TCP Server 应用例程。
Arduino ESP32 Web 服务器
COYOO
07-12 1801
本项目使用ESP32创建一个Web 服务器，且控制两个 LED。可使用电脑或手机在本地网络上的浏览器进行访问。
使用Arduino开发ESP8266应用（OneNET平台实现温湿度数据存储和LED灯控制）
aaronmeng的专栏
09-24 6141
近期在做一个教学案例时，用到ESP8266来实现物联网平台的数据传输和控制。中间走过了很多波折，查阅了很多资料和博主的资料，基本搞定。为了避免大家少走弯路，把我开发这个应用过程中的经验整理一篇文档，供大家参考。 硬件： 1. ESP8266开发板（NodeMCU） 某东、某宝上都能买到，或者直接买乐鑫的官方原版（要带USB串口连接线） 2. 温湿度传感器 3. LED灯、杜邦线、电阻灯若干 一、Arduino IDE软件开发环境准备 1. 安装ESP8266库 （1）文件菜单..
一、基于wifi控制的智能家居系统之项目简介和设计方案（硬件基于arduino+esp8266,软件Android+Web端+scoket服务器，实现语音控制）
热门推荐
dml111727
07-15 2万+
一、项目功能介绍 项目主要实现了电灯、风扇、窗户的远程控制，以及获取室内的温度、湿度、室外雨水量。可通过雨水量来控制窗户的开关，以便于人们在其他地方时，窗户能够在下雨时进行关闭，防止雨水进入室内，提高人们的生活质量。同时可以通过温度控制风扇的档位，温度越高，风扇的转速越快。用户还可以通过语音控制各个设备，更显智能化。在大数据时代，采集温度、湿度、雨水量等信息是十分必要的。通过图形展示可让用户更直......
arduion esp8266 esp32拓展
04-30
**Arduino ESP8266与ESP32拓展详解** Arduino是一个开源硬件和软件平台，它为电子爱好者、工程师和创客提供了简单易用的编程环境，让编写控制微控制器的代码变得直观而方便。ESP8266和ESP32是其中两个非常流行的微...
【雕爷学编程】Arduino智慧校园之使用ESP8266模块实现远程LED控制
雕爷学编程
02-10 1112
你可以根据自己的需求和服务器端的接口进行适当的修改和调整。然而，在实际应用中需要注意电源供应、网络安全、代码编程和干扰等方面的问题，以确保系统的稳定性和安全性。代码编程：需要对Arduino和ESP8266模块进行适配，并编写相应的代码实现远程LED控制功能，需要熟悉Arduino编程和ESP8266模块的相关文档和库函数。物联网应用：ESP8266模块的WiFi功能使其可以与其他物联网设备进行通信，通过远程控制LED灯，可以实现与其他智能设备的联动，如与温度传感器配合实现温度报警等。
ESP32-Arduino-WEB服务库+例子.zip
01-22
ESP32-Arduino-SoftwareSerial虚拟串口库 ESP32-VirtualSerial.ino 虚拟串口例子 ESPAsyncWebServer-master HTTP网络服务器支持库 AsyncTCP-master-arduino异步TCP库ESP32 TCP异步库，HTTP服务库需要 http-led.ino HTTP网页控灯例子，要改wifi名和密码，这是接入现有wifi例子，可以改为做路由接入点，只需要修改初始化wifi部分，web代码部分不变 zip库加载方法： IDE菜单---项目--加载库--添加ZIP库
基于ESP32的粮仓远程温湿度监控系统.pdf
09-15
针对粮仓环境信息采集中温湿度采集设备体积大、精度低、供电布线成本高等问题，设计了一种具有便携性、准确性、实时性和可扩展性的远程采集及处理系统。该监控系统采用STM32 微处理器、温湿度传感器DHT22、温度传感器DS18B20 和无线通信模块ESP32，借助于Yeelink 平台实现了温湿度传感器的接入管理、温湿度数据的存储、远程监测和控制。软件开发环境为μC/OS-II和Emwin。调试结果表明该系统能够实时稳定可靠地反馈现场的温湿度数据，并通过手机和电脑终端实现实时监测与控制。
使用EPS32搭建的温度湿度采集电路
kuliansoft2014的博客
11-24 1718
使用EPS32搭建的温度湿度采集运行效果硬件环境软件说明eps-wroom32中的代码pc端的接收 运行效果 硬件环境 1,原件： 1，EPS-WROOM32模块 2.温湿度传感器DHT11 2，电路连接图： 软件说明 eps-wroom32中的代码 把采集到的温度显示到OLED上面，然后，把数据通过SOCKET发送到PC端 boot.py import network sta_if = network.WLAN(network.STA_IF) if not sta_if.isconnecte
Esp32读取温湿度数据上传到mqtt服务器
要喝肥仔水的博客
04-25 7918
本地搭建mqtt服务，esp32上传数据
ESP32 Arduino网络编程实例：异步TCP服务器物联网
JmwvOverflow的博客
09-21 582
通过这个示例，你可以学习如何创建一个简单的异步TCP服务器，处理客户端请求，并与多个设备进行通信。然后，我们定义了WiFi的SSID和密码，你需要将其替换为你自己的WiFi网络凭据。你还可以在SPIFFS文件系统中创建一个名为"index.html"的文件，编写自己的HTML代码，并将其作为根路径的默认文件。通过这个示例，你可以构建更复杂的物联网应用，使用ESP32的异步TCP服务器与多个设备进行通信。请注意，这只是一个简单的示例代码，实际的物联网应用可能需要更复杂的逻辑和安全性措施。
一步一步的指导构建基于ESP32的WEB服务器控制LED代码实现
DT程序员的博客
05-29 2071
我们将探讨如何从头开始构建 ESP32 LED 网络服务器。我们将完成设置ESP32、连接 LED以及创建 Web 界面来控制它们的步骤。代码实现
使用Arduino开发ESP32（十二）：TCP Server
Newbie_H的学习之路
07-25 4622
TCP Server按如下方式使用： 1.引用相关库#include <WiFi.h>； 2.声明WiFiServer对象； 3.使用begin方法启动监听； 4.监听客户端连接并处理数据通讯； 相关方法： WiFiServer(uint16_t port=80, uint8_t max_clients=4) 声明WiFiServer对象(端口号,最大接入客户数量) WiFiClient available() WiFiClient accept(){return available();
9. ESP32-TCP服务端（Arduino）
m0_60134435的博客
01-21 3072
（Transmission Control Protocol）是一种面向连接的（一个客户端对应一个服务端）、可靠的传输层协议。在的工作原理中，它会将消息或文件分解为更小的片段，称为数据包，然后通过发送。这些数据包被层接收后，重新组合成完整的文件或消息。此外，为了确保数据的传递成功，还会对数据流进行错误检查。如果发现错误，会请求重新传输丢失或损坏的数据包。
ESP32构建网络服务器：LED控制与Web界面实践
构建基于ESP32的WEB服务器控制LED是一项常见的物联网(IoT)实践，它涉及到将硬件（LED）与网络功能结合，通过Web接口实现远程控制。ESP32是一款功能强大的微控制器，集成了Wi-Fi和蓝牙功能，非常适合此类应用。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yogurt-994

你的打赏是对我最大的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值