基于MQTT协议实现远程控制的"智能"车

智能，但不完全智能

虽然我不觉得这玩意儿有啥智能的，但都这么叫就跟着叫喽。

时隔好几天才写的

其实在写这篇博文的时候我已经在做升级了，并且已经到了中后期阶段了。

主要是业余时间做着玩，看时间了。

规格 & 实拍

• ESP32
• 远程控制
• 两驱动轮+一万向轮

所需硬件

• 继电器*4 或 双路电机2驱动模块 *1

• 电机*2

• 轮子*2

• 万向轮*1

• 电源*1

• MCU *1

• 导线若干 (我就是因为没买够线只能用杜邦线了)

……

推荐使用电机驱动模块，或者自己用mos管。

直接使用双路继电器控制的缺点有：

• 体积大
• 不支持pwm调速
• 等等等

ESP32端开发

由于我目前正在升级的版本代码也是基于这个版本代码进行开发的，所以现在说的是我的新版本代码，从代码中体现出来的就是多了两个轮子，Copy时注意删减，虽然不影响。

开发基于：

PaltformIO IDE

引入MQTT库

256dpi/MQTT@^2.5.0

这个库是老版本的车身控制用的，现在新版本换了个库，因为这个库不支持发送uint8_t数据。但是这个库，简单好用。

推荐使用库 (用了，但没测试)：

knolleary/PubSubClient@^2.8

继电器信号IO口管理

/**
    右轮双路继电器
*/
// 14 右轮一号继电器IO串口号 （吸合前进）
int RIGHT_ONE_A = 14;
// 12 右轮二号继电器IO串口号 （吸合后退）
int RIGHT_TWO_A = 12;

//右轮一号继电器IO串口号 （吸合前进）
int RIGHT_ONE_B = 14;
//右轮二号继电器IO串口号 （吸合后退）
int RIGHT_TWO_B = 12;

//=====================================================

// 17 左轮二号继电器IO串口号 （吸合前进）
int LEFT_ONE_A = 17;
// 16 左轮二号继电器IO串口号 （吸合后退）
int LEFT_TWO_A = 16;

//左轮二号继电器IO串口号 （吸合前进）
int LEFT_ONE_B = 17;
//左轮二号继电器IO串口号 （吸合后退）
int LEFT_TWO_B = 16;

继电器状态管理

/*
  已更换使用基于内置mos管的驱动模块
*/
//右轮1号继电器吸合状态
boolean RIGHT_ONE_A_STATUS = false;
//右轮2号继电器吸合状态
boolean RIGHT_TWO_A_STATUS = false;
//右后轮1号继电器吸合状态
boolean RIGHT_ONE_B_STATUS = false;
//右后轮2号继电器吸合状态
boolean RIGHT_TWO_B_STATUS = false;

//左轮1号继电器吸合状态
boolean LEFT_ONE_A_STATUS = false;
//左轮2号继电器吸合状态
boolean LEFT_TWO_A_STATUS = false;
//左后轮1号继电器吸合状态
boolean LEFT_ONE_B_STATUS = false;
//左后轮2号继电器吸合状态
boolean LEFT_TWO_B_STATUS = false;

//采用差速转向
//右转向动力锁
boolean RIGHT_TURN_LOCK = false;
//左转向动力锁
boolean LEFT_TURN_LOCK = false;

继电器注意事项

继电器这里要说一下，有的像我一样的萌新一开始不知道继电器要怎么用，知道个大概逻辑却不知道怎么接线，所以这里提一下，

敲黑板

继电器接口有：

VCC、GND、IN；

NC、COM、ON；

六个接口

这里要注意的是：

• VCC、GND是给继电器供电用的！只是给继电器供电用！控制开合后VCC并不会连接到COM；
• ON或NC接用电器的电源正极；
• COM接到用电器，这时候对于NC、ON来说COM是负极，对于用电器是正极；
• 用电器负极接电源负极，形成通路；

比如电源正极接到了ON，那么继电器吸合后的电路如下：

电源正极——ON——COM——用电器——电源负极

鬼知道我经历了什么，问了学这个专业朋友都表示”我没用过“，淦哦

核心控制

在loop中调用;

该控制逻辑可实现有：

• 前进/后退
• 转弯时弯内侧轮反转缩小转弯半径
• 前进/后退同时转弯

/**
 * @brief 根据状态值为继电器输出高低电平
 */
