零基礎(chǔ)開發(fā)小安派-Eyes-S1【進(jìn)階篇】——初識(shí) LVGL 并搭建最小工程

AiPi-Eyes-S1是安信可開源團(tuán)隊(duì)專門為Ai-M61-32S設(shè)計(jì)的一款開發(fā)板，支持WiFi6、BLE5.3。所搭載的Ai-M61-32S 模組具有豐富的外設(shè)接口，具體包括 DVP、MJPEG、Dispaly、AudioCodec、USB2.0、SDU、以太網(wǎng) (EMAC)、SD/MMC(SDH)、SPI、UART、I2C、I2S、PWM、GPDAC、GPADC、ACOMP 和 GPIO 等。

AiPi-Eyes-S1集成了SPI屏幕接口，DVP攝像頭接口，外置ES8388音頻編解碼芯片以及預(yù)留TF卡座，并且引出USB接口，可接入U(xiǎn)SB攝像頭。

從零開始學(xué)習(xí)小安派：

1、零基礎(chǔ)開發(fā)小安派-Eyes-S1【入門篇】——初識(shí)小安派-Eyes-S1

2、零基礎(chǔ)開發(fā)小安派-Eyes-S1【入門篇】——安裝VMware與Ubuntu

3、入門篇：零基礎(chǔ)開發(fā)小安派-Eyes-S1——新建工程并燒錄調(diào)試

4、零基礎(chǔ)開發(fā)小安派-Eyes-S1入門篇——Win下SSH連接Linux

5、零基礎(chǔ)開發(fā)小安派-Eyes-S1【入門篇】——Samba共享文件夾

6、零基礎(chǔ)開發(fā)小安派-Eyes-S1【入門篇】——工程文件架構(gòu)

7、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——GPIO 輸入輸出

8、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——GPIO中斷編程

9、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——PWM

10、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——UART

11、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——I2C

12、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——ADC

13、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——I2S

14、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——TIMER

15、零基礎(chǔ)開發(fā)小安派-Eyes-S1【外設(shè)篇】——DAC

教程已經(jīng)更新了一段時(shí)間了，現(xiàn)在和各位小伙伴一同進(jìn)入小安派的進(jìn)階篇。進(jìn)階篇的內(nèi)容其實(shí)只是加上了 LVGL 的運(yùn)用，可以更加直觀的使用交互界面而完成一個(gè)中控屏的項(xiàng)目。

LVGL(輕量級(jí)和通用圖形庫(kù)) 是一個(gè)免費(fèi)和開源的圖形庫(kù)，它提供了創(chuàng)建嵌入式 GUI 所需的一切，具有易于使用的圖形元素，美麗的視覺(jué)效果和低內(nèi)存占用。小安派-Eyes-S1配備了一塊3.5寸的屏幕，搭配上LVGL可以顯示所需的交互界面。

01、安裝 GUI-Guider

GUI-Guider 是恩智浦為 LVGL 開發(fā)的一個(gè)上位機(jī) GUl 設(shè)計(jì)工具，可以通過(guò)拖放控件的方式設(shè)計(jì) LVGL GUl 頁(yè)面，加速 GUI 的設(shè)計(jì)，總得來(lái)說(shuō)，可以使用這個(gè)軟件設(shè)計(jì)需要顯示的內(nèi)容以及交互界面，相當(dāng)于設(shè)計(jì)一個(gè)前端界面。

這里先附上LVGL的開發(fā)手冊(cè)（全英）：LVGL 官方手冊(cè)

看不懂英文的可以用百問(wèn)網(wǎng)的LVGL中文手冊(cè)：百問(wèn)網(wǎng) LVGL 手冊(cè)

首先進(jìn)入NXP的官網(wǎng)，這里附上網(wǎng)址：NPX 官網(wǎng)

搜索 GUI Guider，這里可能需要注冊(cè)賬號(hào)，跟隨提示注冊(cè)好賬號(hào)后才可以正常下載軟件。

在下載里選擇對(duì)應(yīng)的軟件下載，這里選擇1.6.1的 win10 版本（實(shí)測(cè)筆者的win11 系統(tǒng)一樣可以使用）。

下載完需要的安裝包后，點(diǎn)擊打開安裝程序。

選擇下載的位置，這里在E盤中常用的位置創(chuàng)建了相應(yīng)的文件夾。

點(diǎn)擊下一步等待完成安裝。

安裝完成后點(diǎn)擊進(jìn)入軟件界面。

02、設(shè)計(jì)一個(gè)最簡(jiǎn)單的 UI 界面

點(diǎn)擊 Create a new project，創(chuàng)建新的工程。

LVGL 版本選擇 V8.3.5。

設(shè)備模板選擇模擬器 Simulator。

選擇 EmptyUI空白模板。

項(xiàng)目配置信息，填入工程名字，工程目錄（建議在自己方便查找的位置建立一個(gè) Project 文件夾存儲(chǔ)所有的工程文件），色彩深度選擇 16bit 即可。

面板類型根據(jù)顯示屏類型來(lái)選擇，S1 配備的3.5寸屏幕，由于默認(rèn)的顯示屏是豎屏顯示的，可以選擇自定義 240x320，筆者個(gè)人比較喜歡橫屏顯示，選擇 320x240，后續(xù)修改顯示屏配置文件旋轉(zhuǎn) 90°即可。

在前面的截圖中可能會(huì)是英文界面，但也基本能看懂。在創(chuàng)建了第一個(gè)工程后可以在界面進(jìn)行一些頁(yè)面顯示設(shè)置，右上角有語(yǔ)言的設(shè)置，這里選擇中文，界面的顏色選擇暗色。

