零基础开发AiPi-Eyes-S1——通过屏幕输入连接Wi-Fi

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

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

17、功德+1，用小安派-Eyes-S1做一个电子木鱼

本篇教大家通过屏幕输入连接 Wi-Fi 。网络协议道阻且长，得慢慢啃，先从简简单单连接 Wi-Fi 开始，当然在这基础上得实现通过屏幕输入连接，同时将Wi-Fi 连接后的消息保存在Flash中，以保存Wi-Fi名称和密码。

01

UI 设计

打开 GuiGuider，依旧是熟悉的新建工程，不熟悉的伙伴可以看之前的教程复习一下。这里设计两个界面，第一个界面为一个日历（摆饰）。

第二个界面才是重头戏，连接 Wi-Fi 的界面。这里添加了几个控件，重点的几个控件：

led（改变颜色来显示Wi-Fi的状态） buttun（按下按钮获取输入框内容同时连接 Wi-Fi） 两个输入框（分别输入ssid 和 password）

界面UI设计成功后，为界面添加两个事件，分别为左划和右划来切换不同的界面。这里点击界面2（Wi-Fi 连接界面）——添加事件——选择 GestureLeft（左划），在通用这里勾选 load screen——加载界面，选择界面1（日历界面）。

保存后同样的步骤，点击界面1（日历界面）——添加事件，选择 GestureRight（右划），同样的加载界面选择界面 2(Wi-Fi 连接界面)。

在界面 2（Wi-Fi 连接界面）的属性设置这里，选择显示键盘，这样UI设计就基本完成了。

设计完成后记得模拟看一下效果。

02

文件移植和编程

新建一个工程，命名为 WiFi_Connect。添加的 components 组件（功能作为模块分类)，添加 config（一些系统配置），main（主函数）。主要在 components 中添加，记得将所有链接下的文件夹添加到 CMakeLitst.txt 中。

commponents 中添加了部分库，包括 easyflash，UI（设计的 UI，屏幕与触摸的配置），Voice（8388 的驱动库），Wi-Fi（一个WiFi连接的库，在 Project_base 中可以copy 过来）。准备好需要的驱动后，配置 CMakeLitst.txt（可以参考以下截图中的方式）。

在本程序中主要的流程就是通过图片上的按钮来实现其它的 Wi-Fi 连接，所以需要在按钮中添加事件获取输入框的内容，同时将这些内容作为参数传输给连接Wi-Fi的函数。

由于LVGL全是依靠一个lv_ui的结构体来保存成员，其定义在 WiFi_Connect/components/UI/generated/gui_guider.h 下，在main 中会定义一个guider_ui的全局变量，

该.h 中也是通过extern来声明该结构体已在外部定义，可以在 lv_ui 中添加 ssid 和 password 数组来暂存我们的 Wi-Fi 名称和密码。

在 WiFi_Connect/components/UI/generated/events_init.c 中注册一个按钮事件，这里面可以看到左划右划切换界面的事件，区域中显示的是界面 2，对应Wi-Fi 连接界面，在文件中注册一个事件，对应按钮btn_1，可以参考笔者写的方式，可以看到 case 中对应的枚举类型是 CLICKED（点击）。

这里使用防御性编程，先判断获取框中的内容是否为空，添加 if 和 else if 语句，随后清空缓存ssid和passsword数组，将输入框中的内容通过 strcpy 输入到缓存中。这里调用Wi-Fi库中已经编写好的wifi_connect 连接Wi-Fi。记得将 wifi_event.h 添加到头文件中。注意这里面的 ui 全是一个结构体指针，指向 guider_ui 这个全局的结构体。注意完成后将编写的函数在页面 2 的初始化中，使用 lv_obj_add_event_cb 添加事件。

在 Wi-Fi 库中可以看到 wifi_start_firmware_task，该任务已经配置好了Wi-Fi，而 wifi_event_handler 对应了Wi-Fi的各种状态，这里对应着底层的Wi-Fi状态机，有扫描、断连、获取 IP 等等状态，小伙伴可以自行查阅。

在wifi_connect 函数中，这里面也有一些Wi-Fi的连接状态，都是基于这个 sta_ConnectStatus来判断。在连接失败时修改“LED”灯状态，对应 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 中，也就是对应界面2初始化内容来修改，通过Flash 判断上一次成功输入Wi-Fi且被储存的内容是否存在，来显示上一次连接的Wi-Fi名称和密码，就不用重复输入。

03

最终效果展示

上电的初始界面，如果是第一次烧录应该是ssid和星号隐藏的password。这里笔者连接过了，显示的是本人的Wi-Fi名称和密码。

未连接时左上角的灯为红色，滑动显示下一个日历界面。

输入正确的Wi-Fi名称和密码后，点击连接按钮，成功连接 Wi-Fi 后，左上角的灯变为绿色，可以通过LOG口查看连接的过程。正确连接一次 Wi-Fi 后，以后每次复位或者烧录显示的都是上一次连接的 Wi-Fi 名称和密码。