AiPi-Eyes-S1是安信可開源團隊專門為Ai-M61-32S設(shè)計的一款開發(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接口，可接入USB攝像頭。

從零開始學習小安派：

1、零基礎(chǔ)開發(fā)小安派-Eyes-S1【入門篇】——初識小安派-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

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

17、功德+1，用小安派-Eyes-S1做一個電子木魚

本篇教大家通過屏幕輸入連接 Wi-Fi 。網(wǎng)絡(luò)協(xié)議道阻且長，得慢慢啃，先從簡簡單單連接 Wi-Fi 開始，當然在這基礎(chǔ)上得實現(xiàn)通過屏幕輸入連接，同時將Wi-Fi 連接后的消息保存在Flash中，以保存Wi-Fi名稱和密碼。

01UI 設(shè)計

打開 GuiGuider，依舊是熟悉的新建工程，不熟悉的伙伴可以看之前的教程復(fù)習一下。這里設(shè)計兩個界面，第一個界面為一個日歷（擺飾）。

第二個界面才是重頭戲，連接 Wi-Fi 的界面。這里添加了幾個控件，重點的幾個控件：

led（改變顏色來顯示W(wǎng)i-Fi的狀態(tài)）

buttun（按下按鈕獲取輸入框內(nèi)容同時連接 Wi-Fi）

兩個輸入框（分別輸入ssid 和 password）

界面UI設(shè)計成功后，為界面添加兩個事件，分別為左劃和右劃來切換不同的界面。這里點擊界面2（Wi-Fi 連接界面）——添加事件——選擇 GestureLeft（左劃），在通用這里勾選 load screen——加載界面，選擇界面1（日歷界面）。

保存后同樣的步驟，點擊界面1（日歷界面）——添加事件，選擇 GestureRight（右劃），同樣的加載界面選擇界面 2(Wi-Fi 連接界面)。

在界面 2（Wi-Fi 連接界面）的屬性設(shè)置這里，選擇顯示鍵盤，這樣UI設(shè)計就基本完成了。

設(shè)計完成后記得模擬看一下效果。

02文件移植和編程

新建一個工程，命名為 WiFi_Connect。添加的 components 組件（功能作為模塊分類)，添加 config（一些系統(tǒng)配置），main（主函數(shù)）。主要在 components 中添加，記得將所有鏈接下的文件夾添加到 CMakeLitst.txt 中。

commponents 中添加了部分庫，包括 easyflash，UI（設(shè)計的 UI，屏幕與觸摸的配置），Voice（8388 的驅(qū)動庫），Wi-Fi（一個WiFi連接的庫，在 Project_base 中可以copy 過來）。準備好需要的驅(qū)動后，配置 CMakeLitst.txt（可以參考以下截圖中的方式）。

在本程序中主要的流程就是通過圖片上的按鈕來實現(xiàn)其它的 Wi-Fi 連接，所以需要在按鈕中添加事件獲取輸入框的內(nèi)容，同時將這些內(nèi)容作為參數(shù)傳輸給連接Wi-Fi的函數(shù)。

由于LVGL全是依靠一個lv_ui的結(jié)構(gòu)體來保存成員，其定義在 WiFi_Connect/components/UI/generated/gui_guider.h 下，在main 中會定義一個guider_ui的全局變量，

該.h 中也是通過extern來聲明該結(jié)構(gòu)體已在外部定義，可以在 lv_ui 中添加 ssid 和 password 數(shù)組來暫存我們的 Wi-Fi 名稱和密碼。

在 WiFi_Connect/components/UI/generated/events_init.c 中注冊一個按鈕事件，這里面可以看到左劃右劃切換界面的事件，區(qū)域中顯示的是界面 2，對應(yīng)Wi-Fi 連接界面，在文件中注冊一個事件，對應(yīng)按鈕btn_1，可以參考筆者寫的方式，可以看到 case 中對應(yīng)的枚舉類型是 CLICKED（點擊）。

這里使用防御性編程，先判斷獲取框中的內(nèi)容是否為空，添加 if 和 else if 語句，隨后清空緩存ssid和passsword數(shù)組，將輸入框中的內(nèi)容通過 strcpy 輸入到緩存中。這里調(diào)用Wi-Fi庫中已經(jīng)編寫好的wifi_connect 連接Wi-Fi。記得將 wifi_event.h 添加到頭文件中。注意這里面的 ui 全是一個結(jié)構(gòu)體指針，指向 guider_ui 這個全局的結(jié)構(gòu)體。注意完成后將編寫的函數(shù)在頁面 2 的初始化中，使用 lv_obj_add_event_cb 添加事件。

在 Wi-Fi 庫中可以看到 wifi_start_firmware_task，該任務(wù)已經(jīng)配置好了Wi-Fi，而 wifi_event_handler 對應(yīng)了Wi-Fi的各種狀態(tài)，這里對應(yīng)著底層的Wi-Fi狀態(tài)機，有掃描、斷連、獲取 IP 等等狀態(tài)，小伙伴可以自行查閱。

在wifi_connect 函數(shù)中，這里面也有一些Wi-Fi的連接狀態(tài)，都是基于這個 sta_ConnectStatus來判斷。在連接失敗時修改“LED”燈狀態(tài)，對應(yīng) lv_led_set_color，這里的 ui 定義了臨時變量并將全局的 guider_ui 的地址賦予它。同樣在成功連接后，也就是獲取 IP 時修改 LED 的顏色，同時將Wi-Fi的ssid 和password寫入Flash中，通過字段保存。字段定義在easy_flash 的 user_esflash.h 中。在其它文件中使用 Flash 注意將頭文件也添加。

最后在WiFi_Connect/components/UI/generated/setup_scr_screen_2.c 中，也就是對應(yīng)界面2初始化內(nèi)容來修改，通過Flash 判斷上一次成功輸入Wi-Fi且被儲存的內(nèi)容是否存在，來顯示上一次連接的Wi-Fi名稱和密碼，就不用重復(fù)輸入。

03最終效果展示

上電的初始界面，如果是第一次燒錄應(yīng)該是ssid和星號隱藏的password。這里筆者連接過了，顯示的是本人的Wi-Fi名稱和密碼。

未連接時左上角的燈為紅色，滑動顯示下一個日歷界面。

輸入正確的Wi-Fi名稱和密碼后，點擊連接按鈕，成功連接 Wi-Fi 后，左上角的燈變?yōu)榫G色，可以通過LOG口查看連接的過程。正確連接一次 Wi-Fi 后，以后每次復(fù)位或者燒錄顯示的都是上一次連接的 Wi-Fi 名稱和密碼。

審核編輯 黃宇