移植NXP GUI Guider的界面到小安派SCP4.3

[复制链接]
查看433 | 回复7 | 2024-4-10 21:19:57 | 显示全部楼层 |阅读模式
本帖最后由 yuyy1989 于 2024-5-18 17:16 编辑

GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具,可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性,如小部件、动画和样式来创建GUI,而只需少量代码或根本无需任何代码。
本帖先介绍如何移植GUI Guider内置的模板界面到小安派SCP4.3,暂时不介绍如何使用GUI Guider设计界面
使用时需要注意GUI Guider的版本和支持的LVGL版本绑定,小安派的LVGL版本是8.3.7,GUI Guider 1.6.1的LVGL版本是8.3.5,而1.7.0的LVGL版本是8.3.10,这里使用1.6.1的版本为小安派SCP4.3移植界面
GUI Guider 下载地址,下载需要注册账号
https://www.nxp.com.cn/design/de ... i-guider:GUI-GUIDER
安装后打开
微信截图_20240410195607.png
选择创建新项目进入LVGL版本选择

微信截图_20240410195653.png
选择v8.3.5,后点击下一步
微信截图_20240410195709.png
小安派没有在官方设备模板里,这里选择模拟器,然后点击下一步
微信截图_20240410195728.png
这里随便选个界面模板,点击下一步
微信截图_20240410195802.png
输入工程名称,屏幕默认分辨率是480x272和小安派SCP4.3的屏幕分辨率一致不用修改,点击创建
微信截图_20240410200138.png
之后会打开工程姐界面

微信截图_20240410200219.png
如果是第一次使用到这里时页面都是英文的,可以点击右上角切换为中文
微信截图_20240410200206.png
点击右上角的三角,选择C之后会自动生成这个界面的LVGL代码
微信截图_20240410200414.png
最后会弹出一个模拟器界面用来预览
微信截图_20240410200847.png
打开工程文件夹,这里的custom和generated是移植需要用到的
微信截图_20240410200925.png
打开SCP4.3的工程文件夹,删掉原来的UI文件夹,新建一个文件夹用来放刚才那两个文件夹
微信截图_20240410211610.png
把刚才那两个文件夹复制到新建的文件夹中,修改SCP4.3工程根目录下的CMakeLists.txt


  1. include(proj.conf)

  2. find_package(bouffalo_sdk REQUIRED HINTS $ENV{BL_SDK_BASE})

  3. file(GLOB_RECURSE sources "${CMAKE_CURRENT_SOURCE_DIR}/guider_ui/*.c")
  4. file(GLOB_RECURSE app "${CMAKE_CURRENT_SOURCE_DIR}/app/*.c")

  5. # User
  6. # sdk_add_compile_definitions(-DCONFIG_CLI_CMD_ENABLE)
  7. sdk_add_compile_definitions(-DLV_LVGL_H_INCLUDE_SIMPLE)

  8. sdk_add_include_directories(.)

  9. sdk_add_include_directories(guider_ui)
  10. sdk_add_include_directories(guider_ui/custom)
  11. sdk_add_include_directories(guider_ui/generated)
  12. sdk_add_include_directories(guider_ui/generated/guider_customer_fonts)
  13. sdk_add_include_directories(guider_ui/generated/guider_fonts)
  14. sdk_add_include_directories(guider_ui/generated/images)
  15. sdk_add_include_directories(app)
  16. target_sources(app PRIVATE ${sources} ${app})
  17. sdk_set_main_file(main.c)
  18. get_filename_component(PROJECT_NAME ${CMAKE_CURRENT_SOURCE_DIR} NAME)
  19. project(${PROJECT_NAME})
复制代码


修改lv_conf.h,增加2个宏定义
微信截图_20240410211736.png
修改main.c,添加头文件并注释掉WAKE_UP_ENABLE这个宏定义
微信截图_20240410202742.png
修改main函数
  1. lv_ui guider_ui;
  2. int main(void)
  3. {
  4.     board_init();


  5.     // printf("HeapSize:%d\r\n",xPortGetFreeHeapSize());
  6.     tcpip_init(NULL, NULL);
  7.     //wifi_start_firmware_task();
  8.     lwip_sntp_init();

  9.     bflb_mtd_init();
  10.     easyflash_init();

  11.     /* lvgl init */
  12.     lv_log_register_print_cb(lv_log_print_g_cb);
  13.     lv_init();
  14.     lv_port_disp_init();

  15.     //ui_init();
  16.     setup_ui(&guider_ui);
  17.     events_init(&guider_ui);

  18.     printf("lv_task_handler\r\n");
  19.     printf("lvgl success\r\n");
  20.     xTaskCreate(lvgl_task, (char*)"lvgl", LVGL_STACK_SIZE, NULL, LVGL_TASK_PRIORITY, &lvgl_TaskHandle);
  21.     xTaskCreate(button_process_task, (char*)"button_proc_task", button_PROCESS_STACK_SIZE, NULL, button_PROCESS_PRIORITY, &button_process_task_hd);
  22.     // printf("HeapSize:%d\r\n",xPortGetFreeHeapSize());

  23. #ifdef WAKE_UP_ENABLE
  24.     xTaskCreate(app_ble_task, (char*)"app_ble_task", APPBLE_PROCESS_STACK_SIZE, NULL, APPBLE_PROCESS_PRIORITY, &app_ble_process_task_hd);
  25. #endif
  26.     vTaskStartScheduler();
  27.     // while (1) {
  28.     //     lv_task_handler();
  29.     //     bflb_mtimer_delay_ms(1);
  30.     // }

  31.     while (1) {
  32.     }
  33. }
复制代码
我这里不注释掉wifi_start_firmware_task()就无法运行,原版工程也一样
编译并烧录,运行效果如图
微信图片_20240410203154.jpg



回复

使用道具 举报

爱笑 | 2024-4-11 08:32:48 | 显示全部楼层
不错不错!
用心做好保姆工作
回复

使用道具 举报

1084504793 | 2024-4-11 09:27:55 | 显示全部楼层
回复

使用道具 举报

lovzx | 2024-4-11 09:30:38 | 显示全部楼层
学习
回复

使用道具 举报

1055173307 | 2024-4-11 19:11:42 | 显示全部楼层
回复

使用道具 举报

lazy | 2024-4-11 22:09:53 | 显示全部楼层
回复

使用道具 举报

干簧管 | 2024-4-12 09:10:35 | 显示全部楼层
回复

使用道具 举报

axkkj | 2024-4-24 09:59:03 来自手机 | 显示全部楼层
打卡学习!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则