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

首先,我们根据上图将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代码
#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浏览器远程控制继电器