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

[复制链接]
查看4404 | 回复33 | 2024-1-24 19:58:58 | 显示全部楼层 |阅读模式

本帖最后由 Ai-Thinker小泽 于 2024-1-24 19:58 编辑

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

终于终于,到了连接wifi时候了。看完这篇教程,连接WiFi我也行(当然只是连接)。网络协议道阻且长,得慢慢啃,咱们先从简简单单连接WiFi开始,当然在这基础上得实现通过屏幕输入连接,同时拓展的将WiFi连接后的消息保存在flash中,以保存我们的wifi名称和密码。

一、UI设计

打开GuiGuider,依旧是熟悉的新建工程,不熟悉的伙伴可以看我的前两篇教程复习一下,这里步骤就跳过了。我设计了两个界面,第一个界面为一个日历(摆饰)。 屏幕截图2024-01-24151153.png

第二个界面才是我们的重头戏大哥,连接WiFi的界面。这里我添加了几个控件,重点的几个控件为,led(改变颜色来显示WiFi的状态),buttun(按下按钮获取输入框内容同时连接WiFi),以及两个输入框(分别输入SSID和PASSWORD)。

屏幕截图2024-01-24152055.png

屏幕截图2024-01-24152157.png

屏幕截图2024-01-24152118.png

屏幕截图2024-01-24151253.png

界面UI设计成功后,为界面添加两个事件,分别为左划和右划来切换不同的界面。

这里点击界面2(WiFi连接界面),添加事件,选择GestureLeft(左划),在通用这里勾选load screen,加载界面,选择界面1(日历界面)。

屏幕截图2024-01-24153049.png

保存后同样的步骤,点击界面1(日历界面),添加事件,选择GestureRight(右划),同样的加载界面选择界面2(WiFi连接界面)。

屏幕截图2024-01-24194024.png

在界面2(WiFi连接界面)的属性设置这里,选择显示键盘,在输入时键盘就会显示了,这样我们的UI设计就基本完成了。

屏幕截图2024-01-24153833.png

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

connect_wifi.gif

二、文件移植和编程

首先新建一个工程,我命名为WiFi_Connect。添加的components组件(功能作为模块分类),添加config(一些系统配置),main(主函数)。这里主要在components中添加,记得将所有链接下的文件夹添加到CMakeLitst.txt中。这里我的commponents中添加了部分库,包括easyflash,UI(设计的UI,屏幕与触摸的配置),Voice(8388的驱动库),WiFi(一个wifi连接的库,在Project_base中可以copy过来)。准备好需要的驱动后,配置CMakeLitst.txt。可以参考我截图中的方式。

屏幕截图2024-01-24174053.png

屏幕截图2024-01-24174113.png

在本程序中主要的流程就是通过图片上的按钮来实现其它的wifi连接,所以我们需要在按钮中添加事件获取输入框的内容,同时将这些内容作为参数传输给连接wifi的函数。由于我们的LVGL全是依靠一个lv_ui的结构体来保存成员,其定义在WiFi_Connect/components/UI/generated/gui_guider.h下,我们在main中会定义一个guider_ui的全局变量,该.h中也是通过extern来声明该结构体已在外部定义。我们可以在lv_ui中添加ssid和password数组来暂存我们的wifi名称和密码。

屏幕截图2024-01-24174935.png

在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添加事件。

屏幕截图2024-01-24194627.png

屏幕截图2024-01-24175711.png

在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注意将头文件也添加。

屏幕截图2024-01-24195032.png

屏幕截图2024-01-24194934.png

最后也是在WiFi_Connect/components/UI/generated/setup_scr_screen_2.c中,也就是对应我们的界面2初始化内容来修改,通过flash判断上一次成功输入wifi且被储存的内容是否存在,来显示我们上一次连接的wifi名称和密码,就不用重复输入。

屏幕截图2024-01-24181207.png

三、最终效果展示

上电的初始界面,如果是第一次烧录应该是SSID和星号隐藏的PASSWORD。这里我连接过了,显示的是我的wifi名称和密码。

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

微信图片_20240124195325.png

微信图片_20240124195407.png

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

微信图片_20240124195352.png

屏幕截图2024-01-24181520.png

本帖被以下淘专辑推荐:

回复

使用道具 举报

Ai-Thinker小泽 | 2024-1-24 20:02:01 | 显示全部楼层
依旧,评论区附上源码压缩包。

WiFi_Connect.zip

133.95 KB, 下载次数: 23

回复 支持 反对

使用道具 举报

7788 | 2024-1-24 21:35:00 | 显示全部楼层
越来越好了
回复 支持 反对

使用道具 举报

WangChong | 2024-1-24 23:39:00 | 显示全部楼层
学习了 这个有趣
回复 支持 反对

使用道具 举报

wukong50 | 2024-1-25 07:35:38 | 显示全部楼层
感谢泽哥
回复

使用道具 举报

1084504793 | 2024-1-25 08:39:37 | 显示全部楼层
回复

使用道具 举报

WT_0213 | 2024-1-25 08:58:53 | 显示全部楼层
干货满满,学习了
回复 支持 反对

使用道具 举报

lazy | 2024-1-25 09:20:54 | 显示全部楼层
泽哥厉害的不行
回复 支持 反对

使用道具 举报

bzhou830 | 2024-1-25 09:22:12 | 显示全部楼层
泽哥厉害的不行
选择去发光,而不是被照亮
回复 支持 反对

使用道具 举报

知行合一 | 2024-1-25 11:16:53 | 显示全部楼层
厉害
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则