ESP32 LVGL Gui-Guider的移植

使用参考:

ESP32系列之LVGL(三):Gui-Guider的使用_esp32 lvgl-CSDN博客

1、拷贝文件:

按照上面的文章,使用Gui-Guider软件生成C代码之后,custom和generated是我们要使用到的文件, 其中custom是用来存放gui工程中我们自定义的一些代码,实际上如果没有自定义代码的话也可以不用,generated则是Gui-Guider工程生成的C代码,我们主要将这部分导入到我们的esp32s3工程中。

到esp32的工程main目录下(已经移植好LVGL的工程),创建一个ui文件夹,将custom和generated放入此文件夹内。ui文件夹可以选择放到工程里的components文件夹内成为一个组件,也可以直接放到main文件夹下。这里选择直接放到main文件夹下,工程结构如下:

修改main文件夹下的CMakeLists.txt:

原来的CMakeLists.txt文件如下:

idf_component_register(
    SRC_DIRS .
    INCLUDE_DIRS .
)

修改之后的CMakeLists.txt文件如下:

file(GLOB_RECURSE srcs *.c
                    ui/custom/*.c
                    ui/generated/*.c
                    ui/generated/guider_customer_fonts/*.c
                    ui/generated/guider_fonts/*.c
                    ui/generated/images/*.c
                    )
 
set(include_dirs 
    . 
    ui/custom 
    ui/generated 
    ui/generated/guider_customer_fonts
    ui/generated/guider_fonts
    ui/generated/images
    )

idf_component_register(
    SRC_DIRS .
    SRCS ${srcs}
    INCLUDE_DIRS ${include_dirs}
)

这块很重要,设置正确才能编译通过。

修改main.c:

 主要修改对文件的引用,定义lv_ui guider_ui变量,调用ui入口setup_ui()即可。

添加h文件

#include "gui_guider.h"
#include "custom.h"

定义全局ui变量

 
lv_ui guider_ui;

添加运行代码

setup_ui(&guider_ui);

整体如下:

#include <stdio.h>
#include "string.h"
#include "esp_log.h"
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "qmsd_board.h"
#include "qmsd_utils.h"
#include "lvgl.h"

 
#include "gui_guider.h"
#include "custom.h"
 
lv_ui guider_ui;

#define TAG "QMSD-MAIN"

void gui_user_init() {

    setup_ui(&guider_ui);
}

void app_main(void) {
    gpio_install_isr_service(ESP_INTR_FLAG_SHARED);
    qmsd_board_config_t config = QMSD_BOARD_DEFAULT_CONFIG;
    qmsd_board_init(&config);
    printf("Fine qmsd!\r\n");
}

### 关于Gui Guider控件的使用说明 #### Gui Guider 安装与文档位置 用户手册位于`GUI-Guider\resources`目录下,在这里可以找到有关如何基于Gui Guider进行LVGL页面绘制和移植的具体指导[^1]。 #### 添加编译头文件路径 为了使项目能够识别由Gui Guider生成的界面及其组件定义,需在Keil中配置额外的包含路径。具体来说,应该加入以下三个文件夹的位置: - `../Middlewares/LVGL/myGUI/custom` - `../Middlewares/LVGL/myGUI/generated` - `../Middlewares/LVGL/myGUI/generated/guider_customer_fonts` 这些设置确保了所有必要的源码都能被正确解析并参与编译过程。不过,如果开发者更倾向于手动指定,则可以直接通过预处理指令来引入特定头文件,比如: ```c #include "./Middlewares/LVGL/myGUI/custom/your_custom_file.h" ``` 此外,对于任何利用Gui Guider创建的应用程序而言,下面两行代码几乎是必不可少的部分,它们负责导入整个图形化设计以及关联的动作响应逻辑: ```c #include "gui_guider.h" // 导入Gui Guider 生成的界面和控件声明 #include "events_init.h" // 导入Gui Guider 生成的初始化事件、回调函数 lv_ui guider_ui; // 声明用于存储UI状态的对象实例 ``` 以上操作完成后,便可以根据实际需求进一步开发应用程序,并最终完成项目的烧录工作[^2]。 #### 示例:简单的按钮点击事件处理 假设已经按照上述方法完成了基本环境搭建,现在想要实现当某个按钮被按下时触发相应动作的效果,那么可以在`events_init.c`或其他适当的地方编写类似这样的C语言代码片段: ```c void my_button_event_cb(lv_obj_t * obj, lv_event_t event){ if(event == LV_EVENT_CLICKED){ printf("Button clicked!\n"); } } // 将该回调绑定到具体的按钮对象上 lv_obj_add_event_cb(guider_ui.button_0, my_button_event_cb, LV_EVENT_ALL, NULL); ``` 这段示例展示了怎样监听来自界面上某元素(此处为button_0)的操作行为,并执行自定义的任务——在此情况下即打印一条消息至控制台。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值