void relayOnStatus()
{
  if ((RIGHT_ONE_A_STATUS || LEFT_TURN_LOCK) && RIGHT_TURN_LOCK == false)
  {
    digitalWrite(RIGHT_ONE_A, HIGH);
    digitalWrite(RIGHT_ONE_B, HIGH);
  }
  else
  {
    digitalWrite(RIGHT_ONE_A, LOW);
    digitalWrite(RIGHT_ONE_B, LOW);
  }
  if (RIGHT_TWO_A_STATUS || RIGHT_TURN_LOCK)
  {
    digitalWrite(RIGHT_TWO_A, HIGH);
    digitalWrite(RIGHT_TWO_B, HIGH);
  }
  else
  {
    digitalWrite(RIGHT_TWO_A, LOW);
    digitalWrite(RIGHT_TWO_B, LOW);
  }

  if ((LEFT_ONE_A_STATUS || RIGHT_TURN_LOCK) && LEFT_TURN_LOCK == false)
  {
    digitalWrite(LEFT_ONE_A, HIGH);
    digitalWrite(LEFT_ONE_B, HIGH);
  }
  else
  {
    digitalWrite(LEFT_ONE_A, LOW);
    digitalWrite(LEFT_ONE_B, LOW);
  }
  if (LEFT_TWO_A_STATUS || LEFT_TURN_LOCK)
  {
    digitalWrite(LEFT_TWO_A, HIGH);
    digitalWrite(LEFT_TWO_B, HIGH);
  }
  else
  {
    digitalWrite(LEFT_TWO_A, LOW);
    digitalWrite(LEFT_TWO_B, LOW);
  }
}

MQTT使用

MQTTClient client;
WiFiClient net;
//mqtt接收到消息的回调
void messageReceived(String &topic, String &payload)
{
    //这个方法里的allRun()这种的函数我就不多说了，只是控制一下继电器状态管理那里变量的值
  Serial.println("incoming: " + topic + " - " + payload);
  if (payload.equals("\"run\""))
  {
    allRun();
  }
  if (payload.equals("\"stop\""))
  {
    allStop();
  }
  if (payload.equals("\"back\""))
  {
    allBack();
  }
  if (payload.equals("\"leftStart\""))
  {
    turnLeftStart();
  }

  if (payload.equals("\"rightStart\""))
  {
    turnRightStart();
  }

  if (payload.equals("\"leftStop\""))
  {
    turnLeftStop();
  }

  if (payload.equals("\"rightStop\""))
  {
    turnRightStop();
  }
}
//mqtt连接封装函数
void connect()
{
  while (!client.connect("car-client"))
  {
    Serial.print(".");
    delay(1000);
  }
  Serial.println("\nconnected!");
}

void setup()
{
  client.begin("***.***.***.***", net);
  client.onMessage(messageReceived);
  connect();
}
void loop()
{
  //mqtt消息处理
  client.loop();

  if (!client.connected())
  {
    connect();
  }
  //控制核心逻辑
  relayOnStatus();
}

Java 服务器端开发

可以说是一个中转，可以不要，只是可以避免控制端直接在ESP32端订阅的主题中直接发布控制命令；

引入依赖

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.integration</groupId>
            <artifactId>spring-integration-mqtt</artifactId>
            <version>5.3.2.RELEASE</version>
        </dependency>

MQTT Client工厂

小声bb: copy来的

package cn.b0x0.carserver.common.factory;

import org.eclipse.paho.client.mqttv3.MqttClient;
import org.eclipse.paho.client.mqttv3.MqttConnectOptions;
import org.eclipse.paho.client.mqttv3.MqttException;

public class MqttFactory {

    private static MqttClient client;

    /**
     *   获取客户端实例
     *   单例模式, 存在则返回, 不存在则初始化
     */
    public static MqttClient getInstance() {
        if (client == null) {
            init();
        }
        return client;
    }

    /**
     *   初始化客户端
     */
    public static void init() {
        try {
            client = new MqttClient("tcp://***.***.***.***:1883", "car-****-" + System.currentTimeMillis());
            // MQTT配置对象
            MqttConnectOptions options = new MqttConnectOptions();
            // 设置自动重连, 其它具体参数可以查看MqttConnectOptions
            options.setAutomaticReconnect(true);
            if (!client.isConnected()) {
                client.connect(options);
            }
        } catch (MqttException e) {
            throw new RuntimeException("MQTT: 连接消息服务器失败");
        }
    }

}

MQTT Util

package cn.b0x0.carserver.common.util;

import cn.b0x0.carserver.common.factory.MqttFactory;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.eclipse.paho.client.mqttv3.IMqttMessageListener;
import org.eclipse.paho.client.mqttv3.MqttClient;
import org.eclipse.paho.client.mqttv3.MqttException;
import org.eclipse.paho.client.mqttv3.MqttMessage;

import java.nio.charset.StandardCharsets;

public class MqttUtil {

