这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
icore4tlvgl_6 [2020/12/03 17:01] zgf |
icore4tlvgl_6 [2022/04/01 11:12] (当前版本) sean |
||
---|---|---|---|
行 2: | 行 2: | ||
|技术支持电话|**0379-69926675-801**||| | |技术支持电话|**0379-69926675-801**||| | ||
|技术支持邮件|Gingko@vip.163.com||| | |技术支持邮件|Gingko@vip.163.com||| | ||
- | |技术论坛|http://www.eeschool.org||| | ||
^ 版本 ^ 日期 ^ 作者 ^ 修改内容 ^ | ^ 版本 ^ 日期 ^ 作者 ^ 修改内容 ^ | ||
| V1.0 | 2020-11-19 | yang | 初次建立 | | | V1.0 | 2020-11-19 | yang | 初次建立 | | ||
行 22: | 行 21: | ||
void lv_gui_run(void) | void lv_gui_run(void) | ||
{ | { | ||
- | int t=0; /*定义变量t*/ | + | int t=0; /*定义变量t*/ |
- | lvgl2rtt_init("lcd"); /*初始化lvgl2rtt*/ | + | lvgl2rtt_init("lcd"); /*初始化lvgl2rtt*/ |
- | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | + | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
while(true){ | while(true){ | ||
- | lv_label_set_text_fmt(label1, "timer: %d s",t++); /*格式化显示*/ | + | lv_label_set_text_fmt(label1, "timer: %d s",t++); /*格式化显示*/ |
- | rt_thread_mdelay(1000); /*延时1ms*/ | + | rt_thread_mdelay(1000); /*延时1ms*/ |
} | } | ||
} | } | ||
行 39: | 行 38: | ||
<code c> | <code c> | ||
lvgl2rtt_init("lcd"); | lvgl2rtt_init("lcd"); | ||
- | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ lv_label_set_text(label1, "hello world\nthis is GINGKO\niCore4T_RT-Thread_LVGL"); | + | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
+ | |||
+ | lv_label_set_text(label1, "hello world\nthis is GINGKO\niCore4T_RT-Thread_LVGL"); | ||
</code> | </code> | ||
- | <code c> | ||
- | |||
- | </code> | ||
==== 三、长文本模式 ==== | ==== 三、长文本模式 ==== | ||
行 57: | 行 55: | ||
另一个重要的注意事项是在**LV_LABEL_LONG_DOT** 模式下使用**lv_label_set_text** 或时 **lv_label_set_array_text**时,将分配一个单独的缓冲区,复制文本缓冲区内容,以便添加/删除“...”,不过该过程用户察觉不到。但是**lv_label_set_static_text** 比较特殊,传递给它的缓冲区必须是可写的,这样才能够使用**LV_LABEL_LONG_DOT**。 | 另一个重要的注意事项是在**LV_LABEL_LONG_DOT** 模式下使用**lv_label_set_text** 或时 **lv_label_set_array_text**时,将分配一个单独的缓冲区,复制文本缓冲区内容,以便添加/删除“...”,不过该过程用户察觉不到。但是**lv_label_set_static_text** 比较特殊,传递给它的缓冲区必须是可写的,这样才能够使用**LV_LABEL_LONG_DOT**。 | ||
- | {{ :icore4t:icore4t_rtt_lvgl_6_3.png?direct |}} | + | {{ :icore4t:icore4t_rtt_lvgl_6_6.gif?direct |}} |
<code c> | <code c> | ||
lvgl2rtt_init("lcd"); | lvgl2rtt_init("lcd"); | ||
- | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | + | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
lv_obj_set_pos(label1, 10, 10); /*设置标签坐标*/ | lv_obj_set_pos(label1, 10, 10); /*设置标签坐标*/ | ||
- | lv_label_set_long_mode(label1, LV_LABEL_LONG_EXPAND); /*设置标签长模式*/ | + | lv_label_set_long_mode(label1, LV_LABEL_LONG_EXPAND); /*设置标签长模式*/ |
- | lv_obj_set_width(label1,240); /*设置标签宽度*/ | + | lv_obj_set_width(label1,240); /*设置标签宽度*/ |
lv_label_set_text(label1, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | lv_label_set_text(label1, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | ||
- | lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | + | lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
lv_obj_set_pos(label2, 10, 50); /*设置标签坐标*/ | lv_obj_set_pos(label2, 10, 50); /*设置标签坐标*/ | ||
- | lv_label_set_long_mode(label2, LV_LABEL_LONG_BREAK); /*设置标签长模式*/ | + | lv_label_set_long_mode(label2, LV_LABEL_LONG_BREAK); /*设置标签长模式*/ |
lv_obj_set_width(label2, 240); /*设置标签宽度*/ | lv_obj_set_width(label2, 240); /*设置标签宽度*/ | ||
lv_label_set_text(label2, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | lv_label_set_text(label2, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | ||
- | lv_obj_t * label3 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | + | lv_obj_t * label3 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
lv_obj_set_pos(label3, 10, 120); /*设置标签坐标*/ | lv_obj_set_pos(label3, 10, 120); /*设置标签坐标*/ | ||
- | lv_label_set_long_mode(label3, LV_LABEL_LONG_DOT); /*设置标签长模式*/ | + | lv_label_set_long_mode(label3, LV_LABEL_LONG_DOT); /*设置标签长模式*/ |
lv_obj_set_width(label3,240); /*设置标签宽度*/ | lv_obj_set_width(label3,240); /*设置标签宽度*/ | ||
lv_label_set_text(label3, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | lv_label_set_text(label3, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | ||
- | lv_obj_t * label4 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | + | lv_obj_t * label4 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
lv_obj_set_pos(label4, 10, 160); /*设置标签坐标*/ | lv_obj_set_pos(label4, 10, 160); /*设置标签坐标*/ | ||
- | lv_label_set_long_mode(label4, LV_LABEL_LONG_SROLL); /*设置标签长模式*/ | + | lv_label_set_long_mode(label4, LV_LABEL_LONG_SROLL); /*设置标签长模式*/ |
- | lv_obj_set_width(label4,240); /*设置标签宽度*/ | + | lv_obj_set_width(label4,240); /*设置标签宽度*/ |
lv_label_set_text(label4, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | lv_label_set_text(label4, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | ||
- | lv_obj_t * label5 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | + | lv_obj_t * label5 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
- | lv_obj_set_pos(label5, 10, 200); /*设置标签坐标*/ | + | lv_obj_set_pos(label5, 10, 200); /*设置标签坐标*/ |
- | lv_label_set_long_mode(label5, LV_LABEL_LONG_SROLL_CIRC); /*设置标签长模式*/ | + | lv_label_set_long_mode(label5, LV_LABEL_LONG_SROLL_CIRC); /*设置标签长模式*/ |
- | lv_obj_set_width(label5,240); /*设置标签宽度*/ | + | lv_obj_set_width(label5,240); /*设置标签宽度*/ |
lv_label_set_text(label5, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | lv_label_set_text(label5, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | ||
- | lv_obj_t * label6 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | + | lv_obj_t * label6 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ |
lv_obj_set_pos(label6, 10, 240); /*设置标签坐标*/ | lv_obj_set_pos(label6, 10, 240); /*设置标签坐标*/ | ||
- | lv_label_set_long_mode(label6, LV_LABEL_LONG_CROP); /*设置标签长模式*/ | + | lv_label_set_long_mode(label6, LV_LABEL_LONG_CROP); /*设置标签长模式*/ |
lv_obj_set_width(label6,240); /*设置标签宽度*/ | lv_obj_set_width(label6,240); /*设置标签宽度*/ | ||
lv_label_set_text(label6, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | lv_label_set_text(label6, "hello world! this is GINGKO, iCore4T_RT-Thread_LVGL"); | ||
行 102: | 行 100: | ||
文本的行可以通过**lv_label_set_align(label, LV_LABEL_ALIGN_LEFT/RIGHT/CENTER)**左右对齐,标签**默认左对齐**。**请注意,它将仅对齐标签内的多行,而不对齐标签对象本身**。标签本身不支持垂直对齐;您应该将标签放在更大的容器中,然后将整个标签对象对齐**lv_obj_align(obj, obj_ref, LV_ALIGN_..., x_ofs,y_ofs)**。 | 文本的行可以通过**lv_label_set_align(label, LV_LABEL_ALIGN_LEFT/RIGHT/CENTER)**左右对齐,标签**默认左对齐**。**请注意,它将仅对齐标签内的多行,而不对齐标签对象本身**。标签本身不支持垂直对齐;您应该将标签放在更大的容器中,然后将整个标签对象对齐**lv_obj_align(obj, obj_ref, LV_ALIGN_..., x_ofs,y_ofs)**。 | ||
- | {{ :icore4t:icore4t_rtt_lvgl_6_4.png?direct |}} | + | {{ :icore4t:icore4t_rtt_lvgl_6_3.png?direct |}} |
<code c> | <code c> | ||
+ | lvgl2rtt_init("lcd"); | ||
+ | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | ||
+ | lv_obj_set_pos(label1, 10, 10); /*设置标签坐标*/ | ||
+ | lv_label_set_align(label1, LV_LABEL_ALIGN_LEFT); /*标签内容左对齐*/ | ||
+ | lv_label_set_text(label1, "hello world\nthis is GINGKO\niCore4T_RT-Thread_LVGL"); | ||
+ | |||
+ | lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | ||
+ | lv_obj_set_pos(label2, 10, 100); /*设置标签坐标*/ | ||
+ | lv_label_set_align(label2, LV_LABEL_ALIGN_RIGHT); /*标签内容右对齐*/ | ||
+ | lv_label_set_text(label2, "hello world\nthis is GINGKO\niCore4T_RT-Thread_LVGL"); | ||
+ | |||
+ | lv_obj_t * label3 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | ||
+ | lv_obj_set_pos(label3, 10, 190); /*设置标签坐标*/ | ||
+ | lv_label_set_align(label3, LV_LABEL_ALIGN_CENTER); /*标签内容中心对齐*/ | ||
+ | lv_label_set_text(label3, "hello world\nthis is GINGKO\niCore4T_RT-Thread_LVGL"); | ||
</code> | </code> | ||
+ | |||
==== 五、文字重新着色 ==== | ==== 五、文字重新着色 ==== | ||
- | 在文本中,您可以使用命令来重新着色整行或部分文本,默认为黑色字体。例如:"Write a #ff0000 red# word"将显示为"Write a red word",#ff0000 为red、green、blue值。可以使用lv_label_set_recolor()为每个标签分别启用此功能。 | + | 在文本中,您可以使用命令来重新着色整行或部分文本,默认为黑色字体。例如:"Write a #ff0000 red# word"将显示为"Write a **red** word",#ff0000 为red、green、blue值。可以使用**lv_label_set_recolor()**为每个标签分别启用此功能。 |
- | 请注意,重新着色只能在一行中进行。因此,不应在重新着色的文本中使用 \n ,也不应将标签设置为LV_LABEL_LONG_BREAK 模式,否则新行中的文本将不会重新着色。 | + | 请注意,重新着色只能在一行中进行。因此,不应在重新着色的文本中使用 \n ,也不应将标签设置为**LV_LABEL_LONG_BREAK** 模式,否则新行中的文本将不会重新着色。 |
+ | |||
+ | {{ :icore4t:icore4t_rtt_lvgl_6_4.png?direct |}} | ||
+ | |||
+ | <code c> | ||
+ | lvgl2rtt_init("lcd"); | ||
+ | lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL); /*创建一个标签在屏幕中*/ | ||
+ | lv_label_set_recolor(label1, true); /*使能重新着色*/ | ||
+ | lv_label_set_text(label1, "#ff0000 hello# world\n" /*设置hello为红色*/ | ||
+ | "#00ff00 this# is #ffff00 GINGKO#\n" | ||
+ | "#0000ff iCore4T_RT-Thread_LVGL#"); | ||
+ | </code> | ||
行 117: | 行 141: | ||
在LVGL中,创建文字阴影有个简单的方法,就是创建一个内容一样的阴影标签,与主标签对齐重合后往右下角偏移变作文字阴影。因为新创建的对象在旧对象之上,所以应该先创建阴影标签。 | 在LVGL中,创建文字阴影有个简单的方法,就是创建一个内容一样的阴影标签,与主标签对齐重合后往右下角偏移变作文字阴影。因为新创建的对象在旧对象之上,所以应该先创建阴影标签。 | ||
+ | {{ :icore4t:icore4t_rtt_lvgl_6_5.png?direct |}} | ||
+ | |||
+ | <code c> | ||
+ | lvgl2rtt_init("lcd"); | ||
+ | static lv_style_t label_shadow_style; /* 创建一个阴影样式 */ | ||
+ | lv_style_init(&label_shadow_style); | ||
+ | lv_style_set_text_opa(&label_shadow_style, LV_STATE_DEFAULT, LV_OPA_50); | ||
+ | lv_style_set_text_color(&label_shadow_style, LV_STATE_DEFAULT, LV_COLOR_RED); | ||
+ | |||
+ | /* 先创建一个阴影标签 */ | ||
+ | lv_obj_t*shadow_label=lv_label_create(lv_scr_act(),NULL); | ||
+ | /* 将样式添加到阴影标签 */ | ||
+ | lv_obj_add_style(shadow_label, LV_LABEL_PART_MAIN,&label_shadow_style); | ||
+ | |||
+ | /* 创建主标签,图层在阴影标签之上 */ | ||
+ | lv_obj_t*main_label=lv_label_create(lv_scr_act(),NULL); | ||
+ | lv_label_set_text(main_label,"A simple method to create\n" | ||
+ | "shadows on text\n" | ||
+ | "It even works with\n\n" | ||
+ | "new lines and spaces."); | ||
+ | /* 将主标签内容复制给阴影标签 */ | ||
+ | lv_label_set_text(shadow_label, lv_label_get_text(main_label)); | ||
+ | /*将主标签中心对齐*/ | ||
+ | lv_obj_align(main_label,NULL, LV_ALIGN_CENTER,0,0); | ||
+ | /* 将阴影标签与主标签重合后,右移1像素,下移1像素 */ | ||
+ | lv_obj_align(shadow_label, main_label, LV_ALIGN_IN_TOP_LEFT,1,1); | ||
+ | </code> | ||
==== 七、超长文本 ==== | ==== 七、超长文本 ==== | ||
LVGL通过保存一些额外的数据(〜12 个字节)以加快绘图速度,可以有效地处理很长的字符(> 40k 个字符)。用户要启用此功能,请在 lv_conf.h 中将LV_LABEL_LONG_TXT_HINT设置为1。 | LVGL通过保存一些额外的数据(〜12 个字节)以加快绘图速度,可以有效地处理很长的字符(> 40k 个字符)。用户要启用此功能,请在 lv_conf.h 中将LV_LABEL_LONG_TXT_HINT设置为1。 |