ESP32 LVGL8.1 ——Label 标签 (Style 14)

最新推荐文章于 2024-02-01 16:49:58 发布

请叫我啸鹏

最新推荐文章于 2024-02-01 16:49:58 发布

阅读量4.9k

点赞数 3

分类专栏： LVGL 成长笔记文章标签： gui

本文链接：https://blog.csdn.net/believe666/article/details/121944629

版权

LVGL 成长笔记专栏收录该内容

31 篇文章 169 订阅

订阅专栏

提示：本博客作为学习笔记，有错误的地方希望指正

文章目录

一、Label简介
三、Label API
四、示例

一、Label简介

1.1概述 Overview

标签是用于显示文本的基本对象类型。

1.2部分和风格 Parts and Styles

• LV_PART_MAIN 使用所有典型的背景属性和文本属性。填充值可用于在文本和背景之间添加空格。
• LV_PART_SCROLLBAR 当文本大于小部件的大小时显示的滚动条。.
• LV_PART_SELECTED 告诉选定文本的样式。只能使用text_color和bg_color样式属性。

1.3使用 Usage

1.3.1设置文本 Set text

您可以在运行时使用lv_label_set_text(label，“New text”)设置标签上的文本。它将动态分配一个缓冲区，所提供的字符串将被复制到该缓冲区中。因此，在该函数返回后，您不需要将传递给lv_label_set_text的文本保留在作用域内。
使用lv_label_set_text_fmt(label， “Value: %d”， 15)可以使用printf格式设置文本。.
标签能够显示来自静态字符缓冲区的文本。为此，使用lv_label_set_text_static(label，“Text”)。在这种情况下，文本不存储在动态内存中，而是直接使用给定的缓冲区。这意味着数组不能是函数退出时超出作用域的局部变量。常量字符串与lv_label_set_text_static一起使用是安全的(除非与LV_LABEL_LONG_DOT一起使用，因为它在适当的地方修改缓冲区)，因为它们存储在ROM内存中，它总是可访问的。

1.3.2新行 New line

新行字符由label对象自动处理。你可以用\n来换行。例如:“line1 \ nline2 \ n \ nline4”

1.3.3长模式 Long modes

默认情况下，标签的宽度和高度被设置为lv_size_content，因此标签的大小自动扩展为文本大小。否则，如果显式地设置了宽度或高度(例如使用lv_obj_set_width或布局)，可以根据几个长模式策略来操纵比标签宽度宽的行。类似地，如果文本的高度大于标签的高度，也可以应用这些策略。
实现函数void lv_label_set_long_mode(lv_obj_t * obj, lv_label_long_mode_t long_mode);

/**长模式行为。用于lv_label_ext_t * /
LV_LABEL_LONG_WRAP， 			/**<保持对象宽度，换行过长的行，展开对象高度*/
LV_LABEL_LONG_DOT， 			/**<保持大小，如果文本太长，在末尾写圆点*/
LV_LABEL_LONG_SCROLL， 			/**<保持文本大小并来回滚动*/
LV_LABEL_LONG_SCROLL_CIRCULAR， /**<保持大小并循环滚动文本*/
LV_LABEL_LONG_CLIP， 			/**<保持大小并剪辑文本*/

请注意，LV_LABEL_LONG_DOT在适当位置操作文本缓冲区，以便添加/删除点。
当使用lv_label_set_text或lv_label_set_array_text时，会分配一个单独的缓冲区，并且不会注意到这个实现细节。lv_label_set_text_static则不是这样。如果计划使用LV_LABEL_LONG_DOT，传递给
lv_label_set_text_static的缓冲区必须是可写的。

1.3.4文本重新上色 Text recolor

实现函数 void lv_label_set_recolor(lv_obj_t * obj, bool en);其中开启字体的重着色后可以设置字体的颜色显示格式为 #0000ff Re-color#，使用“# # ”中间要有字体颜色参数和显示内容其中“0000ff”表示Hex格式的颜色表，可以根据在线网页提取“ Re-color”表示要被显示重新着色的内容。

1.3.5文本的选择 Text selection

如果通过LV_LABEL_TEXT_SELECTION启用，可以选择文本的一部分。这类似于在PC上使用鼠标选择文本。整个mechanzim(单击并选择文本,你用手指拖/鼠标)在文本区域和标签implemeted部件只允许手工制造零件的文本选择与lv_label_get_text_selection_start(标签,start_char_index)和lv_label_get_text_selection_start(label,end_char_index)

1.3.6很长的文字 Very long texts

LVGL可以有效地处理非常长的(例如> 40k字符)，通过保存一些额外的数据(~12字节)来加速绘图。在lv_conf.h中设置LV_LABEL_LONG_TXT_HINT 1即可启用该特性。

1.3.7符号 Symbols

标签可以在字母旁边显示符号(或显示符号本身)。阅读字体部分来了解更多关于符号的信息

1.4事件 Events

发送任何特别的事件.

