当前位置：首页 > news >正文

用ESP32打造动态网页仪表盘

news 2026/3/27 2:00:49

手把手教你用Mongoose Wizard打造ESP32动态网页仪表盘（附代码管理秘籍）

引言

在物联网项目中，用ESP32构建一个网页来实时显示传感器数据是非常常见的需求。虽然我们可以手动编写HTML+CSS+JS，但效率和美观度往往难以兼得。Mongoose Wizard 是一个强大的在线可视化工具，只需拖拽组件就能生成完整的ESP32网页仪表盘代码，支持Arduino IDE直接编译。本文将带你从零开始，完成一个能自动刷新动态数据（0~100循环）的仪表盘，并重点解决一个痛点：如何在重新生成UI代码时不丢失手动添加的业务逻辑。

第一部分：Mongoose Wizard快速入门

1. 访问在线工具

打开浏览器，访问https://mongoose.ws/wizard/https://mongoose.ws/wizard/。你将看到一个可视化的UI编辑器界面。

2. 设计你的仪表盘

从左侧组件库拖拽一个数值显示卡片到画布。
可以添加一个仪表盘，用于显示速度。
选择开发板
布局调整满意后，点击右上角的Generate code按钮。

第二部分：本地编译与基础配置

1. 解压并打开项目

将下载的.zip文件解压，你会看到一个包含.ino文件和src文件夹的目录。用Arduino IDE打开.ino文件。

2. 添加WiFi连接

编译上传，打开串口监视器，你应该能看到IP地址正常显示。浏览器访问该IP，即可看到你设计的仪表盘（可能需要输入默认用户名密码admin/admin，可后续禁用）。

第三部分：添加动态数据（0~100循环）

现在我们要让仪表盘上的数字自动从0循环到100。Wizard生成的代码中，所有UI组件的数据都由src/mongoose_glue.c中的glue_get_state()函数提供。该函数返回一个结构体，包含所有UI组件的当前值。

1. 在`mongoose_glue.c`中添加动态变量和更新函数

打开src/mongoose_glue.c，在文件顶部添加全局变量和update函数：

#include <Arduino.h> // 如果还没有，需要包含以使用millis() static int g_dynamic_value = 0; // 动态值，从0到100循环 void update_dynamic_value() { static unsigned long lastUpdate = 0; unsigned long now = millis(); if (now - lastUpdate > 100) { // 每100ms更新一次 lastUpdate = now; g_dynamic_value++; if (g_dynamic_value > 100) { g_dynamic_value = 0; } } }

2. 修改`glue_get_state`函数

找到glue_get_state(struct state *data)函数，它通常是将静态的s_state复制给data。我们需要用动态值覆盖对应的成员。假设你在Wizard中将数值组件的Key设为dynamic_value，那么结构体中应该有一个同名成员（具体名称取决于Wizard生成，可能是dynamic_value或类似）。安全起见，可以用成员名直接赋值：

void glue_get_state(struct state *data) { *data = s_state; // 先复制静态初始值 >#ifndef APP_LOGIC_H #define APP_LOGIC_H #include <Arduino.h> extern int g_dynamic_value; // 声明全局变量 void update_dynamic_value(); // 声明更新函数 #endif

app_logic.cpp

#include "app_logic.h" int g_dynamic_value = 0; void update_dynamic_value() { static unsigned long lastUpdate = 0; unsigned long now = millis(); if (now - lastUpdate > 100) { lastUpdate = now; g_dynamic_value++; if (g_dynamic_value > 100) g_dynamic_value = 0; } }