    /**
     *   发送消息
     *   @param topic 主题
     *   @param data 消息内容
     */
    public static void send(String topic, Object data) {
        // 获取客户端实例
        MqttClient client = MqttFactory.getInstance();
        ObjectMapper mapper = new ObjectMapper();
        try {
            // 转换消息为json字符串
            String json = mapper.writeValueAsString(data);
            MqttMessage message = new MqttMessage(json.getBytes(StandardCharsets.UTF_8));
            //小车控制要求，消息级别固定2
            message.setQos(2);
            client.publish(topic, message);
        } catch (JsonProcessingException | MqttException ignored) {
        }
    }

    /**
     * 订阅主题
     * @param topic 主题
     * @param listener 消息监听处理器
     */
    public static void subscribe(String topic, IMqttMessageListener listener) {
        MqttClient client = MqttFactory.getInstance();
        try {
            client.subscribe(topic, listener);
        } catch (MqttException ignored) {
        }
    }

}

Controller

简单点

package cn.b0x0.carserver.controller;

import cn.b0x0.carserver.common.util.MqttUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/")
public class CarControlController {
    @RequestMapping("/all/run")
    public String run(){
        MqttUtil.send("car-client","run");
        return "success";
    }
    @RequestMapping("/all/stop")
    public String stop(){
        MqttUtil.send("car-client","stop");
        return "success";
    }
    @RequestMapping("/all/back")
    public String back(){
        MqttUtil.send("car-client","back");
        return "success";
    }
    @RequestMapping("/turn/left/start")
    public String leftStart(){
        MqttUtil.send("car-client","leftStart");
        return "success";
    }
    @RequestMapping("/turn/right/start")
    public String rightStart(){
        MqttUtil.send("car-client","rightStart");
        return "success";
    }
    @RequestMapping("/turn/left/stop")
    public String leftStop(){
        MqttUtil.send("car-client","leftStop");
        return "success";
    }
    @RequestMapping("/turn/right/stop")
    public String rightStop(){
        MqttUtil.send("car-client","rightStop");
        return "success";
    }
}

控制端开发

使用的web页面进行控制，主要是跨平台，因为我不会写IOSApp这些。

