1. 首页
  2. 科技知识
  3. 正文

使用Arduino和ESP8266通过网页控制舵机

  • 内容
  • ....
  • 相关

在本文中，我们将尝试通过网页来控制舵机，通过滑动网页上对应的滑块，促使舵机做相应地运动。这样的尝试在做一些远程开关或者远程控制的小设备时非常有用，比如把 宠物定时喂食器 改造成网页控制的也是可以实现的。为了让学习更有效，建议阅读：秒懂舵机角度控制原理 、什么是舵机？ 等文章。

电路连接

ESP8266与Arduino和舵机连接

首先，我们根据上图将ESP8266和舵机连接到Arduino。在这里我们使用了一个ESP-01的转接板来连接esp8266和Arduino，这样做的目的是解决Arduino 接口从5V到ESP8266间3.3V连接的问题，增加了转接板就不需要额外串接分压电阻了。详细硬件连接如下：ESP-01购买链接 ESP8266某宝链接

ESP8266与Arduino的连接

ESP8266的引脚定义，请查阅：串口ESP8266 WiFi模块测试 。

1.将ESP-01转接板的GND连接到Arduino的GND；
2.将ESP-01转接板的VCC连接到Arduino的5V；
3.将ESP-01转接板的RX连接到Arduino的引脚 2；
4.将ESP-01转接板的TX连接到Arduino的引脚 3上 。

舵机与Arduino的连接

完成ESP8266的连接后，再将舵机与Arduino连接。连接信息如下:

1.舵机的黑线连接Arduino的GND引脚；
2.舵机的红线连接Arduino的5V引脚；
3.舵机的黄线连接Arduino的引脚 8。

制作网页

要实现网页控制舵机，我们还需要使用HTML语言制作一个个性化的网页，响应式的网页还能很好的在手机等终端上使用。HTML代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>网页控制舵机--www.basemu.com</title>
<script src="./jquery.js"></script>
</head>
<body>
<h1><b>Arduino 网页控制舵机</b></h1>
<h4> <b> 在下框中输入 ESP8266 的IP地址 </b> </h4>
<div style="margin: 0; width:500px; height:80px;">
<form name="form" action="" method="GET">
ESP8266 IP 地址:
<input type="text" name="inputbox" value="192.168.0.9">
</form>
</div>
<h3> 滑动下标来控制舵机运动 </h3>
<input type="range" min="20" max="170" onmouseup="servo1(this.value)">
<script>
$.ajaxSetup({timeout:1000});
function servo1(angle)
{
	TextVar = form.inputbox.value;
	ArduinoVar = "http://" + TextVar + ":80";
	$.get( ArduinoVar, { "sr1": angle })	;
	{Connection: close};
}
</script>
</body></html>

将上面的代码保存为.html文件，接着下载 JQUERY 文件，这是一个.js文件，网盘下载地址：

链接：https://pan.baidu.com/s/13UHjBS_I2Mvsla73lu70zQ
提取码：d2u9

然后将rar文件解压，把jquery.js放到和HTML文件同一个文件夹中。然后，打开HTML网页显示如下：

Arduino 网页控制舵机

Arduino代码

