(十七)零基础开发小安派-Eyes-S1【进阶篇】——初识LVGL并搭建最小工程

[复制链接]
查看2771 | 回复22 | 2023-12-26 18:00:43 | 显示全部楼层 |阅读模式

本帖最后由 Ai-Thinker小泽 于 2023-12-26 17:57 编辑

零基础开发小安派-Eyes-S1【进阶篇】——初识LVGL并搭建最小工程

教程已经更新了一段时间了,感谢大家这段时间的陪伴,在这2024即将到来之际,我们也一同进入了小安派的进阶篇。进阶篇的内容其实只是加上了LVGL的运用,让大家可以更加直观的使用交互界面而完成一个中控屏的项目。在这段时间里我也学习到了许多东西,大家虽然一口一句泽哥的喊着,其实都是我的前辈,跟着大家一同成长十分幸运。

LVGL(轻量级和通用图形库) 是一个免费和开源的图形库,它提供了创建嵌入式 GUI 所需的一切,具有易于使用的图形元素,美丽的视觉效果和低内存占用。咱们的小安派-Eyes-S1配备了一块3.5寸的屏幕,既然有屏幕,必须合理运用起来,搭配上LVGL可以显示我们所需的交互界面。LVGL我也是第一次接触,望各位前辈不吝赐教。

一、安装GUI-Guider

GUI-Guider是恩智浦为LVGL开发了一个上位机GUl设计工具,可以通过拖放控件的方式设计LVGL GUl页面,加速 GUI的设计,总得来说,我们可以使用这个软件设计我们需要显示的内容以及交互界面,相当于设计一个前端界面。

这里先附上LVGL的开发手册(全英):LVGL官方手册

看不懂英文的可以用百问网的LVGL中文手册:百问网LVGL手册

首先进入NXP的官网,这里附上网址:NPX官网

搜索GUI Guider,这里可能需要注册账号,跟随提示注册好账号后才可以正常下载软件

屏幕截图2023-12-25102344.png

在下载里选择对应的软件下载,这里选择我选择1.6.1的win10版本(实测我的win11系统,一样可以使用)。

屏幕截图2023-12-25102357.png

下载完需要的安装包后,点击打开安装程序。

屏幕截图2023-12-25102650.png

选择下载的位置,这里我在E盘中常用的位置创建了相应的文件夹。

屏幕截图2023-12-25102909.png

点击下一步等待完成安装。

屏幕截图2023-12-25102931.png

安装完成后点击进入软件界面。

二、设计一个最简单的UI界面

点击Create a new project,创建新的工程。

屏幕截图2023-12-25102949.png

LVGL版本选择V8.3.5。

屏幕截图2023-12-25112733.png

设备模板选择模拟器,也就是图中的Simulator。

屏幕截图2023-12-25112748.png

模板选择EmptyUi,也就是空白模板。

屏幕截图2023-12-25112858.png

项目配置信息,填入工程名字,工程目录(建议在自己方便查找的位置建立一个Project文件夹存储我们的所有工程文件),色彩深度选择16bit即可,面板类型根据显示屏类型来选择,S1配备的3.5寸屏幕,由于默认的显示屏是竖屏显示的,可以选择自定义240x320,而我个人比较喜欢横屏显示,选择320x240,后续修改显示屏配置文件旋转90°,这个我们稍后会操作。

屏幕截图2023-12-25112946.png

在前面的截图中大家可能会是英文界面,但也基本能看懂,其实是我截图时已经将软件设置成中文了,默认是语言是中文。在创建了第一个工程后可以在界面进行一些页面显示设置,右上角有语言的设置,这里选择中文,界面的颜色我选择暗色。

屏幕截图2023-12-25113011.png

屏幕截图2023-12-25113039.png

这是Gui-Guider的基本界面。

屏幕截图2023-12-25145641.png

首先设置背景板,可以在右侧的属性中选择自己喜欢的颜色和透明板,这里我选择浅蓝色。

屏幕截图2023-12-26110758.png

添加一个二维码组件,右侧属性中可以填入扫码的内容。

屏幕截图2023-12-25142244.png

添加一个文本框,右侧输入想输入的内容,大小随意调整,可以拖动边框移动位置。这里注意字体选择simsun,可以显示中文。

屏幕截图2023-12-26110314.png

添加字体的方式可以在上面的“工具”导入字体,也可以在资源管理-字体,导入自己喜欢的字体。

屏幕截图2023-12-26110601.png

点击右上角的绿色三角型进行仿真,可以看到仿真出来的显示效果。同时他会生成LVGL的工程文件文件,我们方便移植。

屏幕截图2023-12-25145714.png

三、将生成的LVGL文件移植到小安派

首先将aithinker_Ai-M6X_SDK中,examples下的lvgl工程文件夹复制下来。粘贴到sdk外,方便管理,这里我放在AiPi-Open-Kits下,也就是和其它demo的同一层。

屏幕截图2023-12-26162609.png

简简单单修改个文件名。修改一下Makefile,一样链接到SDK。

屏幕截图2023-12-26162658.png

在修改下flash_prog_cfg.ini,注意烧录名称和文件夹名称一致。

屏幕截图2023-12-26162931.png