1.5按键 Keys

对象类型不处理任何key。

本次主要讲述lvgl的Label,Label(标签)是用于显示文本的基本对象类型。可以通过设置Label从而实现对字体显示的方式不同，可以实现字体居中显示或者向左对齐，向右对齐，还可以实现文字的滚动显示剪辑文本对字体重着色等操作。

三、Label API

其中为字体的对齐方式
lv_obj_set_style_base_dir(rtl_label, LV_BASE_DIR_LTR, 0);

LV_BASE_DIR_LTR     //右对齐	
LV_BASE_DIR_RTL     //左对齐	
LV_BASE_DIR_AUTO    //自动

lv_obj_t * lv_label_create(lv_obj_t * parent);									//创建一个标签对象
void lv_label_set_text(lv_obj_t * obj, const char * text);						//为标签设置一个新文本。内存将分配给存储文本的标签。
void lv_label_set_text_fmt(lv_obj_t * obj, const char * fmt, ...) LV_FORMAT_ATTRIBUTE(2, 3);//为标签设置一个新的格式化文本。内存将分配给存储文本的标签。
void lv_label_set_text_static(lv_obj_t * obj, const char * text);				//设置静态文本。它不会被标签保存，所以'text'变量必须是“活着”，而标签存在。
void lv_label_set_long_mode(lv_obj_t * obj, lv_label_long_mode_t long_mode);	//设置文本长度大于对象大小的标签的行为
void lv_label_set_recolor(lv_obj_t * obj, bool en);								//通过内联命令启用重新着色
void lv_label_set_text_sel_start(lv_obj_t * obj, uint32_t index);				//设置文本选择应该从哪里开始
void lv_label_set_text_sel_end(lv_obj_t * obj, uint32_t index);					//设置文本选择的结束位置
char * lv_label_get_text(const lv_obj_t * obj);									//获取标签的文本
lv_label_long_mode_t lv_label_get_long_mode(const lv_obj_t * obj);				//获取标签的长模式
bool lv_label_get_recolor(const lv_obj_t * obj);								//获取重新着色属性
void lv_label_get_letter_pos(const lv_obj_t * obj, uint32_t char_id, lv_point_t * pos);		//获取一个字母的相对x和y坐标
uint32_t lv_label_get_letter_on(const lv_obj_t * obj, lv_point_t * pos_in);		//获取标签相对位置上的字母索引。
bool lv_label_is_char_under_pos(const lv_obj_t * obj, lv_point_t * pos);		//检查是否在点下绘制字符。
uint32_t lv_label_get_text_selection_start(const lv_obj_t * obj);				//获取选择的起始索引。
uint32_t lv_label_get_text_selection_end(const lv_obj_t * obj);					//获取选择结束索引。
void lv_label_ins_text(lv_obj_t * obj, uint32_t pos, const char * txt);			//插入一个文本到标签。标签文本不能是静态的。
void lv_label_cut_text(lv_obj_t * obj, uint32_t pos, uint32_t cnt);				//从标签中删除字符。标签文本不能是静态的。

四、示例

4.1显示个别字体颜色

示例1实现基本额Label显示，实现字体颜色重着色和实现字体的滚动显示。

/*************************************************
 *  函数名称 :  Label_show_1 实现基本label的显示
 *  参    数 ： 无
 *  函数功能 ： 实现基本label的显示
 *************************************************/
void Label_show_1()
{
   lv_obj_t * label1 = lv_label_create(lv_scr_act());          //创建label对象    
   lv_label_set_long_mode(label1,LV_LABEL_LONG_WRAP);          //设置label longmode
   lv_label_set_recolor(label1,true);                          //设置label 重着色
   lv_label_set_text(label1,"#0000ff Re-color# #ff00ff words# #ff0000 of a# label,align the lines to center "
                            "and wrap long text automatically"); //设置label字体
   lv_obj_set_width(label1,150);                               //设置对象宽度
   lv_obj_set_style_text_align(label1,LV_TEXT_ALIGN_CENTER,0); //设置对象字体样式居中
   lv_obj_align(label1,LV_ALIGN_CENTER,0,-40);                 //设置对象居中

   lv_obj_t * label2 = lv_label_create(lv_scr_act());          //创建label对象 
   lv_label_set_long_mode(label2,LV_LABEL_LONG_SCROLL_CIRCULAR); //设置label longmode
   lv_obj_set_width(label2,150);                               //设置对象宽度
   lv_label_set_text(label2,"It is a circularly scrolling text");//设置label字体
   lv_obj_align(label2,LV_ALIGN_CENTER,0,40);                  //设置对象居中
}

请添加图片描述

4.2字体模糊效果

示例2主要实现通过，通过显示字体的透明度和实现相对位置实现模糊字体显示的效果。

/*************************************************
 *  函数名称 :  Label_show_2 
 *  参    数 ： 无
 *  函数功能 ： 使用显示不同透明和相对居中实现模糊阴影显示效果
 *************************************************/
