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

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

從零開始學習小安派：

1、零基礎開發小安派-Eyes-S1【入門篇】——初識小安派-Eyes-S1

2、零基礎開發小安派-Eyes-S1【入門篇】——安裝VMware與Ubuntu

3、入門篇：零基礎開發小安派-Eyes-S1——新建工程并燒錄調試

4、零基礎開發小安派-Eyes-S1入門篇——Win下SSH連接Linux

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

6、零基礎開發小安派-Eyes-S1【入門篇】——工程文件架構

7、零基礎開發小安派-Eyes-S1【外設篇】——GPIO 輸入輸出

8、零基礎開發小安派-Eyes-S1【外設篇】——GPIO中斷編程

9、零基礎開發小安派-Eyes-S1【外設篇】——PWM

10、零基礎開發小安派-Eyes-S1【外設篇】——UART

11、零基礎開發小安派-Eyes-S1【外設篇】——I2C

12、零基礎開發小安派-Eyes-S1【外設篇】——ADC

13、零基礎開發小安派-Eyes-S1【外設篇】——I2S

14、零基礎開發小安派-Eyes-S1【外設篇】——TIMER

15、零基礎開發小安派-Eyes-S1【外設篇】——DAC

教程已經更新了一段時間了，現在和各位小伙伴一同進入小安派的進階篇。進階篇的內容其實只是加上了 LVGL 的運用，可以更加直觀的使用交互界面而完成一個中控屏的項目。

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

01、安裝 GUI-Guider

GUI-Guider 是恩智浦為 LVGL 開發的一個上位機 GUl 設計工具，可以通過拖放控件的方式設計 LVGL GUl 頁面，加速 GUI 的設計，總得來說，可以使用這個軟件設計需要顯示的內容以及交互界面，相當于設計一個前端界面。

這里先附上LVGL的開發手冊（全英）：LVGL 官方手冊

看不懂英文的可以用百問網的LVGL中文手冊：百問網 LVGL 手冊

首先進入NXP的官網，這里附上網址：NPX 官網

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

在下載里選擇對應的軟件下載，這里選擇1.6.1的 win10 版本（實測筆者的win11 系統一樣可以使用）。

下載完需要的安裝包后，點擊打開安裝程序。

選擇下載的位置，這里在E盤中常用的位置創建了相應的文件夾。

點擊下一步等待完成安裝。

安裝完成后點擊進入軟件界面。

02、設計一個最簡單的 UI 界面

點擊 Create a new project，創建新的工程。

LVGL 版本選擇 V8.3.5。

設備模板選擇模擬器 Simulator。

選擇 EmptyUI空白模板。

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

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

在前面的截圖中可能會是英文界面，但也基本能看懂。在創建了第一個工程后可以在界面進行一些頁面顯示設置，右上角有語言的設置，這里選擇中文，界面的顏色選擇暗色。

這是 Gui-Guider 的基本界面。

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

添加一個二維碼組件，右側屬性中可以填入掃碼的內容。

添加一個文本框，右側輸入想輸入的內容，大小隨意調整，可以拖動邊框移動位置。這里注意字體選擇 simsun，可以顯示中文。

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

點擊右上角的綠色三角型進行仿真，可以看到仿真出來的顯示效果。同時會生成 LVGL 的工程文件文件方便移植。

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

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

簡簡單單修改個文件名。修改一下 Makefile，一樣鏈接到 SDK。

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

為了方便工程文件的管理，把原文件下的 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 ，本次教程暫時不用。

UI界面下還有兩個 custom 和 generated 文件夾，這是剛剛從 GUI-Guider 中生成的工程中 copy 過來的，進入前面生成的 LVGL 工程目錄中（如下圖），復制custom 和 generated，粘貼到UI 文件夾下。

這里使用 Samba，所以在Linux 和 Windows 共同操作文件很方便，不會的朋友看之前出過的教程，因為不僅僅適用于本教程。

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

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

最后修改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 casern");
/* 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_handlerrn");
custom_init(&guider_ui);
printf("lvgl successrn");
while (1) {
//LVGL事物處理
lv_task_handler();
bflb_mtimer_delay_ms(1);
}
}

04、配置文件修改

看到前面是不是迫不及待編譯？發現編譯不了，因為還沒說完，這里LVGL 工程是添加了二維碼控件的，所以需要修改 lv_conf.h 下的控件，打開 lv_conf.h，可以看到里面有許多控件的宏定義，這邊打開對應的宏定義即可，聰明的小伙伴應該知道了在工程中添加了什么組件，需要這邊打開對應的宏定義，QRCODE 控件在 667 行，將 0 改為 1.保存編譯燒錄即可。

燒錄完是不是看到圖片是豎著的，因為又還沒說完，前面提到的分辨率設置問題，320x240還是240x320。這里選擇 320x240 設置就是橫屏顯示，但是屏幕默認是豎屏顯示，所以需要修改 lcd_conf_user.h。順便教給大家配置的方法，3.5 寸屏幕和 2.4 寸屏幕共用一個驅動。所以進入到 lcd_conf_user.h 中，首先宏定義屏幕驅動。

LCD_SPI_ST7796_Ai 是屏幕驅動，然后下拉到 LCD_SPI_ST7796_Ai 的相關配置下，修改顯示的配置，將 LCD_ROTATED_NONE 注釋掉，然后將 LCD_ROTATED_90 取消注釋，這樣屏幕就是橫屏顯示了。

05、效果顯示

屏幕效果展示

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

掃碼后頁面顯示

審核編輯 黃宇