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

LVGL项目初体验：制作一个温控面板界面

news 2026/3/27 2:33:59

从零打造一个温控面板：我在嵌入式世界里“画”出的第一个LVGL界面

最近接手了一个小项目，目标很明确——给一款智能温控器做个像样的图形界面。过去我们用的都是数码管加几个按键，用户调个温度得按五六下，体验实在不敢恭维。这次老板发话了：“要能滑动调节、有动画反馈、看起来高级一点。”

于是，我第一次认真接触了LVGL（Light and Versatile Graphics Library）。说实话，刚开始看到文档里一堆lv_obj_t、style、event_cb这些概念时，脑袋是有点大的。但真正动手做了个温控面板之后才发现：这玩意儿不仅轻量、灵活，而且上手速度比我预想中快得多。

今天就来分享一下我的实战经历——如何在一个资源有限的STM32板子上，用LVGL从零搭建一个功能完整、交互流畅的温控面板界面。不讲空话，全是踩过坑后的干货。

为什么选LVGL？不是还有TouchGFX和emWin吗？

在决定技术路线之前，我也对比了几种主流方案：

TouchGFX：界面确实漂亮，动画丝滑，但它绑定ST的硬件，还得用专用IDE，移植性差，调试也不方便；
emWin：功能强大，但商业授权费用高，对我们这种小团队来说成本压力不小；
LittlevGL（即LVGL）：开源免费、C语言编写、跨平台支持强，GitHub星标7k+，社区活跃，示例丰富。

最关键的是——它真的够“轻”。官方数据显示，在典型配置下，ROM占用60~100KB，RAM动态内存需求8~32KB之间，完全可以在只有几十KB内存的MCU上跑起来。对于我手上这块STM32F407（192KB RAM），绰绰有余。

更让我心动的是它的事件驱动模型和控件系统，几乎可以像写前端一样布局UI，甚至支持Flex/Grid布局！于是没犹豫多久，我就把LVGL加入了开发计划。

系统架构长什么样？软硬件怎么配合？

先说清楚整体结构，不然容易迷失在代码细节里。

整个温控系统的软硬件协作关系其实挺清晰的：

[显示屏] ←SPI→ [MCU] ↑ [LVGL GUI框架] ↑ [输入设备：触摸屏 / 按键] ↑ [传感器：DS18B20 / NTC]

具体分工如下：
-MCU：运行主循环，处理LVGL刷新、采集温度、响应用户操作；
-显示驱动：通过flush_cb回调把帧缓冲区内容刷到LCD；
-触摸输入：通过read_cb上报坐标，LVGL自动分发给对应控件；
-温度传感器：每秒读一次实际室温，然后更新界面上的数字；
-LVGL：作为中间层，统一管理所有UI元素与交互逻辑。

这个分层设计的好处是：UI和控制逻辑解耦。比如滑动条改设定值，只需要通知PID模块一声，其他事LVGL自己搞定。

开干！第一步：搭好环境，点亮屏幕

我用的是STM32F407 + ILI9341驱动的2.8寸TFT屏，分辨率240x320，RGB565格式。开发环境是Keil MDK，搭配STM32HAL库。

LVGL的移植其实很简单，核心就是三步：

初始化LVGL库
c lv_init();
注册显示驱动
```c
static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[LV_HOR_RES_MAX * 10]; // 十行缓存
lv_disp_draw_buf_init(&draw_buf, buf, NULL, LV_HOR_RES_MAX * 10);

static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.draw_buf = &draw_buf;
disp_drv.flush_cb = lcd_flush; // 自定义刷新函数
disp_drv.hor_res = 240;
disp_drv.ver_res = 320;
lv_disp_drv_register(&disp_drv);
```

注册触摸输入（如果带触摸）
c static lv_indev_drv_t indev_drv; lv_indev_drv_init(&indev_drv); indev_drv.type = LV_INDEV_TYPE_POINTER; indev_drv.read_cb = touch_read; // 触摸数据读取函数 lv_indev_drv_register(&indev_drv);

其中lcd_flush和touch_read是你自己写的底层驱动函数。只要能正确发送像素数据和返回坐标，LVGL就能正常工作。

最后在主循环里加上这一句：