這是 Gui-Guider 的基本界面。

首先設(shè)置背景板，可以在右側(cè)的屬性中選擇自己喜歡的顏色和透明板，這里選擇淺藍(lán)色。

添加一個(gè)二維碼組件，右側(cè)屬性中可以填入掃碼的內(nèi)容。

添加一個(gè)文本框，右側(cè)輸入想輸入的內(nèi)容，大小隨意調(diào)整，可以拖動(dòng)邊框移動(dòng)位置。這里注意字體選擇 simsun，可以顯示中文。

添加字體的方式可以在上面的“工具”導(dǎo)入字體，也可以在資源管理-字體，導(dǎo)入自己喜歡的字體。

點(diǎn)擊右上角的綠色三角型進(jìn)行仿真，可以看到仿真出來(lái)的顯示效果。同時(shí)會(huì)生成 LVGL 的工程文件文件方便移植。

03、將生成的 LVGL 文件移植到小安派

首先將 aithinker_Ai-M6X_SDK 中examples 下的 lvgl 工程文件夾復(fù)制下來(lái)。粘貼到SDK外方便管理，這里放在 AiPi-Open-Kits 下，也就是和其它demo的同一層。

簡(jiǎn)簡(jiǎn)單單修改個(gè)文件名。修改一下 Makefile，一樣鏈接到 SDK。

在修改下 flash_prog_cfg.ini，注意燒錄名稱和文件夾名稱一致。

為了方便工程文件的管理，把原文件下的 demos 文件夾、lcd_conf_user.h、lv_conf.h 全刪了，創(chuàng)建 components 文件夾，在 components 文件夾下創(chuàng)建 UI 文件夾

關(guān)鍵的地方來(lái)了！需要添加新的 lcd_conf_user.h、lv_conf.h，以及觸控 IC 配置文件 touch_conf_user.h 到 UI 文件夾下。

這三個(gè)文件推薦在AiPi-Radar-WakeUp工程下尋找，路徑在componets下的UI界面（和剛剛創(chuàng)建的一樣），這里可以看到多了兩個(gè)lv_user_config 的.c 和.h 文件，這兩個(gè)文件目前使用 rtos ，本次教程暫時(shí)不用。

UI界面下還有兩個(gè) custom 和 generated 文件夾，這是剛剛從 GUI-Guider 中生成的工程中 copy 過(guò)來(lái)的，進(jìn)入前面生成的 LVGL 工程目錄中（如下圖），復(fù)制custom 和 generated，粘貼到UI 文件夾下。

這里使用 Samba，所以在Linux 和 Windows 共同操作文件很方便，不會(huì)的朋友看之前出過(guò)的教程，因?yàn)椴粌H僅適用于本教程。

（五）零基礎(chǔ)開發(fā)小安派-Eyes-S1【入門篇】——Samba 共享文件夾)https://bbs.ai-thinker.com/forum.php?mod=viewthread&tid=455&extra=page%3D1&_dsign=b74f34c9

修改CMakeLists.txt，將剛剛添加的所有文件、文件夾參與編譯。

最后修改Main，由于只顯示圖片，觸控功能也還沒(méi)用上，簡(jiǎn)單調(diào)用一下，注釋可以查看如下代碼。

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 casern");
/* lvgl init */
lv_log_register_print_cb(lv_log_print_g_cb);
lv_init();
//顯示器初始化
lv_port_disp_init();
//外部輸入初始化(Touch觸摸)
lv_port_indev_init();
//設(shè)計(jì)小部件的UI布局
setup_ui(&guider_ui);
printf("lv_task_handlerrn");
custom_init(&guider_ui);
printf("lvgl successrn");
while (1) {
//LVGL事物處理
lv_task_handler();
bflb_mtimer_delay_ms(1);
}
}

04、配置文件修改

看到前面是不是迫不及待編譯？發(fā)現(xiàn)編譯不了，因?yàn)檫€沒(méi)說(shuō)完，這里L(fēng)VGL 工程是添加了二維碼控件的，所以需要修改 lv_conf.h 下的控件，打開 lv_conf.h，可以看到里面有許多控件的宏定義，這邊打開對(duì)應(yīng)的宏定義即可，聰明的小伙伴應(yīng)該知道了在工程中添加了什么組件，需要這邊打開對(duì)應(yīng)的宏定義，QRCODE 控件在 667 行，將 0 改為 1.保存編譯燒錄即可。

燒錄完是不是看到圖片是豎著的，因?yàn)橛诌€沒(méi)說(shuō)完，前面提到的分辨率設(shè)置問(wèn)題，320x240還是240x320。這里選擇 320x240 設(shè)置就是橫屏顯示，但是屏幕默認(rèn)是豎屏顯示，所以需要修改 lcd_conf_user.h。順便教給大家配置的方法，3.5 寸屏幕和 2.4 寸屏幕共用一個(gè)驅(qū)動(dòng)。所以進(jìn)入到 lcd_conf_user.h 中，首先宏定義屏幕驅(qū)動(dòng)。

LCD_SPI_ST7796_Ai 是屏幕驅(qū)動(dòng)，然后下拉到 LCD_SPI_ST7796_Ai 的相關(guān)配置下，修改顯示的配置，將 LCD_ROTATED_NONE 注釋掉，然后將 LCD_ROTATED_90 取消注釋，這樣屏幕就是橫屏顯示了。

05、效果顯示

屏幕效果展示

https://docs.ai-thinker.com/aipi-jc (二維碼自動(dòng)識(shí)別)

掃碼后頁(yè)面顯示

審核編輯 黃宇