Web Controlled Servo using Arduino and Wi-Fi

Web Controlled Servo using Arduino and Wi-Fi

In this post we are going to control a Servo Motor using a web browser with the help of Arduino and Wi-Fi module ESP8266. The ESP8266 will establish a connection between the servo and the web browser through the IP address and then by moving the Slider on the web page, the servo will move accordingly. Even by setting Port Forwarding in your router, you can control the Servo from anywhere in the world over the internet, we will explain that later in this tutorial.

In our previous projects, we have controlled the servo by using many other techniques like we have controlled the servo using Flex sensor, using Force sensor, using MATLAB etc. And we have also covered tutorials on interfacing of Servo with different Microcontrollers like with Arduino, Raspberry Pi, 8051, AVR etc. You can check all Servo related projects here.

Required Components:

The components used in this project are as follows

· Servo (sg90)

· Arduino Uno

· Wi-Fi module ESP8266

· Three 1K resistors

· Connecting wires

Circuit Diagram and Connections:

First of all we will connect the ESP8266 with the Arduino. ESP8266 runs on 3.3V and if you will give it 5V from the Arduino then it won’t work properly and it may get damage. Connect the VCC and the CH_PD to the 3.3V pin of Arduino. The RX pin of ESP8266 works on 3.3V and it will not communicate with the Arduino when we will connect it directly to the Arduino. So, we will have to make a voltage divider for it which will convert the 5V into 3.3V. This can be done by connecting three resistors in series like we did in the circuit. Connect the TX pin of the ESP8266 to the pin 4 of the Arduino and the RX pin of the ESP8266 to the pin 5 of Arduino through the resistors.

ESP8266 Wi-Fi module gives your projects access to Wi-Fi or internet. It is a very cheap device and make your projects very powerful. It can communicate with any microcontroller and it is the most leading devices in the IOT platform. Learn more about using ESP8266 with Arduino here.

Then connect the Servo Motor with the Arduino. The connections of the servo motor with the Arduinoare very easier. Connect the VCC and the ground pin of the servo motor to the 5V and the ground of the Arduino and the signal pin of the servo motor to the pin 9 of the Arduino.

How to run it:

To run it, you will have to make an HTML file that will open a web page. For that, you will have to copy below given HTML code (check downwards) and save it in a notepad. There should be ‘.html’ at the end of the file, means file must be saved with ‘.html’ extension. So, if you want to name the file as ‘servo’ then it should be as ‘servo.html’ so that it can be easily get opened in the web browser.

After this, you will have to place the jQuery file in the same folder where you have placed the html file. You can download the HTML file and jQuery from here, extract this zip file and use them directly. jQuery is the library of Java Script which has many JS functions which makes DOM manipulation (Document Object Model), event handling and use of Ajax easy-to-use.

Now open the html file in the web browser, it will look like this.

Now paste the Arduino code in the Arduino IDE and change the name of the Wi-Fi and the password with your Wi-Fi network name and password and upload the code. You will be given with an IP address in the Serial Monitor. Type this IP address in the box on web page. Now when you will move the slider, the Servo will move according to the Slider. So that is how you can control the Servo using Webpage.

HTML Code Explanation:

Here is the complete HTML code for this Web controlled Servo project, we will get through it line by line:

<!DOCTYPE html >

<html>

<head>

<title>Web controlled Servo</title>

</head>

<body>

<h1> <b> Web Controlled Servo by circuitdigest.com </b> </h1>

<h4> <b> Enter the IP address of esp8266 shown in the serial monitor below </b> </h4>

ESP8266 IP Address:

</FORM>

</div>

<h3> Scroll it to move servo 1 </h3>

</body>

$.ajaxSetup({timeout:1000});

function servo1(angle)

{

TextVar = form.inputbox.value;

ArduinoVar = "http://" + TextVar + ":80";

$.get( ArduinoVar, { "sr1": angle }) ;

{Connection: close};

}

</script>

</html>

The <!DOCTYPE html > tag will tell the web browser that which version of html we have used to write the html. This should be written at the top. Everything will be written after that.

