ESP32实战：WiFi遥控小车制作教程
ESP32实战：WiFi遥控小车制作教程
本教程将详细介绍如何使用ESP32开发板制作一个WiFi遥控小车。通过Web服务器实现对小车的远程控制，包括前进、后退、左转、右转等操作，并支持速度调节。
一、项目简介
在本项目中，将详细介绍如何创建一个基于 ESP32 的 Wi-Fi 遥控小车。该项目分为两部分，第一部分将讲解如何使用 ESP32 控制直流电机并组装电路，第二部分则是通过 Web 服务器编程来实现对机器人的控制。
1. 项目特点与功能
- Wi-Fi 控制：机器人通过 ESP32 利用 Wi-Fi 进行控制，创建一个基于 Web 的界面，可在本地网络中的任何设备上访问并控制小车。
- 多种控制选项：Web 服务器提供了前进、后退、右转、左转和停止这 5 种控制选项，同时还有一个滑条用于控制速度，速度可选择0、25、50、75 或 100%。
2. 所需零件
- ESP32开发板
- 小车底盘套件（底盘 + 2 个直流电机）
- L298N 电机驱动板
- 1 个移动电源（用于给 ESP32 供电）
- 1 节 9V 电池（用于给电机供电）
- 杜邦线
二、项目详情
0. 知识背景
最好将前面的教程看过一遍之后再来看本教程，可能会更容易上手，本项目为之前教程的融合实战项目。
1. 电路接线图
电路接线较为简单，按图连接即可。这里需要两个电源，原因是电机类消耗电流太大，会影响ESP32的供电，导致ESP32工作异常。因此需要2个电源分别给ESP32开发板和电机驱动电路进行供电。图中未标出ESP32的供电。
本项目使用L298N驱动模块，关于该模块网络上有较多的说明，此处不再重复造轮子。
注意：2个电源，L298N以及ESP的需要共地，否则不能正常运行。
※涉及到电机的正转反转，如果与预想的不一样时，电机的接线对调下即可。
EPS32 – L298N
D14 – ENA
D27 – IN1
D26 – IN2
D25 – IN3
D33 – IN4
D32 – ENB
2. IO配置
把IN1~4配置为输出
ENA,ENB配置为PWM模式。
关于PWM的使用方法请参考ESP32教程（基于Arduino IDE）3-基本操作
// 配置电机的驱动
pinMode(motor1Pin1, OUTPUT);
pinMode(motor1Pin2, OUTPUT);
pinMode(motor2Pin1, OUTPUT);
pinMode(motor2Pin2, OUTPUT);
// 配置PWM
ledcAttach(enable1Pin, freq, resolution);
ledcAttach(enable2Pin, freq, resolution);
3. 效果
在网页端输入IP地址后，会出现如下图片，可以进行单击控制小车的运行，以及速度的设置。速度设置了5段，0，25%，50%，75%，100%。每次点击，在串口端也会有相应的反馈，如下图。
4. 关键代码说明
初始化
void setup()
这部分代码主要是进行初始化，在前面的教程里已讲过，不再赘述。主要是初始化了
- 配网，需要搭配ESPTouch APP来实现配网
- 初始化点击驱动
- 启动Web服务器
主循环
①控制小车部分
已前进，左转为例，当解析到Web传递回来的是forward（前进）时，则在串口中打印前进的信息，并执行前进的代码。前后左右的控制的连接主要用
else if
语句来做条件变换。
if (header.indexOf("GET /forward") >= 0) { // 如果请求是前进
Serial.println("前进");
digitalWrite(motor1Pin1, LOW);
digitalWrite(motor1Pin2, HIGH);
digitalWrite(motor2Pin1, LOW);
digitalWrite(motor2Pin2, HIGH);
} else if (header.indexOf("GET /left") >= 0) { // 如果请求是左转
Serial.println("左转");
digitalWrite(motor1Pin1, LOW);
digitalWrite(motor1Pin2, LOW);
digitalWrite(motor2Pin1, LOW);
digitalWrite(motor2Pin2, HIGH);
}
②网页画面显示部分
较之前不同的是本次添加了一个滑动条来更改小车速度，因此就稍微讲解下这部分。
client.println("<p>电机速度: <span id=\"motorSpeed\"></span></p>");
client.println("<input type=\"range\" min=\"0\" max=\"100\" step=\"25\" id=\"motorSlider\" onchange=\"motorSpeed(this.value)\" value=\"" + valueString + "\"/>");
首先，第一行代码用一个
元素显示当前滑动条的值。
的ID是motorSpeed，用于在JavaScript中动态更新显示的值。
第二行代码创建了一个滑动条（
），用于调整电机速度。
属性说明：
- min=“0”：滑动条的最小值为0。
- max=“100”：滑动条的最大值为100。
- step=“25”：滑动条每次移动的步长为25。
- id=“motorSlider”：滑动条的ID，用于在JavaScript中引用。
- οnchange=“motorSpeed(this.value)”：当滑动条的值改变时，调用JavaScript函数motorSpeed并传递当前的值。
- value=“” + valueString + “”：滑动条的初始值，由变量valueString提供。
处理滑动条的事件
获取滑动条元素，并将其赋值给变量
slider
。
var slider = document.getElementById("motorSlider");
获取显示电机速度的
元素，并将滑动条的当前值显示在页面上。
var motorP = document.getElementById("motorSpeed"); motorP.innerHTML = slider.value;
当滑动条的值改变时，更新滑动条本身的值（确保显示正确），并在
中显示当前值。
client.println("slider.oninput = function() { slider.value = this.value; motorP.innerHTML = this.value; }");
定义一个名为motorSpeed的函数，当滑动条的值改变时调用此函数。该函数使用$.get发送一个HTTP GET请求到服务器，路径中包含滑动条的当前值（如/?value=75&），用于调整电机的PWM占空比。
client.println("function motorSpeed(pos) { $.get(\"/?value=\" + pos + \"&\"); {Connection: close};}</script>");
三、 总结
以上就是本次项目的所有内容。下次打算再做一个传感器的项目，最后可能会写一些基于Homekit的项目。