lvgl小部件使用demo示例说明2

已于 2022-07-21 11:16:10 修改
阅读量2.1k 收藏 7
点赞数 2
分类专栏： 嵌入式UI专栏 文章标签： 单片机 c语言
于 2022-06-24 11:18:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32348883/article/details/125441884
版权
本文详细介绍了LVGL图形库的使用，包括画布的创建、设置缓冲区、填充颜色等操作，图像控件的创建、旋转及抗锯齿设置，以及水平、垂直布局和网格布局的实现。通过示例代码展示了如何在LVGL中绘制图形、添加图像和组织界面元素，帮助开发者更好地理解和应用LVGL进行图形界面设计。
摘要由CSDN通过智能技术生成

简介

本文继续延续上文未完成的lvgl,使用实例说明。

lvgl 画布使用介绍

常用API说明

//画布创建
lv_canvas_create(lv_obj_t * parent);

//给画布设置BUFF
lv_canvas_set_buffer(lv_obj_t * obj, void * buf, lv_coord_t w, lv_coord_t h, lv_img_cf_t cf);

//画板初始化
lv_canvas_set_palette(lv_obj_t * obj, uint8_t id, lv_color_t c);

//用画板为画布填充颜色
lv_canvas_fill_bg(lv_obj_t * canvas, lv_color_t color, lv_opa_t opa);

//在指定X,Y区域填充指定画板颜色
lv_canvas_set_px(lv_obj_t * obj, lv_coord_t x, lv_coord_t y, lv_color_t c);

//转换图像放置到画布上
void lv_canvas_transform(lv_obj_t *canvas, lv_img_dsc_t *img, int16_t angle, uint16_t zoom, lv_coord_t offset_x, lv_coord_t offset_y, int32_t pivot_x, int32_t pivot_y, bool antialias);

//在画布上画一个矩形
void lv_canvas_draw_rect(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, lv_coord_t w, lv_coord_t h, const lv_draw_rect_dsc_t *draw_dsc);

//在画布上画一个文本
void lv_canvas_draw_text(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, lv_coord_t max_w, lv_draw_label_dsc_t *draw_dsc, const char *txt);

//在画布上画一个图像
void lv_canvas_draw_img(lv_obj_t *canvas, lv_coord_t x, lv_coord_t y, const void *src, const lv_draw_img_dsc_t *draw_dsc);

//在画布上画一条线
void lv_canvas_draw_line(lv_obj_t *canvas, const lv_point_t points[], uint32_t point_cnt, const lv_draw_line_dsc_t *draw_dsc);

//在画布上画一个多边形
void lv_canvas_draw_polygon(lv_obj_t *canvas, const lv_point_t points[], uint32_t point_cnt, const lv_draw_rect_dsc_t *draw_dsc);

示例举例

#define CANVAS_WIDTH  50
#define CANVAS_HEIGHT  50
/*Create a buffer for the canvas*/
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT)];

/*Create a canvas and initialize its palette*/
lv_obj_t * canvas = lv_canvas_create(lv_scr_act());
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_INDEXED_1BIT);
lv_canvas_set_palette(canvas, 0, lv_palette_main(LV_PALETTE_YELLOW));
lv_canvas_set_palette(canvas, 1, lv_palette_main(LV_PALETTE_BLUE));

/*Create colors with the indices of the palette*/
lv_color_t c1;
lv_color_t c0;

c1.full = 1;
c0.full = 0;

/*Red background (There is no dedicated alpha channel in indexed images so LV_OPA_COVER is ignored)*/
lv_canvas_fill_bg(canvas, c1, LV_OPA_COVER);

/*Create hole on the canvas*/
uint32_t x;
uint32_t y;
for( y = 0; y < 25; y++) 
{
    for( x = 0; x < 25; x++) 
    {
        lv_canvas_set_px(canvas, x, y, c0);
    }
}

使用效果如下

在这里插入图片描述

lvgl image控件使用说明

常用API介绍

//创建image小部件
lv_obj_t * lv_img_create(lv_obj_t * parent)；

//为显示对象设置图像数据
void lv_img_set_src(lv_obj_t * obj, const void * src);

//为图像设置X方向偏移
void lv_img_set_offset_x(lv_obj_t *obj, lv_coord_t x);

//为图像设置Y方向偏移
void lv_img_set_offset_y(lv_obj_t *obj, lv_coord_t y);