The code written between the <html> </html> tags will be read by the browser. These are used to tell the web browser that the html code has started from here. The code written out of it will not be displayed on the webpage. The <head> </head> tags are used to define the title, links, jQuery and style. We have defined the title and the jQuery script in it. The data written in the <title></title> will be the name of the tab in the browser. In our code, we have named the tab as the “Web Controlled Servo”.

The <script></script> tags are used to include the jQuery. The jQuery is the JavaScript library and it greatly simplifies our code.

The body tags are used to define all the elements onto the webpage like textbox, range slider, button, text area etc. We can also define sizes for the elements. The h1, h2, h3, h4, h5 and h6 headings are used to write the data in different sizes. In our code, we have used the h1, h3 and h4 headings.

Then we have created a textbox for writing the IP address in it. It will match the IP address with the ESP8266 and will send the data at this IP address. After that, we created a slider (input type="range")that will send the value to the function named “servo1” from angle 20 to 170 for moving the slider.

function servo1(angle)

{

TextVar = form.inputbox.value;

ArduinoVar = "http://" + TextVar + ":80";

$.get( ArduinoVar, { "sr1": angle }) ;

{Connection: close};

}

Then the function will be executed and it will send the value to the Arduino to move the servo and will close the connections.

Arduino Code Explanation:

Complete Arduino Code for this Web Controlled Servo is given below in Code section. First of all we will include the Software Serial and the servo libraries. If you don’t have these libraries, then install it before uploading the code. Then define the pins where we have connected the ESP8266.The ‘DEBUG true’ will display the messages of the ESP8266 on the Serial Monitor. Then define the servo pin and declare a variable for servo.

#include <SoftwareSerial.h>

#include <Servo.h>

SoftwareSerial esp(4, 5); //set ESP8266 RX pin = 5, and TX pin = 4

#define DEBUG true //display ESP8266 messages on Serial Monitor

#define servopin 9 //servo 1 on digital port 9

Servo ser; //servo 1

Then tell the Arduino that at which pin we have connected the servo and set it to max position. Then set the baud rate of serial monitor and the ESP8266 at ‘115200’.

ser.attach(servopin);

ser.write(maxpos);

ser.detach();

Serial.begin(115200);

esp.begin(115200);

Below code will connect the ESP8266 to the Wi-Fi of your router which you have entered in the code and will tell you the IP address at which it will communicate with the webpage and will receive the data.

sendData("AT+RST\r\n", 2000, DEBUG); //reset module

sendData("AT+CWMODE=1\r\n", 1000, DEBUG); //set station mode

sendData("AT+CWJAP=\"Arsenal\",\"12345678\"\r\n", 2000, DEBUG); //connect wifi network

while(!esp.find("OK")) { //wait for connection

}

sendData("AT+CIFSR\r\n", 1000, DEBUG); //show IP address

sendData("AT+CIPMUX=1\r\n", 1000, DEBUG); //allow multiple connections

sendData("AT+CIPSERVER=1,80\r\n", 1000, DEBUG); //start web server on port 80

In the void loop() function, ESP8266 will check that if the data is arrived or not. If the data is arrived then it will read this data and will show it on the serial monitor and also will move the servo according to this data.

if (esp.available()) //check if there is data available on ESP8266

{

if (esp.find("+IPD,")) //if there is a new command

{

String msg;

esp.find("?"); //run cursor until command is found

msg = esp.readStringUntil(' '); //read the message

String command = msg.substring(0, 3); //command is informed in the first 3 characters "sr1"

String valueStr = msg.substring(4); //next 3 characters inform the desired angle

int value = valueStr.toInt(); //convert to integer

if (DEBUG) {

Serial.println(command);

Serial.println(value);

}

Finally sendData function is used to send the commands to the ESP8266 and to check their response.

String sendData(String command, const int timeout, boolean debug)

{

String response = "";

esp.print(command);

long int time = millis();

while ( (time + timeout) > millis())

{

while (esp.available())

{

char c = esp.read();

response += c;

}

if (debug)

{

Serial.print(response);

}

return response;

}

Demo & Code

4downfiles Or Userscloud

Internet of Things

Web Controlled Servo using Arduino and Wi-Fi

ไม่มีความคิดเห็น

ค้นหาบล็อกนี้

Tags

Most Popular

คลังบทความของบล็อก