GUI guider介绍

GUI Guider是恩智浦（NXP）推出的免费图形化界面开发工具，专为嵌入式系统设计。它基于开源的LVGL（Light and Versatile Graphics Library），通过可视化拖拽界面简化嵌入式GUI开发流程，支持快速原型设计和代码生成。

创建GUI Guider工程

创建新工程

选择LVGL版本

官方示例工程

Application

Widget

使用MultiLanguage示例

1. 填充项目名称: MultiLanguageDemo
2. ColorDepth: 16bit, 不同的显示屏有不同的配置，譬如有的屏幕支持RGB565,有的支持RGB888
3. PanelType, 这里使用默认的480*272
   

在simulator中运行

运行效果

默认是简体中文，鼠标点击English则切换到English

如何应用到设备上

我这里是使用的ESP32-S3, IDF 5.4.1

目录结构

CMakeLists.txt

file(GLOB_RECURSE SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/custom/*.c ${CMAKE_CURRENT_SOURCE_DIR}/generated/*.c ${CMAKE_CURRENT_SOURCE_DIR}/generated/images/*.c)

set(include_dirs 
    ${CMAKE_CURRENT_SOURCE_DIR}/custom
    ${CMAKE_CURRENT_SOURCE_DIR}/generated
    ${CMAKE_CURRENT_SOURCE_DIR}/generated/guider_customer_fonts
    ${CMAKE_CURRENT_SOURCE_DIR}/generated/guider_fonts
    )
idf_component_register(SRCS ${SOURCES}
                    INCLUDE_DIRS ${include_dirs}
                    REQUIRES LVGL)

Multi Language代码分析

events_init_screen

ui->screen_btn_chinese：绑定了 screen_btn_chinese_event_handler，用于处理中文按钮的事件。
ui->screen_btn_english：绑定了 screen_btn_english_event_handler，用于处理英文按钮的事件。

通过这种方式，代码实现了事件与 UI 元素的解耦，使得每个 UI 元素的事件处理逻辑可以独立定义和维护。

void events_init_screen (lv_ui *ui)
{
    lv_obj_add_event_cb(ui->screen, screen_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_minus, screen_btn_minus_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_top, screen_btn_top_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_bottom, screen_btn_bottom_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_chinese, screen_btn_chinese_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_jap, screen_btn_jap_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_han, screen_btn_han_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_english, screen_btn_english_event_handler, LV_EVENT_ALL, ui);
    lv_obj_add_event_cb(ui->screen_btn_plus, screen_btn_plus_event_handler, LV_EVENT_ALL, ui);
}

screen_btn_chinese_event_handler

这段代码的主要功能是响应 screen_btn_chinese 按钮的点击事件，并在点击后触发一系列动画效果，使按钮在 X 和 Y 轴上移动到指定位置，同时可能更新界面上的文本内容。通过动画路径 lv_anim_path_overshoot，按钮的移动会带有弹性效果，提升用户体验。

static void screen_btn_chinese_event_handler (lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    switch (code) {
    case LV_EVENT_CLICKED:
    {
        text_changed(0);
        ui_animation(guider_ui.screen_btn_chinese, 400, 0, lv_obj_get_x(guider_ui.screen_btn_chinese), 35, &lv_anim_path_overshoot, 0, 0, 200, 0, (lv_anim_exec_xcb_t)lv_obj_set_x, NULL, NULL, NULL);
        ui_animation(guider_ui.screen_btn_chinese, 400, 0, lv_obj_get_y(guider_ui.screen_btn_chinese), 8, &lv_anim_path_overshoot, 0, 0, 200, 0, (lv_anim_exec_xcb_t)lv_obj_set_y, NULL, NULL, NULL);
        break;
    }
    default:
        break;
    }
}

text_changed

text_changed 函数的主要功能是：

• 根据指定的语言参数，动态更新界面中一组文本项的内容。
• 为每个文本项设置适当的字体样式，其中最后一个文本项使用更大的字体以实现视觉上的差异化。

void text_changed(int language)
{
  for (int i = 0; i < 7; i++)
  {
    lv_style_value_t v = {.ptr = &lv_font_SourceHanSerifSC_Regular_14};
    if (i == 6)
    {
      v.ptr = &lv_font_SourceHanSerifSC_Regular_18;
    }
    lv_obj_set_local_style_prop(item_array[i].item_obj, LV_STYLE_TEXT_FONT, v, LV_PART_MAIN | LV_STATE_DEFAULT);
    switch (language)
    {
    case 0:
      /* code */
      lv_label_set_text(item_array[i].item_obj, item_array[i].content_chinese);
      break;
    case 1:
      lv_label_set_text(item_array[i].item_obj, item_array[i].content_english);
      break;
    case 2:
      lv_label_set_text(item_array[i].item_obj, item_array[i].content_japanese);
      break;
    case 3:
      lv_label_set_text(item_array[i].item_obj, item_array[i].content_korean);
      break;
    default:
      break;
    }
  }
}

1. 参数说明：

• language：一个整数参数，用于指定目标语言。不同的值对应不同的语言（如中文、英文、日文、韩文等）。

2. 循环处理：

• 函数通过一个 for 循环遍历 item_array 中的 7 个文本项（假设 item_array 是一个全局或外部定义的数组，包含了界面中所有需要更新的文本对象）。
• 每次循环中，都会为当前文本项设置字体样式和文本内容。

3. 字体样式设置：

• 使用 lv_style_value_t 类型的变量 v 定义字体样式。
• 默认情况下，字体设置为 lv_font_SourceHanSerifSC_Regular_14。
• 如果当前索引 i 为 6（即最后一个文本项），字体会被设置为 lv_font_SourceHanSerifSC_Regular_18，可能是为了突出显示该文本项。
• 调用 lv_obj_set_local_style_prop 函数将字体样式应用到当前文本项的对象上，作用范围为 LV_PART_MAIN | LV_STATE_DEFAULT（主部分的默认状态）。

4. 文本内容设置：

• 使用 switch 语句根据 language 参数的值选择对应的语言内容：
  case 0：设置为中文内容，调用 lv_label_set_text 函数，将 item_array[i].content_chinese 的内容应用到当前文本项。
  case 1：设置为英文内容，使用 item_array[i].content_english。
  case 2：设置为日文内容，使用 item_array[i].content_japanese。
  case 3：设置为韩文内容，使用 item_array[i].content_korean。
  default：如果 language 不匹配任何已定义的语言，不执行任何操作。