while (1) { lv_timer_handler(); // 必须周期调用，建议放在1ms定时中断或任务中 HAL_Delay(5); }

这是LVGL的心跳，负责处理事件分发、动画更新和屏幕刷新。没有它，界面就“死”了。

设计UI：我们要做一个什么样的温控面板？

需求很明确：

实时显示当前温度（比如“24.5°C”）
可滑动调节目标温度（16~30°C）
显示设定值，并随滑块同步变化
提供“制热/制冷”模式切换按钮
启动/停止开关
温度过高时文字变红告警

听起来不复杂，但要做到美观又直观，还是得好好规划布局。

LVGL的UI组织方式很像DOM树——一切皆对象（lv_obj_t），有父子层级，支持样式继承。我们可以这样构建：

void create_thermostat_ui(void) { lv_obj_t * screen = lv_scr_act(); // 获取当前屏幕 lv_obj_set_style_bg_color(screen, lv_color_hex(0x1A1A2E), 0); // 深蓝背景 // 当前温度标签 lv_obj_t * temp_now_label = lv_label_create(screen); lv_label_set_text(temp_now_label, "24.5°C"); lv_obj_set_style_text_color(temp_now_label, lv_color_white(), 0); lv_obj_set_style_text_font(temp_now_label, &lv_font_montserrat_28, 0); lv_obj_align(temp_now_label, LV_ALIGN_TOP_MID, 0, 40); // 目标温度滑条 lv_obj_t * slider = lv_slider_create(screen); lv_obj_set_size(slider, 200, 15); lv_slider_set_range(slider, 16, 30); lv_slider_set_value(slider, 24, LV_ANIM_OFF); lv_obj_align(slider, LV_ALIGN_CENTER, 0, 0); lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL); // 目标温度数字显示 lv_obj_t * temp_set_label = lv_label_create(screen); lv_label_set_text_fmt(temp_set_label, "%d°C", lv_slider_get_value(slider)); lv_obj_align_to(temp_set_label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); lv_obj_set_style_text_font(temp_set_label, &lv_font_montserrat_20, 0); lv_obj_set_style_text_color(temp_set_label, lv_color_hex(0x00BFFF), 0); // 把label存进slider的用户数据，方便回调访问 lv_obj_set_user_data(slider, temp_set_label); }

这段代码创建了一个居中的滑条和两个温度显示。关键点在于：

使用lv_obj_align和lv_obj_align_to进行精准定位；
通过lv_obj_add_event_cb绑定滑块值变化事件；
利用lv_obj_set_user_data存储关联控件指针，避免全局变量泛滥。

是不是有点像JavaScript操作DOM的感觉？只不过这里是C语言。

让界面“活”起来：事件回调怎么写？

滑块拖动时，目标温度要实时更新。这就是典型的事件驱动编程。

static void slider_event_cb(lv_event_t * e) { if (lv_event_get_code(e) == LV_EVENT_VALUE_CHANGED) { lv_obj_t * slider = lv_event_get_target(e); int32_t value = lv_slider_get_value(slider); lv_obj_t * label = (lv_obj_t *)lv_obj_get_user_data(slider); char buf[16]; snprintf(buf, sizeof(buf), "%d°C", (int)value); lv_label_set_text(label, buf); // 同步更新控制系统的设定值 set_temperature_setpoint(value); } }

就这么几行代码，实现了“用户操作 → 数据更新 → 控制输出”的闭环。而且LVGL内部已经做好了防抖和频率限制，不用担心频繁触发导致性能问题。

再来看个更有意思的功能：模式切换按钮。

static void mode_btn_event_cb(lv_event_t * e) { static bool is_heating = true; lv_obj_t * btn = lv_event_get_target(e); lv_obj_t * label = lv_obj_get_child(btn, 0); // 按钮里的子标签 is_heating = !is_heating; lv_label_set_text(label, is_heating ? "制热模式" : "制冷模式"); lv_obj_set_style_bg_color(btn, is_heating ? lv_color_red() : lv_color_blue(), 0); }

点击一次切换状态，颜色随之改变，视觉反馈立刻跟上。这种“所见即所得”的交互体验，是传统按键无法比拟的。

动态刷新：怎么让当前温度“动”起来？

实时温度来自DS18B20，每秒采集一次。我们需要把这个数据“注入”到UI中。

void update_current_temperature(float current_temp) { static lv_obj_t * label = NULL; if (!label) { label = lv_label_create(lv_scr_act()); lv_obj_set_style_text_color(label, lv_color_white(), 0); lv_obj_set_style_text_font(label, &lv_font_montserrat_28, 0); lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 40); } char buf[16]; snprintf(buf, sizeof(buf), "%.1f°C", current_temp); lv_label_set_text(label, buf); // 高温警告 if (current_temp > 35.0f) { lv_obj_set_style_text_color(label, lv_color_red(), 0); } else { lv_obj_set_style_text_color(label, lv_color_white(), 0); } }

这个函数由传感器任务周期调用（例如FreeRTOS中的vTaskDelay(1000)）。LVGL会自动将修改标记为“脏区域”，并在下一帧只刷新这部分内容，极大降低CPU负担。

顺便提一句：如果你启用了局部刷新（LV_DISP_PARTIAL_REFRESH）或GPU加速（LV_USE_GPU），性能还能进一步提升。

工程实践中要注意哪些坑？

别看代码写起来顺，真正在产品级项目中使用LVGL，有几个地方必须小心：

1. 内存管理不能马虎

LVGL默认使用malloc/free动态分配对象，但在裸机系统中容易造成堆碎片。建议：

对常用控件使用静态对象；
或启用外部SRAM，设置LV_MEM_CUSTOM=1指向PSRAM；
定期检查内存泄漏，尤其是频繁创建销毁的弹窗类控件。

2. 触摸校准要做稳

电容屏出厂参数可能不准，首次开机最好做一次自动校准。可以用LVGL自带的lv_calibration工具，或者自己实现三点校准算法。

另外，机械按键输入一定要加去抖：

if (lv_tick_get() - last_press_time < 50) return; // 50ms去抖 last_press_time = lv_tick_get();

3. 样式统一，便于维护

不要到处写lv_color_make(0xFF, 0xA5, 0x00)这种魔法值。建立一个theme.h文件统一管理：

#define COLOR_BG lv_color_hex(0x1A1A2E) #define COLOR_PRIMARY lv_color_hex(0x00BFFF) #define COLOR_WARNING lv_color_red() #define FONT_TITLE &lv_font_montserrat_28

然后在UI中直接引用，后期换主题也方便。