void Label_show_2()
{
   static lv_style_t style_shadow;                          //创建样式 
   lv_style_init(&style_shadow);                            //初始化样式 

   lv_style_set_text_opa(&style_shadow,LV_OPA_30);          //设置样式的字体透明度
   lv_style_set_text_color(&style_shadow,lv_color_black()); //设置样式字体颜色

   lv_obj_t * shadow_label = lv_label_create(lv_scr_act()); //创建阴影label
   lv_obj_add_style(shadow_label,&style_shadow,0);          //添加label的样式

   lv_obj_t * main_label = lv_label_create(lv_scr_act());   //创建主label
   lv_label_set_text(main_label, "A simple method to create\n"
                                 "ahadows on a text.\n"
                                 "It even works with\n\n"
                                 "newlines     and spaces.");//设置主样式字体
   lv_label_set_text(shadow_label,lv_label_get_text(main_label)); //设置阴影样式字体 lv_label_get_text(main_label)获取label对象的字内容

   lv_obj_align(main_label,LV_ALIGN_CENTER,0,0);            //主样式居中显示
   lv_obj_align_to(shadow_label,main_label,LV_ALIGN_TOP_LEFT,2,2); //相对位置显示
}

请添加图片描述

4.3显示自定义字体

示例3主要实现自定义字体的显示，实现特定的中文或者其他文字的显示，可以不用加载字库实现字体的显示，我这里使用的是 LvglFontTool.exe ,然后在CMakeLists.txt文档中添加对应的.c文件，接着在我们文件测试文件中添加包含字体的头文件，需要修改的地方是在生成的.c文件中要添加适合自己的lvgl.h的文件，编译的时候会出现错误，这应该是这个软件还没有适配LVGL8的字体显示规格，我们将里面内容注释掉编译错误的即可。
在这里插入图片描述

最后在我们要实现的文档中引入测试字体的路径，直接设置label的显示字体即可。

   LV_FONT_DECLARE(HelloESP32)                                 	//加载字体路径
   lv_label_set_text(cz_label, "你好！乐鑫，我最近在使用ESP32跑LVGL，祝我好运吧！");   //设置显示字体
   lv_obj_set_style_text_font(cz_label,&HelloESP32,0);        	//设置显示样式

/*************************************************
 *  函数名称 :  Label_show_3 
 *  参    数 ： 无
 *  函数功能 ： 显示其他字体
 *************************************************/
void Label_show_3()
{
   lv_obj_t * ltr_label = lv_label_create(lv_scr_act());             //创建主label
   lv_label_set_text(ltr_label, "In modern terminology, a microcontroller is similar to a system on a chip (SoC).");    //设置字内容
   lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0); //设置样式内容
   lv_obj_set_width(ltr_label, 310);                                 //设置对象的宽度
   lv_obj_align(ltr_label, LV_ALIGN_TOP_LEFT, 5, 5);                 //左上居中

   lv_obj_t * rtl_label = lv_label_create(lv_scr_act());             //创建主label
   lv_label_set_text(rtl_label, "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)."); //设置字内容
   lv_obj_set_style_base_dir(rtl_label,LV_BASE_DIR_RTL,0);           //设置样式内容
   lv_obj_set_style_text_font(rtl_label,&lv_font_dejavu_16_persian_hebrew,0); //设置对象的宽度
   lv_obj_set_width(rtl_label,310);                                  //设置对象的宽度
   lv_obj_align(rtl_label,LV_ALIGN_LEFT_MID,5,0);                    //左上居中

   lv_obj_t * cz_label = lv_label_create(lv_scr_act());             //创建主label
   
   LV_FONT_DECLARE(HelloESP32)                                 		//加载字体路径
   lv_label_set_text(cz_label, "你好！乐鑫，我最近在使用ESP32跑LVGL，祝我好运吧！");   //设置显示字体
   lv_obj_set_style_text_font(cz_label,&HelloESP32,0);         		//设置显示样式

   lv_obj_set_width(cz_label,240);                                   //设置对象宽度
   lv_obj_align(cz_label,LV_ALIGN_BOTTOM_LEFT,5,-5);                 //居中显示
}

备注这里图片显示已在开发板验证
请添加图片描述

请叫我啸鹏

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
ESP32 LVGL8.1 ——Label 标签 (Style 14)

提示：本博客作为学习笔记，有错误的地方希望指正文章目录一、Label简介三、slider API四、示例示例1示例2示例3五、仿真结果示例1仿真显示示例2仿真显示示例3仿真显示一、Label简介本次主要讲述lvgl的Label,Label(标签)是用于显示文本的基本对象类型。可以通过设置Label从而实现对字体显示的方式不同，可以实现字体居中显示或者向左对齐，向右对齐，还可以实现文字的滚动显示剪辑文本对字体重着色等操作。三、slider API为字体的对齐方式lv_obj_set_styl
复制链接

扫一扫