//图像旋转指定角度
void lv_img_set_angle(lv_obj_t *obj, int16_t angle);

//图片抗锯齿使能设置
void lv_img_set_antialias(lv_obj_t *obj, bool antialias);

使用举例

LV_IMG_DECLARE(img_cogwheel_argb);
lv_obj_t * img1 = lv_img_create(lv_scr_act());
lv_img_set_src(img1, &img_cogwheel_argb);
lv_obj_align(img1, LV_ALIGN_CENTER, 0, -20);
lv_obj_set_size(img1, 200, 200);

使用效果如下

在这里插入图片描述

LVGL 布局介绍

水平、垂直布局

常用API

//创建基础对象
lv_obj_create(lv_scr_act());

// 设置对象使用基于行的流失弹性布局flex
lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW); 

// 设置对象使用基于列的流失弹性布局flex
lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);

//在创建小部件对象的时候加入布局设置，使其在指定布局中
lv_btn_create(cont_row);

使用举例1

/*创建一个具有水平伸缩方向的容器*/
lv_obj_t * cont_row = lv_obj_create(lv_scr_act()); //创建基础对象
lv_obj_set_size(cont_row, 300, 75); //设置容器大小
lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5); //设置对齐方式（屏幕中间顶部对齐）
lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW); // 设置对象使用基于行的流失弹性布局flex

/*创建一个具有垂直伸缩方向的容器*/
lv_obj_t * cont_col = lv_obj_create(lv_scr_act()); //创建基础对象
lv_obj_set_size(cont_col, 200, 150); //设置容器大小
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);  // 设置对象使用基于列的流失弹性布局flex

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: %u", i); //设置按键名
   lv_obj_center(label);
}

使用效果如下

在这里插入图片描述

使用举例2

往水平布局中加入其它布局，例如：

lv_obj_t * cont = lv_obj_create(lv_scr_act());
lv_obj_set_size(cont, 300, 220);
lv_obj_center(cont);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);

lv_obj_t * obj;
obj = lv_obj_create(cont);
lv_obj_set_size(obj, 40, 40);           /*Fix size*/

obj = lv_obj_create(cont);
lv_obj_set_height(obj, 40);
lv_obj_set_flex_grow(obj, 1);           /*1 portion from the free space*/

obj = lv_obj_create(cont);
lv_obj_set_height(obj, 40);
lv_obj_set_flex_grow(obj, 2);           /*2 portion from the free space*/

obj = lv_obj_create(cont);
lv_obj_set_size(obj, 40, 40);           /*Fix size. It is flushed to the right by the "grow" items*/

使用效果如下

在这里插入图片描述

网格布局

常用API：

//创建对象
lv_obj_t * cont = lv_obj_create(lv_scr_act()); 
//将对象设置为网格布局
lv_obj_set_layout(cont, LV_LAYOUT_GRID);

//设置网格布局列宽
void lv_obj_set_style_grid_column_dsc_array(lv_obj_t * obj, const lv_coord_t value[], lv_style_selector_t selector);

//设置网格布局行高
void lv_obj_set_style_grid_row_dsc_array(lv_obj_t * obj, const lv_coord_t value[], lv_style_selector_t selector);

使用示例

//定义3列，每列的列宽为70，LV_GRID_TEMPLATE_LAST作为结束符
static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST};
//定义3行，每行的行高为50，LV_GRID_TEMPLATE_LAST作为结束符
static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST};



