零基础开发小安派-Eyes-S1【进阶篇】——通过屏幕输入连接 Wi-Fi

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

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

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

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

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

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

新建一个工程，命名为 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的函数。

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

在 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名称和密码，就不用重复输入。

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

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

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