ESP32实战-WiFi遥控小车

ESP32教程系列
1 - 认识ESP32
2 - Arduino IDE安装&配置
3 - 基本操作
4 - WiFi配网
5 - WebServer①
6 - Web Server②控制输出
7 - Web Server③ HTML&CSS基础
8 - Web Server④ 在Arduinio中添加HTML&CSS
9 - 异步网页服务器 Asynchronous Web Server（DHT11)
10 - OTA ESP32无线升级,告别数据线

ESP32实战系列
WiFi遥控小车

ESP32 Homekit系列
Homekit & Homespan介绍
点亮一颗LED
调节LED亮度
完整源码免费公布在微信公众号[+大钱硬件]，在正文中有完整源码。

一、项目简介

在本项目中，将详细介绍如何创建一个基于 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()这部分代码主要是进行初始化，在前面的教程里已讲过，不再赘述。主要是初始化了

1. 配网，需要搭配ESPTouch APP来实现配网
2. 初始化点击驱动
3. 启动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 + "\"/>");

首先，第一行代码用一个<span>元素显示当前滑动条的值。<span>的ID是motorSpeed，用于在JavaScript中动态更新显示的值。
第二行代码创建了一个滑动条（<input type="range">），用于调整电机速度。
属性说明：

• 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");

获取显示电机速度的<span>元素，并将滑动条的当前值显示在页面上。

var motorP = document.getElementById("motorSpeed"); motorP.innerHTML = slider.value;

当滑动条的值改变时，更新滑动条本身的值（确保显示正确），并在<span id="motorSpeed">中显示当前值。

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的项目。
※码字不易，本项目代码放在代码放在CSDN仓库，请见谅。或者关注微信公众号:[+大钱硬件]，在正文中有完整源码免费公开。

苹果智能家居HomeKit系列文章
ESP32 Homekit实战 - Homekit & Homespan介绍
ESP32 Homekit实战 - 点亮一颗LED