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í)和通用圖形庫) 是一個(gè)免費(fèi)和開源的圖形庫,它提供了創(chuàng)建嵌入式 GUI 所需的一切,具有易于使用的圖形元素,美麗的視覺效果和低內(nèi)存占用。小安派-Eyes-S1配備了一塊3.5寸的屏幕,搭配上LVGL可以顯示所需的交互界面。
01 安裝 GUI-Guider
GUI-Guider 是恩智浦為 LVGL 開發(fā)的一個(gè)上位機(jī) GUl 設(shè)計(jì)工具,可以通過拖放控件的方式設(shè)計(jì) LVGL GUl 頁面,加速 GUI 的設(shè)計(jì),總得來說,可以使用這個(gè)軟件設(shè)計(jì)需要顯示的內(nèi)容以及交互界面,相當(dāng)于設(shè)計(jì)一個(gè)前端界面。
這里先附上LVGL的開發(fā)手冊(cè)(全英):LVGL 官方手冊(cè)
看不懂英文的可以用百問網(wǎng)的LVGL中文手冊(cè):百問網(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è)最簡單的UI 界面
點(diǎn)擊 Create a new project,創(chuàng)建新的工程。
LVGL 版本選擇 V8.3.5。
選擇 EmptyUI空白模板。
項(xiàng)目配置信息,填入工程名字,工程目錄(建議在自己方便查找的位置建立一個(gè) Project 文件夾存儲(chǔ)所有的工程文件),色彩深度選擇 16bit 即可。
面板類型根據(jù)顯示屏類型來選擇,S1 配備的3.5寸屏幕,由于默認(rèn)的顯示屏是豎屏顯示的,可以選擇自定義 240x320,筆者個(gè)人比較喜歡橫屏顯示,選擇 320x240,后續(xù)修改顯示屏配置文件旋轉(zhuǎn) 90°即可。
在前面的截圖中可能會(huì)是英文界面,但也基本能看懂。在創(chuàng)建了第一個(gè)工程后可以在界面進(jìn)行一些頁面顯示設(shè)置,右上角有語言的設(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)行仿真,可以看到仿真出來的顯示效果。同時(shí)會(huì)生成 LVGL 的工程文件文件方便移植。
03 將生成的 LVGL 文件移植到小安派
首先將 aithinker_Ai-M6X_SDK 中examples 下的 lvgl 工程文件夾復(fù)制下來。粘貼到SDK外方便管理,這里放在 AiPi-Open-Kits 下,也就是和其它demo的同一層。
簡簡單單修改個(gè)文件名。修改一下 Makefile,一樣鏈接到 SDK。
在修改下 flash_prog_cfg.ini,注意燒錄名稱和文件夾名稱一致。
為了方便工程文件的管理,把原文件下的 demos 文件夾、lcd_conf_user.h、lv_conf.h 全刪了,創(chuàng)建 components 文件夾,在 components 文件夾下創(chuàng)建 UI 文件夾
關(guān)鍵的地方來了!需要添加新的 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 過來的,進(jìn)入前面生成的 LVGL 工程目錄中(如下圖),復(fù)制custom 和 generated,粘貼到UI 文件夾下。
這里使用 Samba,所以在Linux 和 Windows 共同操作文件很方便,不會(huì)的朋友看之前出過的教程,因?yàn)椴粌H僅適用于本教程。
(五)零基礎(chǔ)開發(fā)小安派-Eyes-S1【入門篇】——Samba 共享文件夾)
修改CMakeLists.txt,將剛剛添加的所有文件、文件夾參與編譯。
最后修改Main,由于只顯示圖片,觸控功能也還沒用上,簡單調(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 case "); /* 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_handler "); custom_init(&guider_ui); printf("lvgl success "); while (1) { //LVGL事物處理 lv_task_handler(); bflb_mtimer_delay_ms(1); } }
04 配置文件修改
看到前面是不是迫不及待編譯?發(fā)現(xiàn)編譯不了,因?yàn)檫€沒說完,這里L(fēng)VGL 工程是添加了二維碼控件的,所以需要修改 lv_conf.h 下的控件,打開 lv_conf.h,可以看到里面有許多控件的宏定義,這邊打開對(duì)應(yīng)的宏定義即可,聰明的小伙伴應(yīng)該知道了在工程中添加了什么組件,需要這邊打開對(duì)應(yīng)的宏定義,QRCODE 控件在 667 行,將 0 改為 1.保存編譯燒錄即可。
燒錄完是不是看到圖片是豎著的,因?yàn)橛诌€沒說完,前面提到的分辨率設(shè)置問題,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 效果顯示
屏幕效果展示
掃碼后頁面顯示
-
開發(fā)板
+關(guān)注
關(guān)注
25文章
5116瀏覽量
97917 -
LVGL
+關(guān)注
關(guān)注
1文章
90瀏覽量
3020
原文標(biāo)題:零基礎(chǔ)開發(fā)小安派-Eyes-S1【進(jìn)階篇】——初識(shí) LVGL 并搭建最小工程
文章出處:【微信號(hào):安信可科技,微信公眾號(hào):安信可科技】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論