之前web页面是要在ESP32运行的，所以基本都使用了原生JS，现在没这个必要了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ESP32 WebController</title>
	</head>
	<script src="https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js"></script>
	<style>
		* {
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		/* ========================== */
		body {
			height: 100vh;
			width: 100%;
		}

		#title {
			flex-grow: 4;
			width: 100%;

			display: flex;
			flex-direction: row;
		}

		.cam-but-left {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			padding: 10px;
		}

		.cam-but-right {
			flex-grow: 1;
			display: flex;
			flex-direction: row;
		}

		.cam-video {
			flex-grow: 5;
			background-color: #8b8b8b;
		}
		.cam-but{
			background-color: #dedede;
			margin: 5px;
			height: 100%;
			width: 100%;
		}

		.controller-content {
			height: 100%;
			width: 100%;
			display: flex;
			display: -webkit-flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
		}

		#controller-but {
			width: 100%;
			flex-grow: 2;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		#runAndBack {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		#leftAndRight {
			height: 100%;
			width: 100%;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
		}

		#run {
			/* border-left: 385px  solid transparent;
			    border-right: 385px  solid transparent;
			    border-bottom: 350px solid #d9d9d9;
			    background-color: #dedede; */
			background-color: #dedede;
			height: 100%;
			/* width: 100%; */
			margin: 10px;
		}

		#back {
			background-color: #dedede;
			height: 100%;
			margin: 10px;
		}

		#left {
			background-color: #dedede;
			height: 100%;
			width: 100%;
			margin: 10px;
			margin-right: 0px;
		}
		#right {
			background-color: #dedede;
			height: 100%;
			width: 100%;
			margin: 10px;
		}

		#right:active {
			background-color: #d5d5d5;
		}

		.controller-but {
			border-radius: 5px;
		}
	</style>
	<body>

		<div class="controller-content">
			<div id="title">
				<!-- <h1>Web Controller</h1>
				控制按钮功能只可意会不可言传 -->
				<div class="cam-but-left">
					<div class="cam-but" id="cam-but-left-up">

					</div>
					<div class="cam-but" id="cam-but-left-down">

					</div>
				</div>
				<div class="cam-video">
				</div>
				<div class="cam-but-right">
					<div class="cam-but" id="cam-but-right-left">

					</div>
					<div class="cam-but" id="cam-but-right-right">

					</div>
				</div>
			</div>
			<div id="controller-but">
				<div id="runAndBack">
					<div id="run" class="controller-but"></div>
					<div id="back" class="controller-but"></div>
				</div>
				<div id="leftAndRight">
					<div id="left" class="controller-but"></div>
					<div id="right" class="controller-but"></div>
				</div>
			</div>

		</div>
	</body>
	<script type="text/javascript">
	const options = {
	      // 认证信息
	      clientId: 'car-***-****'
	}
	const client = mqtt.connect('ws://**.**.**.**:8083/mqtt', options);
	client.subscribe('car-cam-images-view');
	client.on('message', function (topic, message) {
		//在这里处理
		var p1 = message.toString();
		console.log(p1);
	})
	client.on('reconnect', (error) => {
	    console.log('正在重连:', error)
	})
	client.on('connect', (error) => {
	    console.log('连接成功:', error)
	})
	client.on('error', (error) => {
	    console.log('连接失败:', error)
	})
		function createXHR() {
			if (typeof XMLHttpRequest != "undefined") {
				return new XMLHttpRequest();
			} else if (typeof ActiveXObject != "undefined") {
				if (typeof arguments.callee.activeXString != "string") {
					var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
						i, len;
					for (i = 0, len = versions.length; i < len; i++) {
						try {
							new ActiveXObject(versions[i]);
							arguments.callee.activeXString = versions[i];
							break;
						} catch (ex) {
							//跳过
						}
					}
				}
				return new ActiveXObject(arguments.callee.activeXString);
			} else {
				throw new Error("No XHR object available.");
			}
		}

		function send(url) {
			var xhr = createXHR();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
						console.log(xhr.responseText);
					} else {
						console.log("Request was unsuccessful: " + xhr.status);
					}
				}
			};
			xhr.open("get", "http://iot.b0x0.cn/"+url, true);
			xhr.send(null);
		}
		var runBut = document.getElementById("run");
		var backBut = document.getElementById("back");
		var leftBut = document.getElementById("left");
		var rightBut = document.getElementById("right");

		var camLeftUp = document.getElementById("cam-but-left-up");
		var camLeftDown = document.getElementById("cam-but-left-down");
		var camRightLeft = document.getElementById("cam-but-right-left");
		var camRightRight = document.getElementById("cam-but-right-right");
		camLeftUp.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("cam/left/up");
			runBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("camLeftUp touchstart");
		});
		camLeftDown.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("cam/left/down");
			runBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("camLeftDown touchstart");
		});
		camRightLeft.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("cam/right/left");
			runBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("camRightLeft touchstart");
		});
		camRightRight.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("cam/right/right");
			runBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("camRightRight touchstart");
		});

		runBut.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("all/run");
			runBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("runBut touchstart");
		});
		leftBut.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("turn/left/start");
			leftBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("leftBut touchstart");
		});
		backBut.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("all/back");
			backBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("backBut touchstart");
		});
		rightBut.addEventListener("touchstart", function(event) {
			event.preventDefault();
			send("turn/right/start");
			rightBut.style.cssText = 'background-color: #d5d5d5;'
			console.log("rightBut touchstart");
		});

		runBut.addEventListener("touchend", function() {
			send("all/stop");
			runBut.style.cssText = 'background-color: #dedede;'
			console.log("runBut touchend");
		});
		leftBut.addEventListener("touchend", function() {
			send("turn/left/stop");
			leftBut.style.cssText = 'background-color: #dedede;'
			console.log("leftBut touchend");
		});
		backBut.addEventListener("touchend", function() {
			send("all/stop");
			backBut.style.cssText = 'background-color: #dedede;'
			console.log("backBut touchend");
		});
		rightBut.addEventListener("touchend", function() {
			send("turn/right/stop");
			rightBut.style.cssText = 'background-color: #dedede;'
			console.log("rightBut touchend");
		});
		camLeftUp.addEventListener("touchend", function() {
			send("cam/left/stop");
			rightBut.style.cssText = 'background-color: #dedede;'
			console.log("camLeftUp touchend");
		});
		camLeftDown.addEventListener("touchend", function() {
			send("cam/left/stop");
			rightBut.style.cssText = 'background-color: #dedede;'
			console.log("camLeftDown touchend");
		});
		camRightLeft.addEventListener("touchend", function() {
			send("cam/right/stop");
			rightBut.style.cssText = 'background-color: #dedede;'
			console.log("camRightLeft touchend");
		});
		camRightRight.addEventListener("touchend", function() {
			send("cam/right/stop");
			rightBut.style.cssText = 'background-color: #dedede;'
			console.log("camRightRight touchend");
		});
	</script>
</html>

麻了，复制代码复制麻了

待我新版本搞好，到时候用git分享这些。

因为公司在用其他的，家里电脑刚换没多久，都没装git相关的东西，麻了我都