Control the servo motor via web using Arduino and ESP8266 module.
In this article, we will implement control of the servo motor through a web interface. The webpage will be created using ESP8266 module, and the servo motor will move in response to the slider on the webpage.
Connect the ESP8266 to the Arduino UNO development board
Network Control Servo Circuit Diagram
First, connect the ESP8266 to the Arduino. We use an adapter to connect the ESP8266 to the Arduino, which makes the connection easier. The adapter has a 5 to 3.3V regulator, so you do not need to connect any external resistors.
● Connect the adapter’s GND to the Arduino’s GND
● Connect the adapter’s VCC to the Arduino’s 5V
● Connect RX from the adapter to Arduino’s pin 2
● Connect TX pin from the adapter to Arduino’s pin 3
Then, connect the servo motor to the Arduino. Connect the servo motor to the Arduino as follows:
● The black wire of the servo motor connects to the Arduino’s GND pin
● The red wire of the servo motor connects to the Arduino’s 5V pin
● The yellow wire of the servo motor connects to Arduino’s pin 8
Create a Webpage
To control the servo motor via the webpage, we must create a webpage using HTML. The HTML code we created for the project can be downloaded at the end of this article. If you want to rename the file, please change the filename, but ensure it ends with “.html”.
After that, download the JQUERY file and place this file in the same folder as the HTML file. Then, open the HTML, and the webpage will look like this:
Now, change the Wi-Fi name and password in the Arduino code to your Wi-Fi name and password. Then upload the code. Open the serial monitor, and it will display the IP address as shown in the figure below:
Type this IP address in the blank space specified on the webpage. Now, when you move the slider, the servo motor will move.
Code Explanation
First, include the software serial and servo motor libraries. The software serial library will help us use TX and RX communication on other pins of the Arduino. The servo motor library will help us easily move the servo. After that, we define the pins connected to RX and TX from the ESP8266, and then define the pins connected to the servo motor.
After that, we define the pins connected to RX and TX from the ESP8266, and then define the pins connected to the servo motor.
#include <SoftwareSerial.h>#include <Servo.h>SoftwareSerial esp8266(2,3);#define DEBUG true #define sg90_pin 8Then, in the setup() function, we instruct the Arduino which pin to connect the servo motor to and move the motor to the maximum position. Then we set the baud rate for serial communication and the ESP8266 baud rate to 9600. You need to set the ESP8266 baud rate according to the ESP8266’s baud rate. Your ESP8266 may have a different baud rate.
sg90.attach(sg90_pin);sg90.write(maximum_position);sg90.detach();Serial.begin(9600);esp8266.begin(9600);The following commands will connect the ESP8266 to the Wi-Fi network and set the web server to the IP address and port. After uploading the code, it will display in the serial monitor.
esp8266Data("AT+RST\r\n", 2000, DEBUG); //reset moduleesp8266Data("AT+CWMODE=1\r\n", 1000, DEBUG); //set station modeesp8266Data("AT+CWJAP=\"Tenda_31BC98\",\"barcelona\"\r\n", 2000, DEBUG); //connect wifi networkwhile(!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 will check if data is available. If the slider on the webpage has moved, the ESP8266 will send data to the Arduino according to the movement of the slider. Arduino moves the servo motor based on the value given by the 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();The following function sends commands to the ESP8266 and prints the ESP8266’s response on the serial monitor.
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;}}To download the complete code used in this article, please click “Read Original” 》》