ESP32—c3实现网页显示ADC电压并实时更新
实时显示数据的原理涉及以下几个关键步骤：
-
数据采集：
- 设备（如ESP32-C3）通过传感器或ADC（模数转换器）等硬件接口采集数据。在这个例子中，ADC引脚读取模拟电压值，并将其转换为数字值。
-
数据处理：
- 采集到的数据需要被处理，以转换为有用的信息。在代码示例中，ADC读取的数字值被转换为电压值，这是通过将ADC值除以最大可能值（4095，对于12位ADC）并乘以参考电压来完成的。
-
建立服务器：
- 代码中创建了一个Web服务器，该服务器能够监听来自客户端（通常是用户的Web浏览器）的HTTP请求。
-
客户端请求：
- 客户端（如Web浏览器）通过发送HTTP请求到服务器的IP地址和端口来请求数据。
-
服务器响应：
- 当服务器接收到来自客户端的请求时，它会执行相应的处理函数（如
handleRoot），该函数负责生成响应数据。在示例中，handleRoot函数读取ADC值，将其转换为电压，并生成包含此信息的HTML页面。
- 当服务器接收到来自客户端的请求时，它会执行相应的处理函数（如
-
数据传输：
- 服务器将生成的响应数据（在本例中为HTML页面）发送回客户端。这个过程是通过HTTP响应完成的。
-
页面刷新：
- 为了实现数据的实时显示，HTML页面中包含了一个
<meta>标签，它告诉浏览器每秒刷新页面一次。这是通过设置http-equiv="refresh"属性和content="1"（表示1秒）来实现的。
- 为了实现数据的实时显示，HTML页面中包含了一个
-
循环刷新：
- 每次页面刷新时，浏览器都会发送一个新的HTTP请求到服务器，服务器则返回最新的数据。这个过程不断重复，从而实现了数据的实时更新。
源码
#include <WiFi.h> // 引入WiFi库，用于连接和管理Wi-Fi网络
#include <WebServer.h> // 引入WebServer库，用于创建Web服务器// 定义连接Wi-Fi网络的SSID和密码
const char* ssid = "123"; // 替换为你的Wi-Fi网络名称
const char* password = "12345678901"; // 替换为你的Wi-Fi网络密码WebServer server(80); // 创建一个Web服务器实例，监听80端口// 定义ADC引脚和参考电压
const int adcPin = 2; // ESP32-C3上用于模拟读取的ADC引脚编号
const float adcVoltage = 3.3; // ADC引脚的参考电压void setup() {Serial.begin(115200); // 初始化串口通信，波特率为115200WiFi.begin(ssid, password); // 连接到Wi-Fi网络// 循环直到连接到Wi-Fi网络while (WiFi.status() != WL_CONNECTED) {delay(1000); // 等待1秒Serial.println("Connecting to WiFi..."); // 在串口监视器中输出连接信息}Serial.println("Connected to the WiFi network"); // 连接成功后输出信息Serial.print("IP address: "); // 输出分配的IP地址Serial.println(WiFi.localIP());pinMode(adcPin, INPUT); // 设置ADC引脚为输入模式server.on("/", handleRoot); // 当访问根URL时，调用handleRoot函数server.begin(); // 启动Web服务器Serial.println("HTTP server started"); // 服务器启动成功后输出信息
}void loop() {server.handleClient(); // 处理来自客户端的请求
}// 处理根URL的请求
void handleRoot() {int adcValue = analogRead(adcPin); // 读取ADC引脚的模拟值float voltage = (adcValue / 4095.0) * adcVoltage; // 将ADC值转换为电压值// 创建HTML页面内容String html = "<html><head><meta http-equiv=\"refresh\" content=\"1\"></head><body>";html += "<h1>ADC Voltage</h1>"; // 页面标题html += "<p>Voltage: " + String(voltage, 2) + " V</p>"; // 显示电压值，保留两位小数html += "</body></html>";server.send(200, "text/html", html); // 向客户端发送HTML页面内容
}