为了工程文件的方便简介和管理,把原文件下的demos文件夹、lcd_conf_user.h、lv_conf.h全删了,创建components文件夹,在components文件夹下创建UI文件夹,关键的地方来了!这边需要添加新的lcd_conf_user.h、lv_conf.h,以及我们的触控IC配置文件touch_conf_user.h到UI文件夹下。 这三个文件推荐在AiPi-Radar-WakeUp工程下寻找,路径在componets下的UI界面(和咱们刚刚创建的一样),这里可以看到他多了两个lv_user_config的.c和.h文件,这两个文件目前使用rtos的,咱们本次先不使用。

屏幕截图2023-12-26164012.png

屏幕截图2023-12-26164221.png

这里看到我的UI界面下还有两个custom和generated文件夹,这是我们刚刚从GUI-Guider中生成的工程中copy过来的,我们进入前面生成的LVGL工程目录中,可以看到如下,复制我们的custom和generated,粘贴到我们的UI文件夹下

屏幕截图2023-12-26164542.png

屏幕截图2023-12-26164612.png

这里我是使用Samba,所以在linux和windows共同操作文件很方便,不会的朋友看之前出过的教程,因为他不仅仅适用于本教程。

(五)零基础开发小安派-Eyes-S1【入门篇】——Samba共享文件夹)

修改我们的CMakeLists.txt,将我们刚刚添加的所有文件、文件夹参与编译。可以参考我的写法,这里我为了方便大家看到我添加了哪些文件,写了好几行。

屏幕截图2023-12-26164957.png

最后就是修改我们的Main,由于只显示一直图片,触控功能也还没用上,我们这里简单的调用一下,注释可以查看如下代码。

Main

#include "board.h"
#include "bflb_gpio.h"
#include "bflb_l1c.h"
#include "bflb_mtimer.h"

#include "lv_conf.h"
#include "lvgl.h"

#include "lv_port_disp.h"
#include "lv_port_indev.h"

#include "lcd.h"
#include "gui_guider.h"
#include "custom.h"

lv_ui guider_ui;
//该类型变量必须是全局变量

/* lvgl log cb */
void lv_log_print_g_cb(const char *buf)
{
    printf("[LVGL] %s", buf);
}

int main(void)
{
    board_init();

    printf("lvgl case\r\n");

    /* lvgl init */
    lv_log_register_print_cb(lv_log_print_g_cb);
    lv_init();

    //显示器初始化
    lv_port_disp_init();

    //外部输入初始化(Touch触摸)
    lv_port_indev_init();

    //设计小部件的UI布局
    setup_ui(&guider_ui);

    printf("lv_task_handler\r\n");

    custom_init(&guider_ui);

    printf("lvgl success\r\n");

    while (1) {
        //LVGL事物处理
        lv_task_handler();
        bflb_mtimer_delay_ms(1);
    }
}

四、配置文件修改

看到前面是不是迫不及待编译,发现编译不了,因为我还没说完,我的LVGL工程是添加了二维码控件的,所以需要修改lv_conf.h下的控件,打开lv_conf.h,可以看到里面有许多控件的宏定义,这边打开对应的宏定义即可,聪明的小伙伴应该知道了在工程中添加了什么组件,需要这边打开对应的宏定义,我们的QRCODE控件在667行,将0改为1.保存编译烧录即可。 屏幕截图2023-12-26165730.png

烧录完是不是看到图片是竖着的,因为我又还没说完,前面提到的分辨率设置问题,320x240还是240x320。这里选择320x240设置的同学就是横屏显示,但是我们的屏幕默认是竖屏显示,所以我们需要修改lcd_conf_user.h。顺便交给大家配置的方法,我们的3.5寸屏幕和2.4寸屏幕共用一个驱动。所以进入到lcd_conf_user.h中,首先宏定义我们的屏幕驱动,这里应该已经定义好了。

屏幕截图2023-12-26170122.png

LCD_SPI_ST7796_Ai就是我们的屏幕驱动,然后下拉到LCD_SPI_ST7796_Ai的相关配置下,修改显示的配置,将LCD_ROTATED_NONE注释掉,然后将LCD_ROTATED_90取消注释。这样我们的屏幕就是横屏显示了。

屏幕截图2023-12-26175126.png

五、效果展示

屏幕效果展示

952da391506f47794273c70245e2fab.jpg

扫码后页面显示

71d70ec26c9de8a60a2c99de40a4bd2.jpg

本帖被以下淘专辑推荐:

回复

使用道具 举报

1084504793 | 2023-12-26 18:21:27 | 显示全部楼层
回复

使用道具 举报

hdydy | 2023-12-26 18:59:17 | 显示全部楼层
学习学习
回复

使用道具 举报

iiv | 2023-12-26 20:03:23 | 显示全部楼层
泽哥666
回复

使用道具 举报

iiv | 2023-12-26 20:04:39 | 显示全部楼层
那个那个,我还没说完,泽哥🐮🍺
回复 支持 反对

使用道具 举报

san | 2023-12-26 22:34:05 | 显示全部楼层
回复

使用道具 举报

爱笑 | 2023-12-27 08:36:08 | 显示全部楼层
终于到了进阶篇了
用心做好保姆工作
回复 支持 反对

使用道具 举报

bzhou830 | 2023-12-27 08:41:28 | 显示全部楼层
终于看到lvgl了,跟着学起来
选择去发光,而不是被照亮
回复 支持 反对

使用道具 举报

吃一个鸡蛋 | 2023-12-27 08:51:12 | 显示全部楼层
跟着学起来
回复 支持 反对

使用道具 举报

每天八杯水 | 2023-12-27 09:02:51 | 显示全部楼层
终于到了进阶篇了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则