使用GUI Guider工具开发嵌入式GUI应用 (3) - 使用label组件

本文详细介绍了如何在GUIGuider中创建和配置LVGL的label组件,包括添加、编辑属性、生成源码并将其集成到Keil工程中,最后预览和部署到MCU开发板上显示字符信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用GUI Guider工具开发嵌入式GUI应用 (3) - 使用label组件

引言

本节讲述在GUI Guider中,应用各种UI的基本元素,并顺利部署到MCU的过程。在GUI Guider中使用各LVGL的组件时,将会涉及到GUI Guider的操作,以及将某些组件额外生成的源码添加到Keil工程中。至于具体产品中的UI应用,可以是这些基本UI元素的组合使用,以实现更加丰富的显示效果。

在本文中,将说明使用通过GUI Guider创建并使用LVGL的label组件显示字符信息。

在GUI Guider工程中创建label组件

在新建GUI Guider工程搭建MCU运行时的框架工程时,曾使用了label组件实现在屏幕上显示一个“Hello World”字符串的演示效果。Label是GUI Guider中最简单的组件,可用于显示字符。

当需要为某个页面添加一个显示字符串的对象时,可在编辑区域左边的工具栏中选择label按钮,此时,在组件窗口中就可以看到,当前的页面screen下出现了一个label_1的对象。如图x所示。

在这里插入图片描述

图x 新增label对象

双击在当前页面上出现的label对象,可以在编辑区域的右侧激活该对象的属性设置对话框,如图x所示。在其中,可以执行该对象的名字、位置、文本内容、字体、颜色等属性。当然,既然是在图形编辑界面,对象的位置也可以通过在图形编辑区拖拽对象来调整。

在这里插入图片描述

图x 编辑label对象属性

然后,重新生成代码。在运行时的Keil工程已经包含了静态页面的源文件,因此不用额外再执行添加文件的操作。但实际上,这里新生成的源码位于./gui/generated/setup_scr_screen.c文件中。有源码如下:

/*
 * Copyright 2023 NXP
 * SPDX-License-Identifier: MIT
 * The auto-generated can only be used on NXP devices
 */

#include "lvgl.h"
#include <stdio.h>
#include "gui_guider.h"
#include "events_init.h"
#include "custom.h"


