用Raspberry Pi Pico和LVGL打造精致桌面电压仪表从硬件搭建到UI设计实战在创客的工作台上总少不了一些既实用又能彰显技术品味的小工具。今天我们要实现的就是一个基于Raspberry Pi Pico和ILI9341显示屏的桌面电压仪表——它不仅能够实时显示ADC采集的电压数据还能通过LVGL打造出媲美商业产品的精致界面。这个项目完美融合了嵌入式开发、硬件交互和UI设计的乐趣最终成品可以成为你工作台上兼具功能性与观赏性的科技摆件。1. 项目规划与硬件选型1.1 核心组件解析这个项目的核心硬件由三部分组成Raspberry Pi Pico这款性价比极高的微控制器板搭载RP2040双核ARM Cortex-M0处理器运行频率可达133MHz具备丰富的GPIO接口和硬件ADC是嵌入式项目的理想选择。ILI9341 TFT显示屏2.2寸或2.8寸的240x320分辨率屏幕通过SPI接口通信色彩表现优秀且驱动成熟稳定。电位器或传感器用于提供模拟信号输入最简单的方案是使用10KΩ电位器也可以扩展连接各类模拟输出型传感器如光敏电阻、温度传感器等。1.2 硬件连接方案为了实现简洁美观的布线推荐采用以下连接方式Pico引脚ILI9341引脚功能说明GP0MOSISPI数据输出GP1SCKSPI时钟GP2CS片选信号GP3DC数据/命令选择GP4RST复位信号3V3VCC电源(3.3V)GNDGND地线GP26-ADC输入(连接电位器中端)提示实际接线时建议使用杜邦线或定制短排线保持走线整齐。如果追求极致简洁可以考虑设计一个小型转接板将Pico和屏幕直接插接。2. 开发环境搭建与基础驱动2.1 工具链配置首先需要搭建Pico的开发环境# 安装必要的工具链 sudo apt update sudo apt install cmake gcc-arm-none-eabi libnewlib-arm-none-eabi build-essential # 获取Pico SDK git clone -b master https://github.com/raspberrypi/pico-sdk.git cd pico-sdk git submodule update --init2.2 LVGL库集成LVGL是一个轻量级、高性能的嵌入式图形库特别适合资源有限的微控制器// 在项目中包含LVGL核心头文件 #include lvgl.h #include lvgl/src/lv_core/lv_obj.h #include lvgl/src/lv_widgets/lv_gauge.h // LVGL初始化流程 void lvgl_init() { lv_init(); lv_port_disp_init(); // 显示接口初始化 lv_port_indev_init(); // 输入设备初始化 }2.3 ILI9341驱动优化针对Pico的硬件特性我们可以对标准ILI9341驱动进行优化// 自定义SPI传输函数利用Pico的硬件SPI提高性能 void ili9341_spi_write(uint8_t data) { spi_write_blocking(spi_default, data, 1); } // 优化后的屏幕刷新函数 void ili9341_flush(lv_disp_drv_t *drv, const lv_area_t *area, lv_color_t *color_map) { uint32_t size (area-x2 - area-x1 1) * (area-y2 - area-y1 1); ili9341_set_window(area-x1, area-y1, area-x2, area-y2); ili9341_spi_write_data((uint8_t *)color_map, size * 2); }3. 仪表界面设计与LVGL高级技巧3.1 现代仪表盘设计要素一个专业的电压仪表界面应包含以下视觉元素主表盘圆形或半圆形仪表带有刻度线和数值标记指针动画平滑移动的指针反映实时电压变化数字显示精确到小数点后两位的电压数值状态指示超限报警、单位标识等辅助信息主题风格协调的配色方案和视觉层次3.2 LVGL对象层级构建使用LVGL创建复杂界面的关键在于合理的对象层级// 创建仪表盘主容器 lv_obj_t *container lv_obj_create(lv_scr_act(), NULL); lv_obj_set_size(container, 240, 320); lv_obj_align(container, NULL, LV_ALIGN_CENTER, 0, 0); // 创建表盘对象 lv_obj_t *gauge lv_gauge_create(container, NULL); lv_gauge_set_scale(gauge, 240, 11, 11); // 240度范围11个大刻度11个小刻度 lv_gauge_set_range(gauge, 0, 3300); // 0-3.3V对应0-3300mV lv_gauge_set_critical_value(gauge, 3000); // 设置3.0V为警告阈值 // 添加数字显示标签 lv_obj_t *value_label lv_label_create(container, NULL); lv_label_set_text(value_label, 0.00V); lv_obj_align(value_label, gauge, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);3.3 动画与视觉增强通过LVGL的动画系统让界面更加生动// 创建指针动画 lv_anim_t gauge_anim; lv_anim_init(gauge_anim); lv_anim_set_exec_cb(gauge_anim, (lv_anim_exec_xcb_t)gauge_anim_cb); lv_anim_set_var(gauge_anim, gauge); lv_anim_set_time(gauge_anim, 300); // 300ms动画时长 lv_anim_set_repeat_count(gauge_anim, LV_ANIM_REPEAT_INFINITE); // 动画回调函数 void gauge_anim_cb(lv_obj_t *gauge, lv_anim_value_t value) { uint16_t adc_val adc_read(); float voltage adc_val * (3.3f / 4096.0f); // 更新指针位置 lv_gauge_set_value(gauge, 0, (int)(voltage * 1000)); // 更新数字显示 char buf[16]; snprintf(buf, sizeof(buf), %.2fV, voltage); lv_label_set_text(value_label, buf); // 超限警告效果 if(voltage 3.0f) { lv_obj_set_style_local_line_color(gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED); } else { lv_obj_set_style_local_line_color(gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLUE); } }4. 系统集成与性能优化4.1 主程序架构设计一个健壮的嵌入式应用需要合理的事件循环和任务调度int main() { // 硬件初始化 stdio_init_all(); adc_init(); adc_gpio_init(26); adc_select_input(0); // 显示系统初始化 ili9341_init(); lvgl_init(); // 创建UI界面 create_gauge_ui(); // 主循环 while(1) { lv_task_handler(); // 处理LVGL任务 sleep_ms(5); // 5ms延时 lv_tick_inc(5); // 通知LVGL时间流逝 } }4.2 内存与性能优化技巧在资源有限的Pico上运行LVGL需要注意双缓冲技术减少屏幕撕裂现象局部刷新只更新变化的部分区域内存池预分配常用对象避免碎片SPI优化提高总线时钟频率至30MHz以上// 配置LVGL显示驱动使用双缓冲 static lv_disp_buf_t disp_buf; static lv_color_t buf1[LV_HOR_RES_MAX * 10]; // 行缓冲 static lv_color_t buf2[LV_HOR_RES_MAX * 10]; // 第二缓冲 lv_disp_buf_init(disp_buf, buf1, buf2, LV_HOR_RES_MAX * 10); lv_disp_drv_t disp_drv; lv_disp_drv_init(disp_drv); disp_drv.buffer disp_buf; disp_drv.flush_cb ili9341_flush; lv_disp_drv_register(disp_drv);4.3 外壳设计与成品展示为了让项目更加完整可以考虑3D打印一个精致的外壳尺寸设计精确测量PCB和屏幕的安装尺寸散热考虑在关键芯片位置设计通风孔接口预留为USB、ADC输入等保留开口美学设计圆角、表面纹理等细节处理使用FreeCAD或Fusion 360设计外壳然后通过3D打印实现。最终成品可以放置在桌面上既是一个实用的电压监测工具也是一个展示技术能力的精美摆件。5. 功能扩展与进阶玩法基础功能实现后可以考虑以下扩展方向多通道监测同时显示多个ADC通道的电压数据记录添加SD卡存储历史数据无线传输通过蓝牙或WiFi将数据发送到手机主题切换实现多种视觉风格动态切换自动校准软件校准ADC参考电压提高精度例如实现主题切换功能的代码片段// 定义不同主题样式 static lv_style_t modern_style; static lv_style_t classic_style; void create_styles() { // 现代风格 lv_style_init(modern_style); lv_style_set_bg_color(modern_style, LV_STATE_DEFAULT, LV_COLOR_BLACK); lv_style_set_text_color(modern_style, LV_STATE_DEFAULT, LV_COLOR_CYAN); // 经典风格 lv_style_init(classic_style); lv_style_set_bg_color(classic_style, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_text_color(classic_style, LV_STATE_DEFAULT, LV_COLOR_BLACK); } void switch_theme(bool modern) { lv_style_t *style modern ? modern_style : classic_style; lv_obj_add_style(lv_scr_act(), LV_OBJ_PART_MAIN, style); }这个项目从硬件连接到软件设计完整展示了如何用Raspberry Pi Pico和LVGL打造一个实用又美观的桌面仪表。在实际调试过程中我发现SPI时钟频率和LVGL的刷新率设置对整体流畅度影响很大经过多次测试最终将SPI时钟设为40MHzLVGL的刷新间隔设为5ms获得了最佳的视觉效果和响应速度。
用Raspberry Pi Pico和LVGL做个桌面小仪表：ILI9341屏显示ADC电压（附完整代码）
发布时间：2026/7/6 14:28:43
用Raspberry Pi Pico和LVGL打造精致桌面电压仪表从硬件搭建到UI设计实战在创客的工作台上总少不了一些既实用又能彰显技术品味的小工具。今天我们要实现的就是一个基于Raspberry Pi Pico和ILI9341显示屏的桌面电压仪表——它不仅能够实时显示ADC采集的电压数据还能通过LVGL打造出媲美商业产品的精致界面。这个项目完美融合了嵌入式开发、硬件交互和UI设计的乐趣最终成品可以成为你工作台上兼具功能性与观赏性的科技摆件。1. 项目规划与硬件选型1.1 核心组件解析这个项目的核心硬件由三部分组成Raspberry Pi Pico这款性价比极高的微控制器板搭载RP2040双核ARM Cortex-M0处理器运行频率可达133MHz具备丰富的GPIO接口和硬件ADC是嵌入式项目的理想选择。ILI9341 TFT显示屏2.2寸或2.8寸的240x320分辨率屏幕通过SPI接口通信色彩表现优秀且驱动成熟稳定。电位器或传感器用于提供模拟信号输入最简单的方案是使用10KΩ电位器也可以扩展连接各类模拟输出型传感器如光敏电阻、温度传感器等。1.2 硬件连接方案为了实现简洁美观的布线推荐采用以下连接方式Pico引脚ILI9341引脚功能说明GP0MOSISPI数据输出GP1SCKSPI时钟GP2CS片选信号GP3DC数据/命令选择GP4RST复位信号3V3VCC电源(3.3V)GNDGND地线GP26-ADC输入(连接电位器中端)提示实际接线时建议使用杜邦线或定制短排线保持走线整齐。如果追求极致简洁可以考虑设计一个小型转接板将Pico和屏幕直接插接。2. 开发环境搭建与基础驱动2.1 工具链配置首先需要搭建Pico的开发环境# 安装必要的工具链 sudo apt update sudo apt install cmake gcc-arm-none-eabi libnewlib-arm-none-eabi build-essential # 获取Pico SDK git clone -b master https://github.com/raspberrypi/pico-sdk.git cd pico-sdk git submodule update --init2.2 LVGL库集成LVGL是一个轻量级、高性能的嵌入式图形库特别适合资源有限的微控制器// 在项目中包含LVGL核心头文件 #include lvgl.h #include lvgl/src/lv_core/lv_obj.h #include lvgl/src/lv_widgets/lv_gauge.h // LVGL初始化流程 void lvgl_init() { lv_init(); lv_port_disp_init(); // 显示接口初始化 lv_port_indev_init(); // 输入设备初始化 }2.3 ILI9341驱动优化针对Pico的硬件特性我们可以对标准ILI9341驱动进行优化// 自定义SPI传输函数利用Pico的硬件SPI提高性能 void ili9341_spi_write(uint8_t data) { spi_write_blocking(spi_default, data, 1); } // 优化后的屏幕刷新函数 void ili9341_flush(lv_disp_drv_t *drv, const lv_area_t *area, lv_color_t *color_map) { uint32_t size (area-x2 - area-x1 1) * (area-y2 - area-y1 1); ili9341_set_window(area-x1, area-y1, area-x2, area-y2); ili9341_spi_write_data((uint8_t *)color_map, size * 2); }3. 仪表界面设计与LVGL高级技巧3.1 现代仪表盘设计要素一个专业的电压仪表界面应包含以下视觉元素主表盘圆形或半圆形仪表带有刻度线和数值标记指针动画平滑移动的指针反映实时电压变化数字显示精确到小数点后两位的电压数值状态指示超限报警、单位标识等辅助信息主题风格协调的配色方案和视觉层次3.2 LVGL对象层级构建使用LVGL创建复杂界面的关键在于合理的对象层级// 创建仪表盘主容器 lv_obj_t *container lv_obj_create(lv_scr_act(), NULL); lv_obj_set_size(container, 240, 320); lv_obj_align(container, NULL, LV_ALIGN_CENTER, 0, 0); // 创建表盘对象 lv_obj_t *gauge lv_gauge_create(container, NULL); lv_gauge_set_scale(gauge, 240, 11, 11); // 240度范围11个大刻度11个小刻度 lv_gauge_set_range(gauge, 0, 3300); // 0-3.3V对应0-3300mV lv_gauge_set_critical_value(gauge, 3000); // 设置3.0V为警告阈值 // 添加数字显示标签 lv_obj_t *value_label lv_label_create(container, NULL); lv_label_set_text(value_label, 0.00V); lv_obj_align(value_label, gauge, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);3.3 动画与视觉增强通过LVGL的动画系统让界面更加生动// 创建指针动画 lv_anim_t gauge_anim; lv_anim_init(gauge_anim); lv_anim_set_exec_cb(gauge_anim, (lv_anim_exec_xcb_t)gauge_anim_cb); lv_anim_set_var(gauge_anim, gauge); lv_anim_set_time(gauge_anim, 300); // 300ms动画时长 lv_anim_set_repeat_count(gauge_anim, LV_ANIM_REPEAT_INFINITE); // 动画回调函数 void gauge_anim_cb(lv_obj_t *gauge, lv_anim_value_t value) { uint16_t adc_val adc_read(); float voltage adc_val * (3.3f / 4096.0f); // 更新指针位置 lv_gauge_set_value(gauge, 0, (int)(voltage * 1000)); // 更新数字显示 char buf[16]; snprintf(buf, sizeof(buf), %.2fV, voltage); lv_label_set_text(value_label, buf); // 超限警告效果 if(voltage 3.0f) { lv_obj_set_style_local_line_color(gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED); } else { lv_obj_set_style_local_line_color(gauge, LV_GAUGE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLUE); } }4. 系统集成与性能优化4.1 主程序架构设计一个健壮的嵌入式应用需要合理的事件循环和任务调度int main() { // 硬件初始化 stdio_init_all(); adc_init(); adc_gpio_init(26); adc_select_input(0); // 显示系统初始化 ili9341_init(); lvgl_init(); // 创建UI界面 create_gauge_ui(); // 主循环 while(1) { lv_task_handler(); // 处理LVGL任务 sleep_ms(5); // 5ms延时 lv_tick_inc(5); // 通知LVGL时间流逝 } }4.2 内存与性能优化技巧在资源有限的Pico上运行LVGL需要注意双缓冲技术减少屏幕撕裂现象局部刷新只更新变化的部分区域内存池预分配常用对象避免碎片SPI优化提高总线时钟频率至30MHz以上// 配置LVGL显示驱动使用双缓冲 static lv_disp_buf_t disp_buf; static lv_color_t buf1[LV_HOR_RES_MAX * 10]; // 行缓冲 static lv_color_t buf2[LV_HOR_RES_MAX * 10]; // 第二缓冲 lv_disp_buf_init(disp_buf, buf1, buf2, LV_HOR_RES_MAX * 10); lv_disp_drv_t disp_drv; lv_disp_drv_init(disp_drv); disp_drv.buffer disp_buf; disp_drv.flush_cb ili9341_flush; lv_disp_drv_register(disp_drv);4.3 外壳设计与成品展示为了让项目更加完整可以考虑3D打印一个精致的外壳尺寸设计精确测量PCB和屏幕的安装尺寸散热考虑在关键芯片位置设计通风孔接口预留为USB、ADC输入等保留开口美学设计圆角、表面纹理等细节处理使用FreeCAD或Fusion 360设计外壳然后通过3D打印实现。最终成品可以放置在桌面上既是一个实用的电压监测工具也是一个展示技术能力的精美摆件。5. 功能扩展与进阶玩法基础功能实现后可以考虑以下扩展方向多通道监测同时显示多个ADC通道的电压数据记录添加SD卡存储历史数据无线传输通过蓝牙或WiFi将数据发送到手机主题切换实现多种视觉风格动态切换自动校准软件校准ADC参考电压提高精度例如实现主题切换功能的代码片段// 定义不同主题样式 static lv_style_t modern_style; static lv_style_t classic_style; void create_styles() { // 现代风格 lv_style_init(modern_style); lv_style_set_bg_color(modern_style, LV_STATE_DEFAULT, LV_COLOR_BLACK); lv_style_set_text_color(modern_style, LV_STATE_DEFAULT, LV_COLOR_CYAN); // 经典风格 lv_style_init(classic_style); lv_style_set_bg_color(classic_style, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_text_color(classic_style, LV_STATE_DEFAULT, LV_COLOR_BLACK); } void switch_theme(bool modern) { lv_style_t *style modern ? modern_style : classic_style; lv_obj_add_style(lv_scr_act(), LV_OBJ_PART_MAIN, style); }这个项目从硬件连接到软件设计完整展示了如何用Raspberry Pi Pico和LVGL打造一个实用又美观的桌面仪表。在实际调试过程中我发现SPI时钟频率和LVGL的刷新率设置对整体流畅度影响很大经过多次测试最终将SPI时钟设为40MHzLVGL的刷新间隔设为5ms获得了最佳的视觉效果和响应速度。
)
