6.5.2 WiFi控制LED#
6.5.2.1 简介#
本教程将为您详细介绍如何使用ESP32微控制器通过局域网WiFi控制LED灯。教程内容包括ESP32的WiFi功能配置、电路连接方法以及如何编写代码实现远程控制。您将学习如何设置ESP32为WiFi接入点(AP)或连接到现有WiFi网络,并通过网页界面发送控制指令来开关LED灯。无论您是物联网初学者还是有经验的开发者,本教程都将帮助您掌握ESP32的WiFi控制功能,为您的项目增添灵活的远程控制能力。
6.5.2.2 工作原理#
ESP32 最有用的功能之一是它不仅能够连接到现有的 WiFi 网络并充当 Web 服务器,还可以创建自己的网络,允许其他设备直接连接到它并访问网页。这是因为ESP32可以在三种模式下运行:Station(STA)模式、Soft Access Point(AP)模式和Station+AP共存模式。
Station模式(作为WiFi设备主动连接路由器,也叫做WiFi Client)。
AP模式(作为一个Access Point,让其他WiFi设备来连接)即WiFi热点。
Station+AP共存模式(ESP32连接路由器的同时自身也是一个热点供其他WiFi设备来连接)。
所有WiFi编程项目在使用WiFi前必须配置WiFi运行模式,否则无法使用WiFi。在本实验课程中,我们将学习使用ESP32的WiFi Station模式。
在 Station 模式下,ESP32 连接到现有的 WiFi 网络(由无线路由器创建的网络)。
当ESP32选择Station模式时,它作为一个WiFi客户端。它可以连接路由器网络,通过WiFi连接与路由器上的其他设备通信。如下图所示,移动通信设备(智能手机/平板)、PC和路由器已经连接,ESP32如果要与移动通信设备和PC通信,需要将移动通信设备、PC和路由器连接起来。

在 Station 模式下,ESP32 从其连接的无线路由器获取 IP 地址。使用此 IP 地址,它可以设置 Web 服务器并向现有 WiFi 网络上的所有连接设备提供网页。
⚠️ 注意: 这样只能工作在一个局域网内,也就是说如果你的控制端与开发板连接的wifi不一致那么将无法进入Web服务器的控制页面。
6.5.2.3 接线图#
LED模块的S引脚连接到io27
⚠️ 特别注意:智慧农场已经组装好了,这里不需要把LED模块拆下来又重新组装和接线,这里再次提供接线图,是为了方便您编写代码!

6.5.2.4 实验代码#
代码文件在Mixly_代码文件夹中,代码文件为6_5_2_WiFi-HTML-Control-LED.mix,如下图所示:

单击 “文件” --> “打开”,然后选择保存代码的路径,选中代码文件打开即可,如下图所示:


⚠️ 特别提醒: 打开代码文件后,需要修改ESP32开发板需要连接的WiFi名称与密码,您需要分别将 REPLACE_WITH_YOUR_SSID 和 REPLACE_WITH_YOUR_PASSWORD 替换为您自己的 Wi-Fi 名称和 WiFi 密码。WiFi名称和WiFi密码修改后才能上传代码,否则你的ESP32开发板将无法连接网络。

⚠️注意: 请确保代码中的WiFi名称和密码与连接到您的电脑、手机/平板、ESP32开发板和路由器的网络相同,它们必须在同一局域网(WiFi)内。
⚠️ 注意: 请确保代码中的WiFi名称和WiFi密码与连接到您的电脑、手机/平板、ESP32开发板和路由器的网络相同,它们必须在同一局域网(WiFi)内。
⚠️ 注意: WiFi必须是2.4Ghz频率的,否则ESP32无法连接WiFi。
认识代码块
⚠️ 特别提醒: 本实验代码中用到的一些新代码块在 6.5.1 WIFI网页显示字符串 项目中的 认识代码块 部分有讲解到,这里就不重复。有什么不清楚的,可以跳到 6.5.1 WIFI网页显示字符串 项目中的 认识代码块 部分去了解。
组合代码块

6.5.2.5 实验结果#
按照接线图接好线,外接电源,选择好正确的开发板板型(ESP32 Dev Module)和 适当的串口端口(COMxx),然后单击按钮
上传代码,外接电源。
⚠️ 注意:手机/平板和电脑一定要与ESP32开发板连接的是同一个WiFi,否则将无法进入控制页面,还有就是ESP32开发板在使用WiFi功能时功耗很大需要外接DC电源才能满足它的工作电力需求,如果达不到它的工作电力需求ESP32板将会一直复位导致代码无法正常运行。
上传代码成功后,单击 Mixly IDE 左上角的
设置串口波特率为9600,即可通过串口打印窗口查看显示连接成功后的IP地址(如果看不到可以按复位按键重新连接一次),同时LCD显示屏也会显示IP地址。


然后,您可以在浏览器输入串口监视器打印的 ESP32 IP地址 或LCD显示屏显示的 ESP32 IP地址,使用浏览器打开ESP32的IP地址,并访问网页。在本例中,您可以在浏览器中输入你自己的ESP32 IP地址(这里是以192.168.36.189为例,而你需要将IP地址:192.168.36.189 修改成你自己的 ESP32 IP地址),在浏览器中打开ESP32的IP地址来查看控制LED亮灭的网页。

⚠️ 注意:当电脑、手机/平板和ESP32开发板,连接到同一个网络(WiFi)时,可在手机端/平板端打开这个网页。此处是你自己ESP32的IP地址。
在手机端/平板端的浏览器中打开对应的IP地址,即可控制LED等功能。

6.5.2.6 代码解释#
(1). 创建一个网页,并且在网页中添加一个名称为 LED 的按钮组件标签,设置为 “按钮” 类型。按一下按钮,LED点亮,再次按一下按钮,LED熄灭。