void setup_scr_screen(lv_ui *ui){

	//Write codes screen
	ui->screen = lv_obj_create(NULL);
	lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

	//Set style for screen. Part: LV_PART_MAIN, State: LV_STATE_DEFAULT
	lv_obj_set_style_bg_color(ui->screen, lv_color_make(0xff, 0xff, 0xff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_color(ui->screen, lv_color_make(0x21, 0x95, 0xf6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

	//Write codes screen_label_1
	ui->screen_label_1 = lv_label_create(ui->screen);
	lv_obj_set_pos(ui->screen_label_1, 51, 68);
	lv_obj_set_size(ui->screen_label_1, 218, 43);
	lv_obj_set_scrollbar_mode(ui->screen_label_1, LV_SCROLLBAR_MODE_OFF);
	lv_label_set_text(ui->screen_label_1, "Hello World");
	lv_label_set_long_mode(ui->screen_label_1, LV_LABEL_LONG_WRAP);

	//Set style for screen_label_1. Part: LV_PART_MAIN, State: LV_STATE_DEFAULT
	lv_obj_set_style_radius(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_color(ui->screen_label_1, lv_color_make(0x7c, 0x00, 0xff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_color(ui->screen_label_1, lv_color_make(0x21, 0x95, 0xf6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_grad_dir(ui->screen_label_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_bg_opa(ui->screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_width(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_color(ui->screen_label_1, lv_color_make(0x21, 0x95, 0xf6), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_opa(ui->screen_label_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_spread(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_ofs_x(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_shadow_ofs_y(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_color(ui->screen_label_1, lv_color_make(0xff, 0xff, 0xff), LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui->screen_label_1, &lv_font_montserratMedium_32, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_letter_space(ui->screen_label_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_line_space(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_text_align(ui->screen_label_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_left(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_right(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_top(ui->screen_label_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);
	lv_obj_set_style_pad_bottom(ui->screen_label_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
}

此时,可以通过预览页面,看到本页面的静态显示效果。还可以通过运行模拟器,在GUI Guider中模拟UI程序运行时的动态效果(如果有动态效果)。如图x所示。

在这里插入图片描述

图x 预览编辑label对象的效果

编译MCU工程并下载到开发板

编译对应的Keil工程,启动针对代码量的优化,看下对存储空间的占用。

Build started: Project: project
*** Using Compiler 'V6.18', folder: 'C:\Keil_v5\ARM\ARMCLANG\Bin'
Build target 'Target 1'
compiling clock_init.c...
compiling board_init.c...
compiling hal_crc.c...
compiling lcd_port.c...
compiling pin_init.c...
compiling lcd.c...
...
compiling events_init.c...
compiling gui_guider.c...
compiling lv_font_montserratMedium_16.c...
compiling lv_table.c...
compiling setup_scr_screen.c...
compiling lv_font_montserratMedium_32.c...
compiling lv_textarea.c...
linking...
Program Size: Code=154616 RO-data=64380 RW-data=148 ZI-data=29100  
".\Objects\project.axf" - 0 Error(s), 0 Warning(s).
Build Time Elapsed:  00:00:14

下载程序到MCU并运行,可以看到,开发板上的显示屏上也成功显示了“同款”图像。如图x所示。

在这里插入图片描述

图x 在开发板上运行UI显示label对象

本例使用的GUI Guider工程和Keil工程位于开源代码仓库:https://gitee.com/suyong_yq/lvgl-gui-guider-dev/tree/master/bird-f5_lvgl_v8/demo_apps/lvgl/lvgl_v8_gui_text

(未完待续。。。)

<think>我们正在解决GUI Guider移植后显示中文的问题。根据引用,特别是引用[2]和引用[4],我们可以知道: 1.GUI Guider中设计界面时,需要选择支持中文的字体,例如“SourceHanSerifSC_Regular”,否则会出现乱码(引用[2])。 2. 在代码中,我们需要设置标签的字体为我们添加的中文字体(引用[4])。 因此,解决方案主要涉及两个方面:一是在GUI Guider设计时正确选择字体,二是在移植后的代码中正确设置字体。 步骤分解: 1. **在GUI Guider中添加中文字体**(设计阶段): -GUI Guider中,打开字体设置(通常是在控件属性中设置文本字体)。 - 如果默认没有中文字体,需要先添加中文字体文件(如.ttf文件)到项目的字体资源中。 - 引用[2]提到选择“SourceHanSerifSC_Regular”字体,但如果没有,可以自行添加。添加方法:在GUI Guider的字体管理器中导入字体文件,然后选择该字体。 2. **在GUI Guider中为控件设置中文字体**: - 对于需要显示中文的控件(如label),在其属性面板中选择已经添加的中文字体。 3. **在移植后的代码中确保字体被正确设置**: - 引用[4]提到,在代码中需要调用`lv_obj_set_style_text_font`来设置标签的字体。但是,如果我们在GUI Guider中已经设置了字体,那么生成的代码应该已经包含了字体的设置。然而,有时移植后可能因为字体文件未正确包含或路径问题导致不生效。 - 因此,我们需要检查: - 中文字体文件是否已经包含在工程中(例如,放在工程目录下的某个文件夹,并在编译时被包含)。 - 在生成的代码中,字体的名称是否正确(注意生成的字体变量名)。 - 如果GUI Guider生成的代码没有正确设置字体,我们可以手动添加设置字体的代码,如引用[4]所示。 4. **移植时注意字体文件的路径和初始化**: - 在移植过程中,需要确保字体文件被正确加载。通常,我们会将字体文件转换为C数组(使用LVGL的在线转换工具或离线工具),然后在代码中声明字体。 -GUI Guider中,当我们添加字体时,它可能会自动生成字体的C数组并保存在工程中(通常以.c和.h文件形式存在)。在移植时,我们需要将这些字体文件一起复制到我们的工程中,并在初始化时调用相应的字体初始化函数(如果有的话)或者确保字体变量被正确声明和引用。 5. **检查事件处理**: - 引用[3]提到,在移植后需要添加触控事件。虽然这与中文显示没有直接关系,但确保整个系统的正确运行也很重要。 具体操作步骤: **步骤1:在GUI Guider中添加中文字体** 1. 打开GUI Guider工程。 2. 在左侧资源管理器中,找到“字体”部分(可能位于“资源”或“字体”选项卡)。 3. 点击“添加字体”,选择你的中文字体文件(如.ttf格式)。 4. 添加后,字体会出现在字体列表中。 **步骤2:为控件设置字体** 1. 选中需要显示中文的控件(例如label)。 2. 在右侧属性面板中,找到“文本”部分,设置“字体”为刚刚添加的中文字体。 3. 设置文本内容为中文。 **步骤3:生成代码并移植** 1.GUI Guider中生成代码(点击“生成代码”按钮)。 2. 将生成的代码(包括源文件和资源文件)复制到你的工程中。 3. 确保字体文件(通常是.c和.h文件)也被包含在工程中,并正确编译。 **步骤4:检查生成的代码** 在生成的代码中,例如对于某个标签,应该可以看到类似这样的代码: ```c lv_obj_set_style_text_font(ui->label1, &my_font, LV_PART_MAIN|LV_STATE_DEFAULT); ``` 其中`my_font`是字体的变量名。确保这个变量在字体文件中已经定义。 **步骤5:手动设置字体(可选)** 如果发现生成的代码没有设置字体,或者设置不正确,可以在初始化后手动设置: ```c // 假设已经声明了字体变量,例如: // extern lv_font_t my_font; lv_obj_set_style_text_font(ui->label1, &my_font, LV_PART_MAIN|LV_STATE_DEFAULT); ``` **步骤6:确保字体文件被正确编译** - 检查字体文件(如`my_font.c`)是否被添加到工程中,并且路径正确。 - 在包含字体头文件时,确保路径正确。 **注意**:如果使用自定义字体,需要确保该字体支持所需的中文字符(即包含中文字符集)。如果字体文件过大,可以考虑只提取需要的字符(通过字体转换工具)。 如果按照以上步骤仍然无法显示中文,请检查: - 字体转换是否正确(如果使用转换工具,确保选择了正确的字符范围)。 - 在代码中是否在设置字体之前就设置了文本(建议先设置字体再设置文本)。 - 内存是否足够(中文字体可能较大,确保有足够的内存加载字体)。 最后,根据引用[2]的提示,在仿真时如果出现乱码,请检查是否选择了正确的中文字体。在移植到硬件时,同样需要确保字体文件被正确包含。 希望这些步骤能帮助您解决中文显示问题。</think>### GUI Guider 移植后中文显示问题解决方案 根据引用资料[2][4],中文显示问题通常由**字体配置错误**或**移植缺失**导致。以下是系统化的解决方案: --- #### 一、核心问题诊断 1. **字体未正确加载**(引用[2][4]) - GUI Guider 设计时选用的中文字体未移植到目标设备 - 字体文件未包含在工程编译中 2. **字体设置未生效**(引用[4]) - 代码中未正确调用字体设置函数 - 样式覆盖导致字体设置被重置 --- #### 二、完整解决步骤 ##### 步骤1:设计阶段字体配置(GUI Guider端) 1. 在控件属性面板选择支持中文的字体: ```c /* 正确示例(引用[2]) */ lv_obj_set_style_text_font(label, &SourceHanSerifSC_Regular, ...); ``` 2. **必须添加字体文件到工程**: - 将中文字体文件(.ttf/.otf)放入工程目录的`assets/fonts`文件夹 -GUI Guider中通过**Font Manager**导入字体 ##### 步骤2:移植关键代码(嵌入式端) 1. 复制字体文件到目标设备: ```c /* 在工程中显式声明字体(引用[4]) */ LV_FONT_DECLARE(lv_customer_font_AlibabaPuHuiTi_3_55Regular_16); ``` 2. 初始化时加载字体: ```c void init_fonts() { static lv_font_t *chinese_font = &lv_customer_font_AlibabaPuHuiTi...; lv_theme_set_font_default(chinese_font); // 设置全局默认字体 } ``` ##### 步骤3:运行时动态设置(补救措施) 若仍不生效,在控件创建后手动设置: ```c lv_obj_t *label = lv_label_create(parent); /* 强制设置字体(引用[4]) */ lv_obj_set_style_text_font(label, &your_chinese_font, LV_PART_MAIN | LV_STATE_DEFAULT); ``` --- #### 三、常见问题排查表 | 现象 | 解决方案 | |------|----------| | 显示方块□ | 检查字体文件是否编译进固件 | | 部分文字缺失 | 扩展字体字符集范围(GB2312→GBK) | | 仿真正常/硬件异常 | 检查Flash存储空间是否足够 | | 文字重叠错位 | 调整`lv_conf.h`中的`LV_FONT_FMT_TXT_LARGE` | --- #### 四、优化建议 1. **字体精简**:使用[LVGL字体工具](https://lvgl.io/tools/fontconverter)仅提取所需字符 2. **缓存机制**(提升性能): ```c lv_font_cache_set_size(1024); // 在lv_init()后调用 ``` 3. **多语言切换**: ```c void set_lang_chinese() { lv_i18n_set_locale("zh_CN"); } ``` > **关键提示**:移植后务必调用`lv_tick_inc(1)`提供时基(引用[3]),否则字体渲染可能失效。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值