（十九）零基础开发小安派-Eyes-S1【进阶篇】——通过屏幕输入连接WiFi

> 本帖最后由 Ai-Thinker小泽 于 2024-1-24 19:58 编辑 # 零基础开发小安派-Eyes-S1【进阶篇】——通过屏幕输入连接WiFi 终于终于，到了连接wifi时候了。看完这篇教程，连接WiFi我也行（当然只是连接）。网络协议道阻且长，得慢慢啃，咱们先从简简单单连接WiFi开始，当然在这基础上得实现通过屏幕输入连接，同时拓展的将WiFi连接后的消息保存在flash中，以保存我们的wifi名称和密码。 ## 一、UI设计 打开GuiGuider，依旧是熟悉的新建工程，不熟悉的伙伴可以看我的前两篇教程复习一下，这里步骤就跳过了。我设计了两个界面，第一个界面为一个日历（摆饰）。  第二个界面才是我们的重头戏大哥，连接WiFi的界面。这里我添加了几个控件，重点的几个控件为，led（改变颜色来显示WiFi的状态），buttun（按下按钮获取输入框内容同时连接WiFi），以及两个输入框（分别输入SSID和PASSWORD）。     界面UI设计成功后，为界面添加两个事件，分别为左划和右划来切换不同的界面。 这里点击界面2（WiFi连接界面），添加事件，选择GestureLeft（左划），在通用这里勾选load screen，加载界面，选择界面1（日历界面）。  保存后同样的步骤，点击界面1（日历界面），添加事件，选择GestureRight（右划），同样的加载界面选择界面2(WiFi连接界面)。  在界面2（WiFi连接界面）的属性设置这里，选择显示键盘，在输入时键盘就会显示了，这样我们的UI设计就基本完成了。  设计完成后记得模拟看一下效果。  ## 二、文件移植和编程 首先新建一个工程，我命名为WiFi_Connect。添加的components组件（功能作为模块分类)，添加config（一些系统配置），main（主函数）。这里主要在components中添加，记得将所有链接下的文件夹添加到CMakeLitst.txt中。这里我的commponents中添加了部分库，包括easyflash，UI（设计的UI，屏幕与触摸的配置），Voice（8388的驱动库），WiFi（一个wifi连接的库，在Project_base中可以copy过来）。准备好需要的驱动后，配置CMakeLitst.txt。可以参考我截图中的方式。   在本程序中主要的流程就是通过图片上的按钮来实现其它的wifi连接，所以我们需要在按钮中添加事件获取输入框的内容，同时将这些内容作为参数传输给连接wifi的函数。由于我们的LVGL全是依靠一个lv_ui的结构体来保存成员，其定义在WiFi_Connect/components/UI/generated/gui_guider.h下，我们在main中会定义一个guider_ui的全局变量，该.h中也是通过extern来声明该结构体已在外部定义。我们可以在lv_ui中添加ssid和password数组来暂存我们的wifi名称和密码。  在WiFi_Connect/components/UI/generated/events_init.c中注册一个按钮事件，这里面可以看到我们的左划右划切换界面的事件，我们的区域是界面2，对应 wifi连接界面，在文件中注册一个事件，对应我们的按钮，也就是btn_1，可以参考我写的方式，可以看到case中对应的枚举类型是CLICKED（点击）， 这里使用防御性编程，先判断获取框中的内容是否为空，添加if和else if语句，随后清空我们的缓存ssid和passsword数组，将输入框中的内容通过strcpy输入到缓存中。这里调用wifi库中已经编写好的wifi_connect连接wifi。记得将wifi_event.h添加到头文件中。注意这里面的ui全是一个结构体指针，指向guider_ui这个全局的结构体。注意完成后将编写的函数在页面2的初始化中，使用lv_obj_add_event_cb添加事件。   在wifi库中可以看到wifi_start_firmware_task，该任务已经配置好了wifi，而wifi_event_handler对应了wifi的各种状态，这里对应着底层的wifi状态机。有扫描、断连、获取IP等等状态，大家可以自行查阅。而我们需要在wifi_connect函数中，这里面也有一些wifi的连接状态，都是基于这个sta_ConnectStatus来判断。在连接失败时修改我们的“LED”灯状态，对应 lv_led_set_color，这里的ui我定义了临时变量并将全局的guider_ui的地址赋予它。同样的，在成功连接后，也就是获取IP时，也修改LED的颜色，同时将wifi的ssid和passwd写入FLASH中，通过字段保存。我的字段定义在easy_flash的user_esflash.h中。在其它文件中使用flash注意将头文件也添加。   最后也是在WiFi_Connect/components/UI/generated/setup_scr_screen_2.c中，也就是对应我们的界面2初始化内容来修改，通过flash判断上一次成功输入wifi且被储存的内容是否存在，来显示我们上一次连接的wifi名称和密码，就不用重复输入。  ## 三、最终效果展示 上电的初始界面，如果是第一次烧录应该是SSID和星号隐藏的PASSWORD。这里我连接过了，显示的是我的wifi名称和密码。 未连接时左上角的灯为红色。滑动显示下一个日历界面。   输入正确的WiFi的名称和密码后，点击连接按钮，成功连接WiFi后，左上角的灯变为绿色，可以通过LOG口查看连接的过程。正确连接一次WiFi后，以后每次复位或者烧录显示的都是上一次连接的WiFi名称和密码。  

依旧，评论区附上源码压缩包。

越来越好了

学习了 这个有趣

感谢泽哥

赞

干货满满，学习了

泽哥厉害的不行

泽哥厉害的不行

厉害