注：本文使用的lvgl-release-v8.3版本，其它版本可能稍有不同。
01 快速入门
1.1 LVGL模拟器配置
day01-02_课程介绍_哔哩哔哩_bilibili
LVGL开发教程 (yuque.com)
如果按照上述视频和文档中配置不成功的话，直接重装VsCode，我的就是重装以后就好了。
LVGL查询手册：
Introduction（介绍） — LVGL 文档 (100ask.net)
Welcome to the documentation of LVGL! — LVGL documentation
1.2 创建第一个对象
1.2.1 创建第一个对象
在main.c里添加一个创建对象的函数。
void demo1()
{// 1.构建一个显示图层(窗口)lv_obj_t* screen = lv_scr_act();// 2.在窗口上创建一个对象lv_obj_t* obj = lv_obj_create(screen); // 3.设置对象的位置lv_obj_set_pos(obj,10,30);// 4.设置对象的宽度和高度lv_obj_set_height(obj,50);lv_obj_set_width(obj,50);// 5.设置对象的对齐lv_obj_center(obj); //执行这串代码会让这个对象在当前窗口居中lv_obj_align(obj,LV_ALIGN_BOTTOM_MID,0,0); //底部居中对齐，后面两个参数是x方向和y方向偏移// 6.设置样式static lv_style_t style;lv_style_init(&style);lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_RED));// 7.将样式和对象关联起来lv_obj_add_style(obj,&style,0);
}
然后在main函数里调用上述函数就完成了第一个对象的创建。
1.2.2 设置对象样式
void demo2()
{// 1.构建一个显示图层(窗口)lv_obj_t* screen = lv_scr_act();// 2.在窗口上创建一个对象lv_obj_t* obj = lv_obj_create(screen); // 3.设置对象的位置lv_obj_set_pos(obj,10,30);// 4.设置对象的宽度和高度lv_obj_set_height(obj,50);lv_obj_set_width(obj,50);// 5.设置对象的对齐lv_obj_center(obj); //执行这串代码会让这个对象在当前窗口居中// 6.设置样式static lv_style_t style;lv_style_init(&style);lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_BLUE));lv_style_set_radius(&style,20); // 设置圆角// 7.将样式和对象关联起来lv_obj_add_style(obj,&style,0);
}
然后再main函数里调用。
1.3 控件
1.3.1 label文本
1.3.1.1 创建label标签
/*显示文本*/
void demo_label()
{// 1.得到当前活跃的屏幕lv_obj_t* screen = lv_scr_act();// 2.创建文本对象lv_obj_t* label = lv_label_create(screen);// 3.设置文本对象内容，位置，颜色等等lv_label_set_text(label,"Hello ICK");// lv_obj_set_pos(label,100,100); //设置标签在屏幕上的位置lv_obj_set_align(label,LV_ALIGN_CENTER); //设置标签位置在屏幕正中央// llv_obj_set_style_text_color(label,lv_color_hex(0x123456),0); //设置标签中字体颜色lv_obj_set_style_text_color(label,lv_color_make(255,0,0),0); //设置标签中字体颜色
}
1.3.1.2 不同设备上颜色设置
1.3.1.3 改变label字体大小和颜色
注意看左下角和右下角会显示内存使用率和帧率，如果不像是要进行设置。
左下角和右下角没有了。
配置了各种字体大小，写1是可用的。
void demo_label()
{// 1.得到当前活跃的屏幕lv_obj_t* screen = lv_scr_act();// 2.创建文本对象lv_obj_t* label = lv_label_create(screen);// 3.设置文本对象内容，位置，颜色等等lv_label_set_text(label,"Hello ICK");// lv_obj_set_pos(label,100,100); //设置标签在屏幕上的位置lv_obj_set_align(label,LV_ALIGN_CENTER); //设置标签位置在屏幕正中央// llv_obj_set_style_text_color(label,lv_color_hex(0x123456),0); //设置标签中字体颜色lv_obj_set_style_text_color(label,lv_color_make(255,0,0),0); //设置标签中字体颜色，最后一个参数默认是0// 4.定义一个样式显示标签字体static lv_style_t style;lv_style_init(&style); //初始化样式结构体lv_style_set_text_font(&style,&lv_font_montserrat_48); //设置字体大小// 5.将样式和字体关联起来lv_obj_add_style(label,&style,0); //最后一个参数默认是0
}
1.3.1.4 显示中文
字体库转换（对中文进行编码）：
Font Converter — LVGL
字体库下载：
iconfont-阿里巴巴矢量图标库
下面这个c代码就是转换出来的字体。
/******************************************************************************** Size: 38 px* Bpp: 1* Opts: --bpp 1 --size 38 --no-compress --font AlimamaShuHeiTi-Bold.ttf --symbols 学习嵌入式的过程是漫长的! --format lvgl -o alimama.c******************************************************************************/#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif#ifndef ALIMAMA
#define ALIMAMA 1
#endif#if ALIMAMA/*-----------------* BITMAPS*----------------*//*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = {/* U+0021 "!" */0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xfc, 0x0, 0x0, 0x3,0xff, 0xff, 0xff, 0xff, 0xc0,/* U+4E60 "习" */0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xe0, 0x0, 0x0, 0x7, 0xc0,0x0, 0x0, 0xf, 0x80, 0xfc, 0x0, 0x1f, 0x1,0xf8, 0x0, 0x3e, 0x1, 0xf0, 0x0, 0x7c, 0x3,0xf0, 0x0, 0xf8, 0x3, 0xe0, 0x1, 0xf0, 0x7,0xe0, 0x3, 0xe0, 0xf, 0xc0, 0x7, 0xc0, 0xf,0x80, 0xf, 0x80, 0x1f, 0x80, 0x1f, 0x0, 0x1f,0x0, 0x3e, 0x0, 0x0, 0x8, 0x7c, 0x0, 0x0,0x70, 0xf8, 0x0, 0x7, 0xe1, 0xf0, 0x0, 0x3f,0xc3, 0xe0, 0x3, 0xff, 0x87, 0xc0, 0x1f, 0xff,0xf, 0x81, 0xff, 0xf8, 0x1f, 0xf, 0xff, 0xc0,0x3e, 0x7f, 0xfc, 0x0, 0x7d, 0xff, 0xe0, 0x0,0xfb, 0xfe, 0x0, 0x1, 0xf7, 0xf0, 0x0, 0xff,0xef, 0x0, 0x1, 0xff, 0xd8, 0x0, 0x3, 0xff,0x80, 0x0, 0x7, 0xff, 0x0, 0x0, 0xf, 0xfe,/* U+5165 "入" */0x0, 0xff, 0xf0, 0x0, 0x0, 0x1f, 0xfe, 0x0,0x0, 0x3, 0xff, 0xc0, 0x0, 0x0, 0x7f, 0xf8,0x0, 0x0, 0xf, 0xff, 0x0, 0x0, 0x0, 0x3,0xe0, 0x0, 0x0, 0x0, 0x7c, 0x0, 0x0, 0x0,0xf, 0x80, 0x0, 0x0, 0x1, 0xf0, 0x0, 0x0,0x0, 0x3e, 0x0, 0x0, 0x0, 0x7, 0xe0, 0x0,0x0, 0x0, 0xfc, 0x0, 0x0, 0x0, 0x1f, 0x80,0x0, 0x0, 0x7, 0xf0, 0x0, 0x0, 0x0, 0xfe,0x0, 0x0, 0x0, 0x1f, 0xe0, 0x0, 0x0, 0x7,0xfc, 0x0, 0x0, 0x0, 0xff, 0xc0, 0x0, 0x0,0x3f, 0xf8, 0x0, 0x0, 0x7, 0xff, 0x80, 0x0,0x1, 0xfb, 0xf8, 0x0, 0x0, 0x7f, 0x3f, 0x0,0x0, 0x1f, 0xc3, 0xf0, 0x0, 0x7, 0xf0, 0x7f,0x0, 0x1, 0xfc, 0x7, 0xf8, 0x0, 0xff, 0x0,0x7f, 0x80, 0x7f, 0xc0, 0x7, 0xfc, 0x3f, 0xf0,0x0, 0x7f, 0xef, 0xfc, 0x0, 0x7, 0xff, 0xff,0x0, 0x0, 0x7f, 0xff, 0x80, 0x0, 0x3, 0xff,0xc0, 0x0, 0x0, 0x1f, 0xe0, 0x0, 0x0, 0x0,0xf0, 0x0, 0x0, 0x0, 0x4,/* U+5B66 "学" */0xf, 0x83, 0xe0, 0x7c, 0x3, 0xe0, 0xf8, 0x1f,0x0, 0xf8, 0x3e, 0x7, 0xc0, 0x1f, 0x7, 0xc3,0xe0, 0x7, 0xc1, 0xf0, 0xf8, 0x3f, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x0,0x0, 0x1, 0xff, 0x80, 0x0, 0x0, 0x7f, 0xe0,0x0, 0x0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xc1,0xff, 0xff, 0xfc, 0x0, 0x7f, 0xff, 0xff, 0x0,0x1f, 0xff, 0xff, 0x80, 0x0, 0x0, 0xf, 0xc0,0x0, 0x0, 0x7, 0xe0, 0x0, 0x0, 0x1, 0xf8,0x0, 0x0, 0x0, 0xfc, 0x0, 0x0, 0x0, 0x7e,0x0, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xc0, 0x0, 0x3e, 0x0, 0x0, 0x0,0xf, 0x80, 0x0, 0x0, 0x3, 0xe0, 0x0, 0x0,0x0, 0xf8, 0x0, 0x0, 0x0, 0x3e, 0x0, 0x0,0x0, 0xf, 0x80, 0x0, 0x0, 0xff, 0xe0, 0x0,0x0, 0x3f, 0xf8, 0x0, 0x0, 0xf, 0xfe, 0x0,0x0, 0x3, 0xff, 0x80, 0x0,/* U+5D4C "嵌" */0x3e, 0x1, 0xf0, 0xf, 0x87, 0xc0, 0x3e, 0x1,0xf0, 0xf8, 0x7, 0xc0, 0x3e, 0x1f, 0x0, 0xf8,0x7, 0xc3, 0xff, 0xff, 0xff, 0xf8, 0x7f, 0xff,0xff, 0xff, 0xf, 0xff, 0xff, 0xff, 0xe1, 0xff,0xff, 0xff, 0xfc, 0x0, 0x0, 0x0, 0x0, 0x7,0xc3, 0xe0, 0x0, 0x0, 0xf8, 0x7c, 0x3f, 0xff,0x1f, 0xf, 0x87, 0xff, 0xef, 0xff, 0xfc, 0xff,0xfd, 0xff, 0xff, 0xbf, 0xff, 0xbf, 0xff, 0xf7,0xc1, 0xf7, 0xff, 0xfe, 0xf8, 0x3e, 0x3e, 0x1f,0x3e, 0x7, 0x87, 0xc3, 0xe7, 0xc1, 0xf0, 0xf8,0x7c, 0x7, 0xc0, 0x1f, 0xf, 0x80, 0xf8, 0x3,0xe1, 0xf0, 0x1f, 0x0, 0x7f, 0xfe, 0x3, 0xe0,0xf, 0xff, 0xc0, 0x7c, 0x1, 0xff, 0xf8, 0xf,0xf0, 0x3f, 0xff, 0x3, 0xfe, 0x7, 0xc3, 0xe0,0x7f, 0xe0, 0xf8, 0x7c, 0xf, 0xfc, 0x1f, 0xf,0x81, 0xf7, 0x83, 0xe1, 0xf0, 0x7c, 0xf8, 0x7c,0x3e, 0xf, 0x9f, 0xf, 0x87, 0xc3, 0xf1, 0xf1,0xff, 0xf8, 0xfc, 0x3e, 0x3f, 0xff, 0x1f, 0x87,0xc7, 0xff, 0xe7, 0xe0, 0x7c, 0xff, 0xfd, 0xf8,0xf, 0x80,/* U+5F0F "式" */0x0, 0x0, 0x1, 0xf3, 0x80, 0x0, 0x0, 0x3e,0x78, 0x0, 0x0, 0x7, 0xcf, 0x0, 0x0, 0x0,0xf9, 0xe0, 0x0, 0x0, 0x1f, 0x1, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xfc, 0x0, 0x0, 0x3, 0xe0,0x0, 0x0, 0x0, 0x7c, 0x0, 0x0, 0x0, 0xf,0x80, 0x0, 0x0, 0x1, 0xf8, 0xf, 0xff, 0xfe,0x3f, 0x1, 0xff, 0xff, 0xc3, 0xe0, 0x3f, 0xff,0xf8, 0x7c, 0x7, 0xff, 0xff, 0xf, 0x80, 0xff,0xff, 0xe1, 0xf0, 0x0, 0x1e, 0x0, 0x3e, 0x0,0x3, 0xc0, 0x7, 0xe0, 0x0, 0x78, 0x0, 0xfc,0x0, 0xf, 0x0, 0xf, 0x80, 0x1, 0xe0, 0x1,0xf0, 0x0, 0x3c, 0x0, 0x3e, 0x0, 0x7, 0x80,0x7, 0xe0, 0x0, 0xf0, 0x0, 0xfc, 0x0, 0x1e,0x0, 0xf, 0x80, 0x3, 0xff, 0xf1, 0xf9, 0xff,0xff, 0xfe, 0x3f, 0x3f, 0xff, 0xff, 0xc3, 0xe7,0xff, 0xff, 0xf8, 0x7e, 0xff, 0xff, 0xff, 0xf,0xc0, 0x0, 0x0, 0x0, 0xfc, 0x0, 0x0, 0x0,0x1f, 0x80,/* U+662F "是" */0xf, 0xff, 0xff, 0xfe, 0x3, 0xff, 0xff, 0xff,0x80, 0xff, 0xff, 0xff, 0xe0, 0x3f, 0xff, 0xff,0xf8, 0xf, 0x0, 0x0, 0x3e, 0x3, 0xc0, 0x0,0xf, 0x80, 0xff, 0xff, 0xff, 0xe0, 0x3f, 0xff,0xff, 0xf8, 0xf, 0xff, 0xff, 0xfe, 0x3, 0xc0,0x0, 0xf, 0x80, 0xff, 0xff, 0xff, 0xe0, 0x3f,0xff, 0xff, 0xf8, 0xf, 0xff, 0xff, 0xfe, 0x3,0xff, 0xff, 0xff, 0x80, 0x0, 0x0, 0x0, 0x0,0x0, 0x0, 0x0, 0x0, 0x7f, 0xff, 0xff, 0xff,0xdf, 0xff, 0xff, 0xff, 0xf7, 0xff, 0xff, 0xff,0xfd, 0xff, 0xff, 0xff, 0xff, 0x0, 0x1, 0xf0,0x0, 0x3, 0xe0, 0x7c, 0x0, 0x0, 0xf8, 0x1f,0xff, 0xe0, 0x3e, 0x7, 0xff, 0xf8, 0xf, 0x81,0xff, 0xfe, 0x3, 0xe0, 0x7f, 0xff, 0x80, 0xf8,0x1f, 0x0, 0x0, 0x7f, 0x7, 0xc0, 0x0, 0x1f,0xe1, 0xf0, 0x0, 0x7, 0xfe, 0x7c, 0x0, 0x3,0xff, 0xff, 0xff, 0xfc, 0xff, 0xff, 0xff, 0xff,0x7e, 0x7f, 0xff, 0xff, 0xff, 0x3, 0xff, 0xff,0xf0,/* U+6F2B "漫" */0x60, 0x1f, 0xff, 0xff, 0x1f, 0x87, 0xff, 0xff,0xc7, 0xf9, 0xff, 0xff, 0xf1, 0xfe, 0x7c, 0x0,0x7c, 0x7f, 0x9f, 0xff, 0xff, 0x1, 0xe7, 0xff,0xff, 0xc0, 0x1, 0xf0, 0x1, 0xf0, 0x0, 0x7c,0x0, 0x7c, 0x0, 0x1f, 0xff, 0xff, 0x3e, 0x7,0xff, 0xff, 0xcf, 0xf8, 0x0, 0x0, 0x3, 0xfe,0x0, 0x0, 0x0, 0xff, 0xbf, 0xff, 0xff, 0xff,0xef, 0xff, 0xff, 0xf7, 0xfb, 0xff, 0xff, 0xfc,0xe, 0xf1, 0xc7, 0xf, 0x0, 0x3c, 0x71, 0xc3,0xc0, 0xf, 0xff, 0xff, 0xf0, 0xfb, 0xff, 0xff,0xfc, 0x3e, 0xff, 0xff, 0xff, 0x1f, 0x80, 0x0,0x0, 0x7, 0xcf, 0xff, 0xff, 0xe1, 0xf1, 0xff,0xff, 0xf8, 0x7c, 0x7f, 0xff, 0xfc, 0x1f, 0xf,0xe0, 0x7f, 0xf, 0xc1, 0xfc, 0x3f, 0x83, 0xe0,0x3f, 0xff, 0xc0, 0xf8, 0x3, 0xff, 0xc0, 0x7e,0x1, 0xff, 0xf8, 0x1f, 0x87, 0xff, 0xff, 0xe7,0xc3, 0xff, 0xff, 0xff, 0xf0, 0xff, 0xc3, 0xff,0xf8, 0x3f, 0x0, 0xf, 0xc0, 0xc, 0x0, 0x0,0x30,/* U+7684 "的" */0x7, 0xc0, 0x3e, 0x0, 0x3, 0xe0, 0x1f, 0x0,0x1, 0xf0, 0xf, 0x80, 0x0, 0xf8, 0x7, 0xc0,0xf, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xf3, 0xff,0xff, 0xff, 0xf9, 0xff, 0xff, 0xff, 0xfc, 0xff,0xff, 0xff, 0xfe, 0x7f, 0xff, 0xfc, 0x1f, 0x7e,0x7, 0xfe, 0xf, 0xbf, 0x3, 0xff, 0x7, 0xdf,0x1, 0xff, 0x83, 0xff, 0x80, 0xff, 0xc1, 0xff,0x80, 0x7f, 0xe0, 0xf8, 0x0, 0x3f, 0xf0, 0x7c,0x3c, 0x1f, 0xff, 0xfe, 0x1f, 0xf, 0xff, 0xff,0xf, 0x87, 0xff, 0xff, 0x87, 0xc3, 0xff, 0xff,0xc1, 0xe1, 0xff, 0xff, 0xe0, 0xf0, 0xff, 0xc1,0xf0, 0x7c, 0x7f, 0xe0, 0xf8, 0x3e, 0x3f, 0xf0,0x7c, 0xf, 0x1f, 0xf8, 0x3e, 0x0, 0xf, 0xfc,0x1f, 0x0, 0x7, 0xfe, 0xf, 0x80, 0x3, 0xff,0x7, 0xc0, 0x1, 0xff, 0x83, 0xe0, 0x0, 0xff,0xc1, 0xf0, 0x0, 0x7f, 0xe0, 0xf8, 0x3, 0xff,0xff, 0xfc, 0x1, 0xff, 0xff, 0xfe, 0x0, 0xff,0xff, 0xff, 0x0, 0x7f, 0xff, 0xff, 0x80, 0x3f,0xe0,/* U+7A0B "程" */0x0, 0x3c, 0x0, 0x0, 0x1f, 0xff, 0x9f, 0xff,0xf3, 0xff, 0xf3, 0xff, 0xfe, 0x7f, 0xfe, 0x7f,0xff, 0xcf, 0xff, 0xcf, 0xff, 0xf8, 0xf, 0x81,0xf0, 0x1f, 0x1, 0xf0, 0x3e, 0x3, 0xe0, 0x3e,0x7, 0xc0, 0x7c, 0x7, 0xc0, 0xf8, 0xf, 0x80,0xf8, 0x1f, 0x1, 0xf3, 0xff, 0xfb, 0xff, 0xfe,0x7f, 0xff, 0x7f, 0xff, 0xcf, 0xff, 0xef, 0xff,0xf9, 0xff, 0xfd, 0xff, 0xff, 0x1, 0xf0, 0x0,0x0, 0x0, 0x3e, 0x0, 0x0, 0x0, 0x77, 0xc1,0xff, 0xff, 0xce, 0xf8, 0x3f, 0xff, 0xf9, 0xdf,0xc7, 0xff, 0xff, 0x3b, 0xfe, 0xff, 0xff, 0xe7,0x7f, 0xdf, 0xff, 0xfc, 0xef, 0xf8, 0x7, 0xc0,0x1d, 0xff, 0x0, 0xf8, 0x3, 0xbe, 0xe0, 0x1f,0x0, 0x77, 0xc4, 0xff, 0xff, 0x9e, 0xf8, 0x1f,0xff, 0xf3, 0xdf, 0x3, 0xff, 0xfe, 0x7b, 0xe0,0x7f, 0xff, 0xcf, 0x7c, 0x0, 0x3e, 0x1, 0xef,0x80, 0x7, 0xc0, 0x39, 0xf0, 0x0, 0xf8, 0x7,0x3e, 0x3f, 0xff, 0xff, 0xe7, 0xc7, 0xff, 0xff,0xe0, 0xf8, 0xff, 0xff, 0xfc, 0x1f, 0x1f, 0xff,0xff, 0x80,/* U+8FC7 "过" */0x0, 0x0, 0x0, 0x1e, 0x7, 0xc0, 0x0, 0x3,0xc0, 0xf8, 0x0, 0x0, 0x78, 0x1f, 0x0, 0x0,0xf, 0x1, 0xe1, 0xff, 0xff, 0xfe, 0x3e, 0x3f,0xff, 0xff, 0xc7, 0xc7, 0xff, 0xff, 0xf8, 0x78,0xff, 0xff, 0xff, 0xf, 0x9f, 0xff, 0xff, 0xe0,0x0, 0x0, 0x3, 0xc0, 0x0, 0x0, 0x0, 0x78,0x0, 0x3, 0xf0, 0xf, 0xf, 0xf8, 0x3e, 0x1,0xe1, 0xff, 0x7, 0xc0, 0x3c, 0x3f, 0xe0, 0xfc,0x7, 0x87, 0xfc, 0xf, 0x80, 0xf0, 0xff, 0x81,0xf0, 0x1e, 0x1, 0xf0, 0x1f, 0x3, 0xc0, 0x3e,0x3, 0xe0, 0x78, 0x7, 0xc0, 0x7e, 0xf, 0x0,0xf8, 0x7, 0xc1, 0xe0, 0x1f, 0x0, 0xf8, 0x3c,0x3, 0xe0, 0x0, 0x7, 0x80, 0x78, 0x0, 0x0,0xf0, 0xf, 0x0, 0x1, 0xfe, 0x1, 0xe0, 0x0,0x3f, 0xc0, 0x7c, 0x0, 0x7, 0xf8, 0xf, 0x80,0x0, 0xff, 0x1, 0xf0, 0x0, 0x1f, 0xe0, 0x3e,0x0, 0x0, 0x0, 0xf, 0xf8, 0x0, 0x0, 0x1,0xff, 0xff, 0xff, 0xff, 0x3f, 0xff, 0xff, 0xff,0xe7, 0xff, 0xff, 0xff, 0xfd, 0xf7, 0xff, 0xff,0xff, 0xbe, 0x1f, 0xff, 0xff, 0xf0,/* U+957F "长" */0x3, 0xf0, 0x0, 0x2, 0x0, 0x7e, 0x0, 0x1,0xc0, 0xf, 0xc0, 0x1, 0xf8, 0x1, 0xf8, 0x1,0xff, 0x0, 0x3f, 0x1, 0xff, 0xe0, 0x7, 0xe3,0xff, 0xfc, 0x0, 0xfc, 0xff, 0xfc, 0x0, 0x1f,0x9f, 0xfc, 0x0, 0x3, 0xf3, 0xfc, 0x0, 0x0,0x7e, 0x7c, 0x0, 0x0, 0xf, 0xc8, 0x0, 0x0,0x1, 0xf8, 0x0, 0x0, 0x0, 0x3f, 0x0, 0x0,0x1, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0xf,0xc3, 0xe0, 0x0, 0x1, 0xf8, 0x3e, 0x0, 0x0,0x3f, 0x7, 0xc0, 0x0, 0x7, 0xe0, 0xfc, 0x0,0x0, 0xfc, 0xf, 0x80, 0x0, 0x1f, 0x81, 0xf8,0x0, 0x3, 0xf0, 0x1f, 0x80, 0x0, 0x7e, 0x3,0xf8, 0x0, 0xf, 0xc0, 0x3f, 0x80, 0x1, 0xf8,0x3, 0xfc, 0x0, 0x3f, 0x0, 0x3f, 0xe0, 0x7,0xe0, 0x3, 0xff, 0x80, 0xff, 0xc0, 0x3f, 0xf8,0x1f, 0xf8, 0x3, 0xff, 0x3, 0xff, 0x0, 0x1f,0xe0, 0x7f, 0xe0, 0x0, 0xfc, 0xf, 0xfc, 0x0,0x3, 0x80
};/*---------------------* GLYPH DESCRIPTION*--------------------*/static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {{.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,{.bitmap_index = 0, .adv_w = 226, .box_w = 6, .box_h = 27, .ofs_x = 4, .ofs_y = 0},{.bitmap_index = 21, .adv_w = 608, .box_w = 31, .box_h = 33, .ofs_x = 3, .ofs_y = -4},{.bitmap_index = 149, .adv_w = 608, .box_w = 35, .box_h = 34, .ofs_x = 1, .ofs_y = -5},{.bitmap_index = 298, .adv_w = 608, .box_w = 34, .box_h = 35, .ofs_x = 2, .ofs_y = -4},{.bitmap_index = 447, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 2, .ofs_y = -4},{.bitmap_index = 601, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 2, .ofs_y = -4},{.bitmap_index = 755, .adv_w = 608, .box_w = 34, .box_h = 34, .ofs_x = 2, .ofs_y = -4},{.bitmap_index = 900, .adv_w = 608, .box_w = 34, .box_h = 34, .ofs_x = 2, .ofs_y = -4},{.bitmap_index = 1045, .adv_w = 608, .box_w = 33, .box_h = 35, .ofs_x = 2, .ofs_y = -4},{.bitmap_index = 1190, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 2, .ofs_y = -4},{.bitmap_index = 1344, .adv_w = 608, .box_w = 35, .box_h = 36, .ofs_x = 1, .ofs_y = -4},{.bitmap_index = 1502, .adv_w = 608, .box_w = 35, .box_h = 35, .ofs_x = 1, .ofs_y = -4}
};/*---------------------* CHARACTER MAPPING*--------------------*/static const uint16_t unicode_list_0[] = {0x0, 0x4e3f, 0x5144, 0x5b45, 0x5d2b, 0x5eee, 0x660e, 0x6f0a,0x7663, 0x79ea, 0x8fa6, 0x955e
};/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{{.range_start = 33, .range_length = 38239, .glyph_id_start = 1,.unicode_list = unicode_list_0, .glyph_id_ofs_list = NULL, .list_length = 12, .type = LV_FONT_FMT_TXT_CMAP_SPARSE_TINY}
};/*--------------------* ALL CUSTOM DATA*--------------------*/#if LVGL_VERSION_MAJOR == 8
/*Store all the custom data of the font*/
static lv_font_fmt_txt_glyph_cache_t cache;
#endif#if LVGL_VERSION_MAJOR >= 8
static const lv_font_fmt_txt_dsc_t font_dsc = {
#else
static lv_font_fmt_txt_dsc_t font_dsc = {
#endif.glyph_bitmap = glyph_bitmap,.glyph_dsc = glyph_dsc,.cmaps = cmaps,.kern_dsc = NULL,.kern_scale = 0,.cmap_num = 1,.bpp = 1,.kern_classes = 0,.bitmap_format = 0,
#if LVGL_VERSION_MAJOR == 8.cache = &cache
#endif
};/*-----------------* PUBLIC FONT*----------------*//*Initialize a public general font descriptor*/
#if LVGL_VERSION_MAJOR >= 8
const lv_font_t alimama = {
#else
lv_font_t alimama = {
#endif.get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt, /*Function pointer to get glyph's data*/.get_glyph_bitmap = lv_font_get_bitmap_fmt_txt, /*Function pointer to get glyph's bitmap*/.line_height = 37, /*The maximum line height required by the font*/.base_line = 5, /*Baseline measured from the bottom of the line*/
#if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0).subpx = LV_FONT_SUBPX_NONE,
#endif
#if LV_VERSION_CHECK(7, 4, 0) || LVGL_VERSION_MAJOR >= 8.underline_position = -4,.underline_thickness = 2,
#endif.dsc = &font_dsc, /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
#if LV_VERSION_CHECK(8, 2, 0) || LVGL_VERSION_MAJOR >= 9.fallback = NULL,
#endif.user_data = NULL,
};#endif /*#if ALIMAMA*/将我们的文字c文件放到工程目录下：
在CMakeLists.txtx文件中添加上我们的汉字文件。
1.3.1.5 让文字滚动起来
/*显示中文*/
void demo_Chinese()
{// 0.声明字体LV_FONT_DECLARE(alimama);// 1.得到当前活跃的屏幕lv_obj_t* screen = lv_scr_act();// 2.创建文本对象lv_obj_t* label = lv_label_create(screen);// 3.设置文本对象内容，位置，颜色等等lv_label_set_text(label,"学习嵌入式的过程是漫长的!");// 让文字滚动起来lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR); /*Circular scroll*/lv_obj_set_width(label, 150); // 设置文字宽度超过多少时候就滚动起来// lv_obj_set_pos(label,100,100); //设置标签在屏幕上的位置lv_obj_set_align(label,LV_ALIGN_CENTER); //设置标签位置在屏幕正中央// llv_obj_set_style_text_color(label,lv_color_hex(0x123456),0); //设置标签中字体颜色lv_obj_set_style_text_color(label,lv_color_make(255,0,0),0); //设置标签中字体颜色，最后一个参数默认是0// 4.定义一个样式显示标签字体static lv_style_t style;lv_style_init(&style); //初始化样式结构体lv_style_set_text_font(&style,&alimama); //设置字体样式// 5.将样式和字体关联起来lv_obj_add_style(label,&style,0); //最后一个参数默认是0
}
1.3.2 button按钮
1.3.2.1 button按钮的创建
/*显示按钮*/
void demo_btn()
{// 1.创建一个窗口（屏幕）lv_obj_t* screen = lv_scr_act();// 2.创建按钮对象lv_obj_t* btn = lv_btn_create(screen);// 3.创建样式static lv_style_t style; // 使用static防止样式被回收lv_style_init(&style);lv_style_set_width(&style,100);lv_style_set_height(&style,60);// 4.将样式和按钮绑定在一起lv_obj_add_style(btn,&style,0);// 5.设置按钮文本lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label,"Button");lv_obj_center(label); // 让label标签居于btn的中心lv_obj_center(btn); // 让按钮居于屏幕的中心
}
1.3.2.2 按钮单击事件
/*按钮单击触发事件*/
void event_handler(lv_event_t* e)
{printf("event_handler\r\n");// 获取事件内容int code = lv_event_get_code(e); //获取当前事件的编码printf("code:%d clicked:%d\r\n",code,LV_EVENT_CLICKED);// 获取当前事件触发的对象lv_obj_t* obj = lv_event_get_target(e);printf("obj:%d\r\n",obj);// 改变按钮上面的内容if(code == LV_EVENT_CLICKED) // 如果btn按下{lv_obj_t* label = lv_event_get_user_data(e);lv_label_set_text(label,"handler");}
}/*按钮单击事件*/
void demo_btn_click()
{// 1.创建一个窗口（屏幕）lv_obj_t* screen = lv_scr_act();// 2.创建按钮对象lv_obj_t* btn = lv_btn_create(screen);// 3.创建样式static lv_style_t style; // 使用static防止样式被回收lv_style_init(&style);lv_style_set_width(&style,100);lv_style_set_height(&style,60);// 4.将样式和按钮绑定在一起lv_obj_add_style(btn,&style,0);// 5.设置按钮文本lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label,"Button");lv_obj_center(label); // 让label标签居于btn的中心lv_obj_center(btn); // 让按钮居于屏幕的中心// 6.给按钮添加事件printf("btn:%d\r\n",btn);lv_obj_add_event_cb(btn,event_handler,LV_EVENT_CLICKED,label); //这里设置了btn按钮单击后触发event_handler事件，并且返回label的地址
}
1.3.2.3 按钮状态可选
/*按钮单击触发事件*/
void event_handler(lv_event_t* e)
{printf("event_handler\r\n");// 获取事件内容int code = lv_event_get_code(e); //获取当前事件的编码printf("code:%d clicked:%d\r\n",code,LV_EVENT_CLICKED);// 获取当前事件触发的对象lv_obj_t* obj = lv_event_get_target(e);printf("obj:%d\r\n",obj);// 改变按钮上面的内容if(code == LV_EVENT_CLICKED) // 如果btn按下{lv_obj_t* label = lv_event_get_user_data(e);lv_label_set_text(label,"handler");}else if (code == LV_EVENT_VALUE_CHANGED){lv_obj_t* label = lv_event_get_user_data(e);lv_label_set_text(label,"toggle1");}}/*按钮单击事件*/
void demo_btn_click()
{// 1.创建一个窗口（屏幕）lv_obj_t* screen = lv_scr_act();// 2.创建按钮对象lv_obj_t* btn = lv_btn_create(screen);// 3.创建样式static lv_style_t style; // 使用static防止样式被回收lv_style_init(&style);lv_style_set_width(&style,100);lv_style_set_height(&style,60);// 4.将样式和按钮绑定在一起lv_obj_add_style(btn,&style,0);// 5.设置按钮文本lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label,"Button");lv_obj_center(label); // 让label标签居于btn的中心lv_obj_center(btn); // 让按钮居于屏幕的中心// 6.给按钮添加事件printf("btn:%d\r\n",btn);lv_obj_add_event_cb(btn,event_handler,LV_EVENT_CLICKED,label); //这里设置了btn按钮单击后触发event_handler事件，并且返回label的地址/*可选中的按钮*/lv_obj_t * btn2 = lv_btn_create(lv_scr_act());lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 80);lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);lv_obj_set_height(btn2, LV_SIZE_CONTENT);lv_obj_add_style(btn2,&style,0);label = lv_label_create(btn2);lv_label_set_text(label, "Toggle");lv_obj_center(label);lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_VALUE_CHANGED, label);
}1.3.3 Button Matrix按钮矩阵
1.3.3.1 创建Button Matrix
/*构建按钮矩阵*/
void demo_btn_marix()
{// 1.得到屏幕lv_obj_t* screen = lv_scr_act();// 2.创建按钮矩阵lv_obj_t* btn_matrix = lv_btnmatrix_create(screen); // 3.设置static const char* map[] = {"1","2","3","\n","4","5","6","\n","7","8","9","\n","BACK","0","ENTER",""};// 这里需要使用申请一个static空间，否则会闪退，末尾加一个空字符表示结束lv_btnmatrix_set_map(btn_matrix,map); // 设置按钮内容// lv_obj_set_width(btn_matrix,200);
}
1.3.3.2 按钮矩阵事件处理
/*按钮矩阵事件*/
void btn_matrix_callback(lv_event_t* e)
{// 获取当前触发的事件编码int code = lv_event_get_code(e);// 获取当前btnmatrixlv_obj_t* btnmatrix = lv_event_get_target(e);if(code == LV_EVENT_VALUE_CHANGED){// 获取当前点击的是哪个按钮uint8_t selected_index = lv_btnmatrix_get_selected_btn(btnmatrix);// 获取按钮对应的文本信息char* text = lv_btnmatrix_get_btn_text(btnmatrix,selected_index);printf("value:%s\r\n",text);}
}/*构建按钮矩阵*/
void demo_btn_marix()
{// 1.得到屏幕lv_obj_t* screen = lv_scr_act();// 2.创建按钮矩阵lv_obj_t* btn_matrix = lv_btnmatrix_create(screen); // 3.设置static const char* map[] = {"1","2","3","\n","4","5","6","\n","7","8","9","\n","BACK","0","ENTER",""};// 这里需要使用申请一个static空间，否则会闪退，末尾加一个空字符表示结束lv_btnmatrix_set_map(btn_matrix,map); // 设置按钮内容// lv_obj_set_width(btn_matrix,200);lv_obj_center(btn_matrix); // 居中显示// 4.添加事件lv_obj_add_event_cb(btn_matrix,btn_matrix_callback,LV_EVENT_VALUE_CHANGED,NULL);
}1.3.4 Text aera文本框
/*文本输入框事件*/
static void textarea_event_handler(lv_event_t * e)
{lv_obj_t * ta = lv_event_get_target(e);LV_UNUSED(ta);LV_LOG_USER("Enter was pressed. The current text is: %s", lv_textarea_get_text(ta));
}static void btnm_event_handler(lv_event_t * e)
{lv_obj_t * obj = lv_event_get_target(e);lv_obj_t * ta = lv_event_get_user_data(e);const char * txt = lv_btnmatrix_get_btn_text(obj, lv_btnmatrix_get_selected_btn(obj));if(strcmp(txt, LV_SYMBOL_BACKSPACE) == 0) lv_textarea_del_char(ta);else if(strcmp(txt, LV_SYMBOL_NEW_LINE) == 0) lv_event_send(ta, LV_EVENT_READY, NULL);else lv_textarea_add_text(ta, txt);}/*构建文本输入框*/
void demo_textaera()
{// 1.显示对象lv_obj_t* screen = lv_scr_act();// 2.创建要显示的对象lv_obj_t * ta = lv_textarea_create(screen);// 3.对显示的对象进行测试lv_textarea_set_one_line(ta, true); // 设置只显示一行lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 10);lv_obj_add_event_cb(ta, textarea_event_handler, LV_EVENT_READY, ta);lv_obj_add_state(ta, LV_STATE_FOCUSED); /*To be sure the cursor is visible*/static const char * btnm_map[] = {"1", "2", "3", "\n","4", "5", "6", "\n","7", "8", "9", "\n",LV_SYMBOL_BACKSPACE, "0", LV_SYMBOL_NEW_LINE, ""};lv_obj_t * btnm = lv_btnmatrix_create(lv_scr_act());lv_obj_set_size(btnm, 200, 150);lv_obj_align(btnm, LV_ALIGN_BOTTOM_MID, 0, -10);lv_obj_add_event_cb(btnm, btnm_event_handler, LV_EVENT_VALUE_CHANGED, ta);lv_obj_clear_flag(btnm, LV_OBJ_FLAG_CLICK_FOCUSABLE); /*To keep the text area focused on button clicks*/lv_btnmatrix_set_map(btnm, btnm_map);
}1.3.5 显示Image
对图片对象进行编码：
Image Converter — LVGL
将转换好的c文件添加进CMakeLists.txt中。
图片转码之后的信息：
/*显示图片*/
void dmeo_img()
{// 1.显示对象lv_obj_t* screen = lv_scr_act();// 2.创建图片对象lv_obj_t* img = lv_img_create(screen);// 3.给图片对象设置图片LV_IMG_DECLARE(J20); // 声明图片lv_img_set_src(img,&J20);lv_obj_align(img,LV_ALIGN_CENTER,0,0); // 图片居中显示
}1.3.6 显示gif
将转换好的c文件添加进CMakeLists.txt中。
不显示gif的解决办法：
【LVGL】LVGL8.1 使用GIF库_单片机_mainy4210-GitCode 开源社区 (csdn.net)
/*显示gif*/
void demo_gif()
{LV_IMG_DECLARE(astro); // 声明图片// 1.显示对象lv_obj_t* screen = lv_scr_act();// 2.创建图片对象lv_obj_t* gif = lv_gif_create(screen);// 3.给图片对象设置图片 lv_gif_set_src(gif,&astro);lv_obj_align(gif,LV_ALIGN_CENTER,0,0); // 图片居中显示
}1.4 布局
1.4.1 Flex弹性布局
/*弹性布局*/
void flex_1(void)
{/*Create a container with ROW flex direction*/lv_obj_t * cont_row = lv_obj_create(lv_scr_act());lv_obj_set_size(cont_row, 240, 75);lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);/*Create a container with COLUMN flex direction*/lv_obj_t * cont_col = lv_obj_create(lv_scr_act());lv_obj_set_size(cont_col, 200, 200);lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);uint32_t i;for(i = 0; i < 10; i++) {lv_obj_t * obj;lv_obj_t * label;/*Add items to the row*/obj= lv_btn_create(cont_row);lv_obj_set_size(obj, 100, LV_PCT(100));label = lv_label_create(obj);lv_label_set_text_fmt(label, "Item: %u", i);lv_obj_center(label);/*Add items to the column*/obj = lv_btn_create(cont_col);lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);label = lv_label_create(obj);lv_label_set_text_fmt(label, "Item: %"LV_PRIu32, i);lv_obj_center(label);}
}
1.4.2 Grid网格布局
void grid_1(void)
{static lv_coord_t col_dsc[] = {60, 60, 60, LV_GRID_TEMPLATE_LAST};static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};/**60 60 60505050*//*Create a container with grid*/lv_obj_t * cont = lv_obj_create(lv_scr_act());lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0);lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0);lv_obj_set_size(cont, 220, 280);lv_obj_center(cont);lv_obj_set_layout(cont, LV_LAYOUT_GRID);lv_obj_t * label;lv_obj_t * obj;uint32_t i;for(i = 0; i < 9; i++) {uint8_t col = i % 3;uint8_t row = i / 3;obj = lv_btn_create(cont);/*Stretch the cell horizontally and vertically too*Set span to 1 to make the cell 1 column/row sized*/lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1,LV_GRID_ALIGN_STRETCH, row, 1);label = lv_label_create(obj);lv_label_set_text_fmt(label, "c%d, r%d", col, row);lv_obj_center(label);}
}
1.5 界面切换
/*页面切换*/
lv_obj_t* page1;
lv_obj_t* page2;void enent_handler_page(lv_event_t* e)
{int code = lv_event_get_code(e);if(code == LV_EVENT_CLICKED){//获取用户传递的数据uint8_t index = lv_event_get_user_data(e);switch (index){case 1:lv_disp_load_scr(page2); //跳转到page2break;case 2:lv_disp_load_scr(page1); //跳转到page1break;}}
}void create_page1()
{//创建一个页面page1 = lv_obj_create(NULL);lv_obj_t* obj = lv_obj_create(page1); //在page1上创建一个对象//显示一些内容static lv_style_t style;lv_style_init(&style);lv_style_set_width(&style,100);lv_style_set_height(&style,100);lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_RED));lv_obj_add_style(obj,&style,0);//添加显示文本lv_obj_t* label1 = lv_label_create(obj);lv_label_set_text(label1,"PAGE111");lv_obj_set_align(label1,LV_ALIGN_CENTER);//添加单击事件实现page1上点击按钮跳转到page2lv_obj_add_event_cb(obj,enent_handler_page,LV_EVENT_CLICKED,1);
}void create_page2()
{//创建一个页面page2 = lv_obj_create(NULL);lv_obj_t* obj = lv_obj_create(page2); //在page1上创建一个对象//显示一些内容static lv_style_t style;lv_style_init(&style);lv_style_set_width(&style,100);lv_style_set_height(&style,100);lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_BLUE));lv_obj_add_style(obj,&style,0);//添加显示文本lv_obj_t* label2 = lv_label_create(obj);lv_label_set_text(label2,"PAGE222");lv_obj_set_align(label2,LV_ALIGN_CENTER);lv_obj_add_event_cb(obj,enent_handler_page,LV_EVENT_CLICKED,2);
}
在main函数里要先加载一个默认页面：
create_page1();create_page2();lv_disp_load_scr(page1); //默认程序执行显示page11.6 Tabview
void demo_tabivew()
{lv_obj_t * tabview;tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 50);/*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1");lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2");lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tab 3");/*Add content to the tabs*/lv_obj_t * label = lv_label_create(tab1);lv_label_set_text(label, "This the first tab\n\n""If the content\n""of a tab\n""becomes too\n""longer\n""than the\n""container\n""then it\n""automatically\n""becomes\n""scrollable.\n""\n""\n""\n""Can you see it?");label = lv_label_create(tab2);lv_label_set_text(label, "Second tab");label = lv_label_create(tab3);lv_label_set_text(label, "Third tab");lv_obj_scroll_to_view_recursive(label, LV_ANIM_ON);
}1.7 如何学习官网案例
对于条件编译的案例：
在"lv_conf.h"里找到对应部分置1，就可以使用了。
1.8 修改屏幕大小
1.9 动态的显示表格数据
lv_obj_t * chart;
lv_chart_series_t * ser1;
void demo_chart()
{/*Create a chart*/chart = lv_chart_create(lv_scr_act());lv_obj_set_size(chart, 200, 150);lv_obj_center(chart);lv_chart_set_type(chart, LV_CHART_TYPE_LINE); /*Show lines and points too*//*Add two data series*/ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_SECONDARY_Y);/*Set the next points on 'ser1'*/lv_chart_set_next_value(chart, ser1, 10);lv_chart_set_next_value(chart, ser1, 10);lv_chart_set_next_value(chart, ser1, 10);lv_chart_set_next_value(chart, ser1, 10);lv_chart_set_next_value(chart, ser1, 10);lv_chart_set_next_value(chart, ser1, 10);lv_chart_set_next_value(chart, ser1, 10);lv_chart_set_next_value(chart, ser1, 30);lv_chart_set_next_value(chart, ser1, 70);lv_chart_set_next_value(chart, ser1, 90);lv_chart_refresh(chart); /*Required after direct set*/
}
count += 5;if(count/1000 == 0){lv_chart_set_next_value(chart,ser1,lv_rand(50,100));lv_chart_refresh(chart);count = 0;}02 SquareLine Studio
2.1 SquareLine Studio创建UI
注：SquareLine Studio里设置角度的时候需要在常规认知度数上乘以10倍，比如我想旋转某个图片30°，在设置的时候写300。
这里显示了这个项目中使用的资源，直接使用文件查找工具找到这些资源拷贝下来自己使用。
参照案例创作好我们的表盘后，导出成为LVGL工程：
将我们导出的UI复制进LVGL工程里：
2.2 将UI配置进LVGL工程中
# define SDL_HOR_RES 392
# define SDL_VER_RES 392
#define LV_COLOR_DEPTH 16 #define LV_COLOR_16_SWAP 1
![C++ char*和char[] 可能指向的内存区域详解（附实验）](https://i-blog.csdnimg.cn/direct/56c11ea0cb5945d78990329f76be1dbd.png)
![[数据集][目标检测]智慧交通铁路人员危险行为躺站坐检测数据集VOC+YOLO格式3766张4类别](https://i-blog.csdnimg.cn/direct/1d2d8798e66244b5bc3b5155f59c0590.png)
