嵌入式物联网智能硬件嵌入式GUI硬件开发【免费下载链接】HoloCubic带网络功能的伪全息透明显示桌面站项目地址https://gitcode.com/gh_mirrors/ho/HoloCubic点击查看免费下载本篇文章围绕 HoloCubic 固件所采用的 LVGL 图形库中的lv_imgbtn图像按钮控件展开以官方示例lv_ex_imgbtn_1为实操主线完整还原其代码、状态机与底层实现。读完本文你将掌握如何在 LVGL 中创建带多状态图片的按钮、如何为按下/选中状态配置样式以及lv_imgbtn的平铺tiled模式、配置开关与依赖关系可直接复用于 HoloCubic 桌面站等嵌入式 UI 开发。一、示例文档与示例代码的位置在 LVGL 示例体系中每个控件示例目录下都有一份index.rst作为索引说明。本文讨论的文档位于示例索引文档该文档以.. lv_example::指令声明示例名称与语言类型指向的完整可运行 C 代码为示例源码 lv_ex_imgbtn_1.c同一示例在 HoloCubic 固件目录2.Firmware/HoloCubic-fw/lib/lvgl/与 Windows 模拟器工程3.Software/LvglSimulator/vs2019_proj/lv_examples/src/lv_ex_widgets/lv_ex_imgbtn/lv_ex_imgbtn_1.c中均有同步副本可直接在模拟器中编译预览。运行该示例后屏幕中央会出现一个带 Button 文字标签的图形按钮正常为绿色、选中checked后切换为蓝色按下时整体变暗效果如下图所示二、示例代码逐段详解lv_ex_imgbtn_1的完整实现如下来自 lv_ex_imgbtn_1.c#include ../../../lv_examples.h #if LV_USE_IMGBTN void lv_ex_imgbtn_1(void) { LV_IMG_DECLARE(imgbtn_green); LV_IMG_DECLARE(imgbtn_blue); /*Darken the button when pressed*/ static lv_style_t style; lv_style_init(style); lv_style_set_image_recolor_opa(style, LV_STATE_PRESSED, LV_OPA_30); lv_style_set_image_recolor(style, LV_STATE_PRESSED, LV_COLOR_BLACK); lv_style_set_text_color(style, LV_STATE_DEFAULT, LV_COLOR_WHITE); /*Create an Image button*/ lv_obj_t * imgbtn1 lv_imgbtn_create(lv_scr_act(), NULL); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_RELEASED, imgbtn_green); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PRESSED, imgbtn_green); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_CHECKED_RELEASED, imgbtn_blue); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_CHECKED_PRESSED, imgbtn_blue); lv_imgbtn_set_checkable(imgbtn1, true); lv_obj_add_style(imgbtn1, LV_IMGBTN_PART_MAIN, style); lv_obj_align(imgbtn1, NULL, LV_ALIGN_CENTER, 0, -40); /*Create a label on the Image button*/ lv_obj_t * label lv_label_create(imgbtn1, NULL); lv_label_set_text(label, Button); } #endif2.1 图片声明与资源引入LV_IMG_DECLARE(imgbtn_green)与LV_IMG_DECLARE(imgbtn_blue)用于声明两个图像资源的 C 数组符号。这两个资源定义在同目录下的 imgbtn_green.c 与 imgbtn_blue.c 中是以imgbtn_green_map[]、imgbtn_blue_map[]形式存储的像素数组内部按LV_COLOR_DEPTH分支提供不同位深如 1/8 位深下为 Alpha 8 位 RGB332 的打包格式。这种以 C 数组内嵌图片的方式无需文件系统非常适合 ESP32 等嵌入式平台。2.2 按下变暗的交互样式示例为按钮定义了一个静态样式static lv_style_t style; lv_style_init(style); lv_style_set_image_recolor_opa(style, LV_STATE_PRESSED, LV_OPA_30); lv_style_set_image_recolor(style, LV_STATE_PRESSED, LV_COLOR_BLACK); lv_style_set_text_color(style, LV_STATE_DEFAULT, LV_COLOR_WHITE);lv_style_set_image_recolor_opa设置图片重着色透明度。按下LV_STATE_PRESSED时为LV_OPA_3030% 不透明度配合黑色重着色即可实现按下整体变暗的视觉效果lv_style_set_image_recolor设置重着色颜色为纯黑lv_style_set_text_color在默认状态下将按钮文字设为白色。2.3 创建按钮并绑定四种状态的图片lv_obj_t * imgbtn1 lv_imgbtn_create(lv_scr_act(), NULL); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_RELEASED, imgbtn_green); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PRESSED, imgbtn_green); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_CHECKED_RELEASED, imgbtn_blue); lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_CHECKED_PRESSED, imgbtn_blue);lv_imgbtn_create(lv_scr_act(), NULL)以当前活动屏幕为父对象创建图像按钮第二个参数传NULL表示不复制的已有对象。随后用lv_imgbtn_set_src为四种状态分别指定图片LV_BTN_STATE_RELEASED释放状态显示绿色图LV_BTN_STATE_PRESSED按下状态仍显示绿色图但配合样式重着色实现变暗LV_BTN_STATE_CHECKED_RELEASED选中后释放切换为蓝色图LV_BTN_STATE_CHECKED_PRESSED选中后按下继续显示蓝色图。lv_imgbtn_set_checkable(imgbtn1, true)开启可选中能力使按钮在每次点击后于普通/选中两种模式之间来回切换toggle这正是四种状态能够全部被触发的关键前提。2.4 对齐与标签lv_obj_add_style(imgbtn1, LV_IMGBTN_PART_MAIN, style); lv_obj_align(imgbtn1, NULL, LV_ALIGN_CENTER, 0, -40); lv_obj_t * label lv_label_create(imgbtn1, NULL); lv_label_set_text(label, Button);样式挂在LV_IMGBTN_PART_MAIN主部件上按钮相对父对象水平居中、垂直方向向上偏移 40 像素再以按钮本身为父对象创建label子对象并设置文本 Button。三、lv_imgbtn 的状态机与 API 速查3.1 六种按钮状态lv_imgbtn完整继承了按钮的状态枚举定义见 lv_btn.henum { LV_BTN_STATE_RELEASED, LV_BTN_STATE_PRESSED, LV_BTN_STATE_DISABLED, LV_BTN_STATE_CHECKED_RELEASED, LV_BTN_STATE_CHECKED_PRESSED, LV_BTN_STATE_CHECKED_DISABLED, _LV_BTN_STATE_LAST, };其中_LV_BTN_STATE_LAST用于标记状态总数。图像按钮在内部为每个状态各保存一张图片指针见下文img_src_mid[_LV_BTN_STATE_LAST]数组因此最多可为 6 个状态各配置独立图片。示例只用了其中 4 个可交互状态DISABLED相关状态未设置图片。3.2 核心 API根据 lv_imgbtn.h 的声明常用接口包括API说明lv_imgbtn_create(par, copy)创建图像按钮par为父对象copy非空时复制该对象lv_imgbtn_set_src(imgbtn, state, src)为指定状态设置图片源C 数组或文件路径lv_imgbtn_set_state(imgbtn, state)直接设置按钮状态lv_imgbtn_toggle(imgbtn)在 ON/OFF 状态间切换lv_imgbtn_set_checkable(imgbtn, tgl)开启/关闭 toggle 能力底层委托给lv_btn_set_checkablelv_imgbtn_get_src(imgbtn, state)获取指定状态的图片源lv_imgbtn_get_state(imgbtn)获取当前状态委托给lv_btn_get_statelv_imgbtn_get_checkable(imgbtn)查询 toggle 是否开启四、源码级原理lv_imgbtn 是如何工作的4.1 扩展数据结构lv_imgbtn在按钮lv_btn基础上扩展了自己的私有数据见 lv_imgbtn.htypedef struct { lv_btn_ext_t btn; /*Ext. of ancestor*/ const void * img_src_mid[_LV_BTN_STATE_LAST]; /*Store center images to each state*/ #if LV_IMGBTN_TILED const void * img_src_left[_LV_BTN_STATE_LAST]; /*Store left side images to each state*/ const void * img_src_right[_LV_BTN_STATE_LAST]; /*Store right side images to each state*/ #endif lv_img_cf_t act_cf; /*Color format of the currently active image*/ uint8_t tiled : 1; /*1: the middle src will be repeated to fill the user defined width*/ } lv_imgbtn_ext_t;要点img_src_mid[]按状态索引保存中部/整张图片当开启LV_IMGBTN_TILED时额外保存img_src_left[]与img_src_right[]即左右两端固定图片、中间图片横向平铺填充的三段式按钮资源act_cf记录当前激活图片的像素格式供绘制阶段的覆盖检测使用tiled位标记当前是否处于平铺模式。4.2 创建流程从 lv_imgbtn.c 的实现可以看到lv_imgbtn_create先调用lv_btn_create创建祖先对象再通过lv_obj_allocate_ext_attr追加lv_imgbtn_ext_t扩展数据随后将控件的 signal 回调设为lv_imgbtn_signal、design 回调设为lv_imgbtn_design。这意味着它复用了按钮的输入/状态处理逻辑仅对绘制做了自定义属于典型的 LVGL 控件继承模式。创建新对象时会调用lv_theme_apply(imgbtn, LV_THEME_IMGBTN)应用主题样式若传入copy参数则逐项拷贝原对象的图片与 tiled 标志。4.3 图片设置与平铺模式lv_imgbtn_set_src的实现lv_imgbtn.c把传入的src存入img_src_mid[state]同时将tiled清 0 并触发refr_img重绘。而平铺接口lv_imgbtn_set_src_tiled仅当LV_IMGBTN_TILED开启时编译接收src_left、src_mid、src_right三张图片其中src_mid建议为 1 像素宽的图片以便横向重复填充且源码中明确拒绝 symbol字体图标作为平铺图片源。4.4 绘制阶段在lv_imgbtn_design中控件会读取LV_IMGBTN_PART_MAIN部件的背景、边框、padding、圆角裁剪等样式进行矩形背景绘制随后根据当前状态与tiled标志选择对应图片绘制若存在label子对象则继续绘制文字。覆盖检测LV_DESIGN_COVER_CHK仅在当前图片为LV_IMG_CF_TRUE_COLOR或LV_IMG_CF_RAW且完全覆盖裁剪区域时返回 COVER以此参与 LVGL 的脏矩形与图层优化。五、启用与配置lv_conf.h 中的开关lv_imgbtn默认由配置宏控制编译相关配置位于 LVGL 的lv_conf.h。HoloCubic 固件实际使用的配置见 2.Firmware/HoloCubic-fw/lib/lvgl/lv_conf.h#define LV_USE_IMGBTN 1 #if LV_USE_IMGBTN # define LV_IMGBTN_TILED 0 #endifLV_USE_IMGBTN总开关置 1 编译图像按钮控件。HoloCubic 固件与 Windows 模拟器工程3.Software/LvglSimulator/vs2019_proj/lv_conf.h均已开启LV_IMGBTN_TILED平铺模式开关。置 1 后可调用lv_imgbtn_set_src_tiled使用左-中-右三段图片自动拉伸出任意宽度按钮代价是增加两张状态图数组的内存占用当前 HoloCubic 固件中该值为 0即使用整张图片模式。依赖关系lv_imgbtn强依赖lv_btn。源码 lv_imgbtn.h 中通过预处理检查强制要求#if LV_USE_BTN 0 #error lv_imgbtn: lv_btn is required. Enable it in lv_conf.h (LV_USE_BTN 1) #endif因此启用lv_imgbtn前必须同时保持LV_USE_BTN为 1。六、在 HoloCubic 中的参考应用与验证方式HoloCubic 是带网络功能的伪全息透明显示桌面站其固件2.Firmware/HoloCubic-fw基于 ESP32 与 LVGL 构建图形界面源码目录src/下包含 gui_guider.c、setup_scr_home.c 等由 GUI Guider 生成的界面代码。lv_imgbtn适合为这类小屏幕界面提供视觉反馈明确的图标式按钮如菜单项、开关类控件只需准备两套按钮素材普通/选中即可获得按下变暗、选中换色的完整交互反馈无需手工绘制矩形背景。验证方法推荐两条路径PC 模拟器预览仓库提供了基于 SDL2 的 LvglSimulator 工程其中 lv_ex_imgbtn_1.c 与固件版本同步可在 Visual Studio 2019 中直接编译运行观察按钮状态切换与样式效果无需烧录硬件固件集成将示例逻辑迁移到 HoloCubic 固件时只需保证lv_conf.h中LV_USE_IMGBTN为 1并把LV_IMG_DECLARE对应的图片 C 数组加入编译即可。七、注意事项MicroPython 暂无示例原索引文档中 MicroPython 小节标注 No examples yet.即当前仅提供 C 语言版本示例tiled 模式不支持 symbol平铺模式下lv_imgbtn_set_src_tiled会对三类图片源做lv_img_src_get_type检查symbol 类型会被拒绝见 lv_imgbtn.c样式状态选择器示例中变暗效果依赖LV_STATE_PRESSED状态的image_recolor样式属性若不开启checkable则CHECKED_*状态永远不会触发蓝色图片也不会显示图片资源格式示例图片以 C 数组形式内嵌见 imgbtn_green.c实际项目中也可以使用文件系统路径作为src但需保证图片色彩格式与LV_COLOR_DEPTH匹配否则act_cf无法正确驱动覆盖检测与绘制。以上内容完整覆盖了 LVGL 图像按钮从示例代码、状态机、底层实现到工程配置的各个环节可直接作为 HoloCubic 固件或同类嵌入式 UI 项目中图像按钮开发的参考资料。赞分享嵌入式物联网智能硬件嵌入式GUI硬件开发【免费下载链接】HoloCubic带网络功能的伪全息透明显示桌面站项目地址https://gitcode.com/gh_mirrors/ho/HoloCubic点击查看免费下载相关推荐LVGL 图像按钮 lv_imgbtn 详解基于三段式图片的立体按键控件LVGL 图像按钮 lv_imgbtn 详解基于三段式图片的立体按键控件 导读 lv_imgbtn Image button是 LVGL 控件库中一类以智能硬件嵌入式硬件开发OMIU o-button 按钮组件完全指南Props 属性全解与源码级实现原理OMIU o button 按钮组件完全指南Props 属性全解与源码级实现原理 导读 本文基于 packages/omiu/src/components/b前端Web框架UI组件LVGL Spinbox 控件实战从 Simple Spinbox 示例到源码级原理解析基于 X-TRACK 仓库内置 LVGLLVGL Spinbox 控件实战从 Simple Spinbox 示例到源码级原理解析基于 X TRACK 仓库内置 LVGL 本指南以 LVGL 官方智能硬件嵌入式硬件开发上一篇5步修复老Mac显卡驱动OpenCore Legacy Patcher终极指南下一篇Logoly SEO优化秘诀为什么这款免费Logo生成工具能在设计领域排名前列创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考