#include <SoftwareSerial.h>
#include <Servo.h>
SoftwareSerial esp8266(2,3);
#define DEBUG true 
#define sg90_pin 8 
Servo sg90; 
int current_position = 170;
int vel = 10; 
int minimum_position = 20; 
int maximum_position = 160;
void setup()
{
sg90.attach(sg90_pin);
sg90.write(maximum_position);
sg90.detach();
Serial.begin(9600);
esp8266.begin(9600);
esp8266Data("AT+RST\r\n", 2000, DEBUG); //reset module
esp8266Data("AT+CWMODE=1\r\n", 1000, DEBUG); //set station mode
esp8266Data("AT+CWJAP=\"your ssid\",\"your password\"\r\n", 2000, DEBUG);   //connect wifi network
while(!esp8266.find("OK")) { //wait for connection
} 
esp8266Data("AT+CIFSR\r\n", 1000, DEBUG); 
esp8266Data("AT+CIPMUX=1\r\n", 1000, DEBUG); 
esp8266Data("AT+CIPSERVER=1,80\r\n", 1000, DEBUG); 
}
void loop()
{
if (esp8266.available())  
{
if (esp8266.find("+IPD,")) 
{
String msg;
esp8266.find("?"); 
msg = esp8266.readStringUntil(' '); 
String command = msg.substring(0, 3); 
String valueStr = msg.substring(4);   
int value = valueStr.toInt();         
if (DEBUG) {
Serial.println(command);
Serial.println(value);
}
delay(100);
//move servo1 to desired angle
if(command == "sr1") {
//limit input angle
if (value >= maximum_position) {
value = maximum_position;
}
if (value <= minimum_position) {
value = minimum_position;
}
sg90.attach(sg90_pin); //attach servo
while(current_position != value) {
if (current_position > value) {
current_position -= 1;
sg90.write(current_position);
delay(100/vel);
}
if (current_position < value) {
current_position += 1;
sg90.write(current_position);
delay(100/vel);
}
}
sg90.detach(); //dettach
}
}
}
}
String esp8266Data(String command, const int timeout, boolean debug)
{
String response = "";
esp8266.print(command);
long int time = millis();
while ( (time + timeout) > millis())
{
while (esp8266.available())
{
char c = esp8266.read();
response += c;
}
}
if (debug)
{
Serial.print(response);
}
return response;
}

代码分析

首先，引入 SoftwareSerial.h 和 Servo.h。 SoftwareSerial.h 库将在Arduino的其他引脚上打开串口通信功能。Servo.h 库将实现舵机的运动控制，要了解更多servo.h的信息，请查阅：使用servo.h控制SG90舵机 和 如何使用Arduino舵机库servo.h 等文章。之后，我们定义了从ESP8266连接RX和TX的引脚编号，然后定义舵机的信号引脚 8。

#include <SoftwareSerial.h>
#include <Servo.h>
SoftwareSerial esp8266(2,3);
#define DEBUG true 
#define sg90_pin 8

然后在setup函数中，我们告诉Arduino我们已经将舵机连接到哪个脚，并将舵机移动到最大角度位置。然后将串口和Esp8266的波特率设置为9600。Esp8266可能有不同的波特率，这里需要根据你的Esp8266的波特率进行设置。

sg90.attach(sg90_pin);
sg90.write(maximum_position);
sg90.detach();
Serial.begin(9600);
esp8266.begin(9600);

下面的命令将配置ESP8266连接到Wi-Fi网络， 并设置web服务器 。根据实际修改你的SSID和密码。上传代码后相关的连接信息会在串口监视器中显示出来。

esp8266Data("AT+RST\r\n", 2000, DEBUG); //reset module
esp8266Data("AT+CWMODE=1\r\n", 1000, DEBUG); //set station mode
esp8266Data("AT+CWJAP=\"your ssid\",\"your password\"\r\n", 2000, DEBUG);   //connect wifi network
while(!esp8266.find("OK")) { //wait for connection
} 
esp8266Data("AT+CIFSR\r\n", 1000, DEBUG); 
esp8266Data("AT+CIPMUX=1\r\n", 1000, DEBUG); 
esp8266Data("AT+CIPSERVER=1,80\r\n", 1000, DEBUG);

下面的代码Arduino将查看数据是否可用。如果移动了网页上的滑块，那么ESP8266会根据移动的滑块将数据发送给Arduino。Arduino根据ESP8266传来的值来控制舵机的移动。

if (esp8266.available())  
{
if (esp8266.find("+IPD,")) 
{
String msg;
esp8266.find("?"); 
msg = esp8266.readStringUntil(' '); 
String command = msg.substring(0, 3); 
String valueStr = msg.substring(4);   
int value = valueStr.toInt();

下面的函数将命令发送到ESP8266，并将在串口监视器上显示连接信息。

String esp8266Data(String command, const int timeout, boolean debug)<br>
{<br>
String response = "";<br>
esp8266.print(command);<br>
long int time = millis();<br>
while ( (time + timeout) > millis())<br>
{<br>
while (esp8266.available())<br>
{<br>
char c = esp8266.read();

最后，请记得务必修改代码中SSID和密码，然后上传代码。打开串口监视器会显示IP地址，如下图所示:

在浏览器的地址栏输入这个IP地址。现在，当你移动滑块时，舵机就会移动了。扩展阅读：通过WEB浏览器远程控制继电器

相关文章

刷新