/*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, 300, 220); //设置布局大小
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);
}

使用效果如下所示：
在这里插入图片描述

路过的小熊~
关注
专栏目录
lv_examples：LVGL嵌入式GUI库的示例，教程和应用程序
02-12
LVGL的例子 在这里，您可以找到LVGL嵌入式GUI库的示例和演示。 将示例添加到您的项目中 克隆此存储库： git clone https://github.com/lvgl/lv_examples.git 。 lv_examples目录应位于项目中lvgl目录的旁边。 与lv_conf.h类似， lv_conf.h也有一个配置文件。 它称为lv_ex_conf.h 。 将lv_examples/lv_ex_conf_templ.h复制到lv_examples目录旁边 将其重命名为lv_ex_conf.h 将第一个#if 0更改为#if 1以启用文件的内容 启用或禁用模块 例子 开始吧 如果您不熟悉LVGL，请首先检查以下示例。 他们展示了图书馆的基本机制。 请参阅文件夹。 您也可以查看LVGL的Quich以了解基础知识。 款式 LVGL具有功能强大且用途广泛的样式系统。 这些
调试 lvgl 的一个例子
weixin_34208185的博客
08-22 9041
发现一个新的 vector graphic 的库，用 C 写的，效果丰富，接口简单，而且是 MIT License，所以想试一试。因为它支持 framebuffer，所以，在 linux 上先走一个。 项目主页：https://littlevgl.com/   1. 文件准备 项目组织还不是很好，所以需要手动配置项目，需要的文件包括： - lvgl 主项目  - lv_driver 目...
【LVGL进阶日记】① 开源LVGL在MCU上的移植
最新发布
量子君的CSDN博客
10-05 800
本文介绍了LVGL主要特性、对MCU性能要求、移植到MCU的关键步骤及重要代码块等详解
项目经验分享：LVGL编程举例
Donald_Shallwing的博客
05-31 9676
与绝大多数GUI组件相似，LVGL的GUI组件主要包括Lable（标签）、Button（按键）、Image（图片）、Image Button（图片按钮）、Keyboard（键盘）、Calendar（日历表）、Chart（数据表）等。LVGL中所有的组件对象都是由lv_obj_t来定义的，并通过对应的组件创建函数lv_XXX_create来创建相关的对象。lv_scr_act()表示对组件赋予显示功能。
LVGL | Demo实例使用说明
I_feige的博客
12-10 2231
LVGL | Demo实例使用说明
【GD32学习】 LVGL Demo测试
king_2016_6_6的博客
06-23 2644
上一篇已经将lvgl源码移植到工程中，这里要配置demo例程，跑一下demo程序看看移植好lvgl的工程修改头晚间包含 lv_port_disp_template改为lv_port_disp 编译报错和警告，没有定义水平MY_DISP_HOR_RES、垂直分辨率MY_DISP_VER_RES和 最大水平分辨率MY_DISP_VER_RES 通过这里我们可以看到如果我们没有自己定义 水平MY_DISP_HOR_RES、垂直分辨率MY_DISP_VER_RES，编译会警告，并且会提供默认的分辨率 我们在外面自己
lvgl_music_demo.7z
07-13
2. **readme.txt**：通常包含关于项目的基本信息、安装指南或使用说明，对于理解和运行此示例非常重要。 3. **SYSTEM**、**HALLIB**、**CORE**、**OBJ**：这些文件夹可能包含了项目所需的库文件、系统配置、中间...
LVGL-v8.1 demo win32 VS2017工程
02-12
LVGL-v8.1 demo win32 VS2017 工程是针对LVGL库的Windows 32位版本的一个示例项目，旨在帮助开发者在Visual Studio 2017环境下运行和调试LVGL应用程序。由于官方的win32 port项目配置可能不够清晰或对某些用户不友好...
开箱即用的esp32 lvgl的demo文件
02-14
通常，你将在这里找到如何配置LVGL以使用ESP32的SPI或I2S接口来驱动LCD显示屏的示例。 在开始使用这个demo时，你需要： 1. 安装ESP-IDF工具链和VSCode的ESP-IDF插件。 2. 配置你的VSCode工作区，指向ESP-IDF的安装...
正点原子stm32f429 7寸1024x600 cubmex加上LVGL7.8demo
12-15
在本项目中，它被用于驱动7英寸1024x600分辨率的显示屏，并展示了一个使用LVGL图形库的DEMO。 LVGL（LittleVGL）是一个开源、跨平台的图形库，专为嵌入式设备设计，支持多种操作系统和硬件平台。它提供了丰富的图形...
TFT-LCD LVGL官方例程的应用
weixin_46251230的博客
11-27 2369
这次显示了两个按钮，第一个按钮是灰色的，第二个按钮是红色的，按钮可以触摸，还有一个进度条，拉动进度条下面显示的数字会跟着改变，可以看出lvgl的界面功能还是挺不错的。点击跳转到该条件处，发现在lv_ex_conf.h头文件中进行了宏定义，默认是0的，所以lv_demo_widgets函数不起作用，需要将0改为1，函数才被编译。再在初始化函数中调用lv_ex_get_started_2()和lv_ex_get_started_3()，再编译烧录。编译发现没错后，烧录到开发板上查看显示效果。
STM32F4-3-运行LVGL基础案例.rar
03-01
LVGL基础案例、ST7789屏幕
LVGL8.1笔记3--运行demo（2022-0611）
未来可期
06-13 1万+
运行LVGL的官方demo
LVGL demo project for ESP32
yzhj2005的专栏
08-05 302
LVGL demo project for ESP32
LVGL案例分享--手把手教你移植到T113-i国产工业开发板
DOT小文哥的博客
11-17 1464
lvgl在Linux上的移植是比较简单快捷的；只需要修改几个配置文件，即可在目标上运行，对我们部署UI非常方便。lvgl在T113-i上运行整体效果还可以，流畅度整体满意，适合做一些项目的落地。lvgl的是跨平台的，所以写一个应用可以多端部署，避免了重复开发的过程。
【案例讲解】LVGL 焦点处理示例
Bigan(安)的博客
03-22 1918
这一章节主要是测试焦点的一些特性，及常用焦点的功能实现方法。
Lvgl8 scroll 水平/垂直滚动切换
weixin_43808708的博客
01-19 5401
【代码】Lvgl8 scroll 水平/垂直滚动切换。
《ESP32-Arduino》LVGL之输入设备详解及实例(触摸屏,实体按键,编码器,多功能按键)
热门推荐
MGodmonkey的专属博客
03-01 1万+
LVGL之输入设备详解及实例(触摸屏,实体按键,编码器,多功能按键)
使用lvgl给出以上demo
06-07
好的，以下是使用lvgl实现的示例代码，用于在屏幕恢复亮起来时自动刷新屏幕： ```c #include <lvgl/lvgl.h> // 定义屏幕数据和哈希值 static uint32_t data_hash = 0; static uint32_t screen_data = 0; // 用于检查数据是否已经更新过 static bool data_updated = false; // 定义一个定时器，用于定时检查数据是否已经更新过 static lv_timer_t *timer; // 回调函数，用于更新屏幕数据 static void update_screen_data(void) { // 更新屏幕数据 screen_data = /* 获取最新的屏幕数据 */; // 计算哈希值 data_hash = /* 计算哈希值 */; // 标记数据已经更新过 data_updated = true; } // 回调函数，用于检查数据是否已经更新过 static void check_data_updated(lv_timer_t *timer) { // 如果数据已经更新过，则刷新屏幕 if (data_updated) { lv_disp_flush_ready(NULL); data_updated = false; } } // 回调函数，用于在屏幕恢复亮起来时检查数据是否已经更新过 static void on_screen_wake_up(lv_disp_t *disp) { // 检查数据是否已经更新过 if (data_hash != /* 获取当前屏幕数据的哈希值 */) { lv_disp_flush_ready(disp); return; } // 如果数据没有更新过，启动定时器定时检查 lv_timer_set_repeat(timer, 1000); lv_timer_set_cb(timer, check_data_updated); lv_timer_start(timer); } int main(void) { // 初始化LVGL lv_init(); // 创建一个窗口 lv_obj_t *win = lv_win_create(lv_scr_act(), NULL); lv_win_set_title(win, "Demo"); // 创建一个按钮 lv_obj_t *btn = lv_btn_create(win, NULL); lv_obj_set_size(btn, 100, 50); lv_obj_align(btn, NULL, LV_ALIGN_CENTER, 0, 0); lv_obj_t *label = lv_label_create(btn, NULL); lv_label_set_text(label, "Click me"); // 注册屏幕唤醒回调函数 lv_disp_set_wakeup_hook(lv_disp_get_default(), on_screen_wake_up); // 创建定时器 timer = lv_timer_create(check_data_updated, 1000, NULL); // 更新屏幕数据 update_screen_data(); // 进入主循环 while (1) { lv_task_handler(); /* 其他任务处理 */ } return 0; } ``` 在这个示例中，我们定义了一个`data_updated`标志，用于标记数据是否已经更新过。在数据更新时，我们将`data_updated`标志设置为`true`，并计算数据的哈希值。在屏幕恢复亮起来时，我们首先检查数据的哈希值是否一致，如果不一致，直接刷新屏幕。如果数据的哈希值一致，就启动一个定时器，定时检查`data_updated`标志是否为`true`，如果为`true`，就刷新屏幕。如果`data_updated`标志为`false`，就不刷新屏幕。这样，即使屏幕上没有新的数据需要刷新，也能够自动刷新屏幕以确保显示的数据是最新的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

路过的小熊~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值