ESP32学习笔记 -- ESP32使用GUI-Guider制作LVGL图形界面

本文介绍了如何使用GUI Guider工具在ESP32上创建和设计LVGL图形界面。通过该工具,可以采用拖放方式设计界面,然后生成C代码并移植到ESP32。在移植过程中,需要处理代码生成、图片解码库的集成以及适配工作。最后,文章提到了LVGL官方的EdgeLine作为替代选项。

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

上一篇文章讲述了如何移植嵌入式图形界面库LVGL到ESP32芯片平台,并成功在ESP32上面运行LVGL的官方demo,上一篇文章请参考以下链接。

ESP32学习笔记 - 移植LVGL_EmbedIoT Studio-优快云博客

截止至2021年11 月,LVGL官方尚未推出PC端的GUI设计工具,因此,在大多数情况下使用LVGL开发图形界面的时候,都是用代码的方式进行界面布局设计的,而不是使用拖曳控件的方式进行设计,这样会让工程师的工作量增加不少。

有痛点就有工程师想办法解决,恩智浦(NXP)为了方便广大工程师开发LVGL界面应用,推出了基于LVGL的拖曳式GUI编程辅助工具,GUI Guider,这个工具的链接地址,如下所示。

LVGL(Light and Versatile Graphics Library)是一个开源的图形库,广泛用于嵌入式系统中创建图形用户界面。自定义绘制表格在LVGL中可以通过多种方式实现,下面是一个简单的示例代码,展示如何自定义绘制表格: ```c #include "lvgl.h" static void draw_table(lv_obj_t * obj, lv_area_t * mask, const lv_point_t * points, uint16_t point_cnt) { lv_draw_rect_dsc_t rect_dsc; lv_draw_rect_dsc_init(&rect_dsc); rect_dsc.bg_color = LV_COLOR_BLUE; rect_dsc.border_color = LV_COLOR_WHITE; rect_dsc.border_width = 1; for(uint16_t i = 0; i < point_cnt; i++) { lv_area_t cell_area; cell_area.x1 = points[i].x; cell_area.y1 = points[i].y; cell_area.x2 = points[i].x + 50; cell_area.y2 = points[i].y + 30; lv_draw_rect(&cell_area, mask, &rect_dsc, NULL); } } void create_custom_table(void) { lv_obj_t * scr = lv_scr_act(); lv_obj_t * table = lv_obj_create(scr, NULL); lv_obj_set_size(table, 200, 150); lv_obj_align(table, NULL, LV_ALIGN_CENTER, 0, 0); static lv_point_t points[4]; points[0].x = 0; points[0].y = 0; points[1].x = 50; points[1].y = 0; points[2].x = 0; points[2].y = 30; points[3].x = 50; points[3].y = 30; lv_obj_set_style_local_draw_main_cb(table, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, draw_table); lv_obj_set_style_local_bg_opa(table, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP); } int main(void) { lv_init(); // 初始化硬件和显示驱动 // ... create_custom_table(); while(1) { lv_task_handler(); // 延时 // ... } return 0; } ``` 在这个示例中,我们首先定义了一个 `draw_table` 函数,用于绘制表格的每个单元格。然后在 `create_custom_table` 函数中,我们创建了一个 LVGL 对象,并设置其绘制回调为 `draw_table` 函数。最后,我们初始化 LVGL 并进入主循环。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

工程师进阶笔记

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

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

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

打赏作者

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

抵扣说明:

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

余额充值