Web Controlled Servo Motor using Arduino and esp8266

Web Controlled Servo Motor using Arduino and ESP8266 Wi-FiIn today’s tutorial will we learn about the interaction between website, Wi-Fi module and Arduino. We will control the angle of a servo motor using Arduino and Wi-Fi module. We will develop a small webpage using html and java script and then send command to Arduino using Wi-Fi module. We will make connection between webpage and Wi-Fi module using IP address and then by using a slider we will control angle of Motor. If we set the port forwarding for our Wi-Fi router we can control the motor from anywhere in world. It is only setting of router noting needs to be changed in code or circuit. You can search on internet for port forwarding settings for your router. Before starting this tutorial I will recommend you to check how to interface Arduino with esp8266 WI-FI moduleweb controlled serrvo motor using Arduio

Components Required for servo motor control using esp8266

Following is the list of components required for this particular project.

  • Arduino UNO
  • Servo Motor
  • Wi-Fi module ESP8266
  • One 2k resistor
  • One 1k resistor
  • Jumper wires

Wi-Fi module esp8266

Wi-Fi module has 8 pin outs which are arranged in 2 rows. Keeping the integrated side facing you and pins closer to your end. Lower row from left to right is

  1. Tx ­- Transmitting pin
  2. CH-DO – Channel Down pin
  3. RST – Reset
  4. Vcc – 3.3V power supply

Upper row from left to right has

  1. GND – Power supply ground
  2. GPIO_2 – Not Used
  3. GPIO_0 – Not Used
  4. Rx – Receiver pin

Servo Motor:

Servo motor from Tower Pro Company is shown below. It has 3 output Wires.

  1. Brown (Power Supply Ground)
  2. Red (5V power Supply)
  3. Orange (Signal Pin)

Web Controlled Servo Motor using Arduino and esp8266

Connections of ESP8266 Wi-Fi module with Arduino are as follows.

  1. ESP8266 Wi-Fi module Tx Pin with     D6 of Arduino
  2. ESP8266 Wi-Fi module CH-EN Pin with     3V of Arduino
  3. ESP8266 Wi-Fi module Vcc Pin with     3V of Arduino
  4. ESP8266 Wi-Fi module GND Pin with     GND of Arduino
  5. ESP8266 Wi-Fi module Rx Pin with     middle point (Junction point of series 1k and 2k resistor) of Voltage divider.
  6. Second end of 1k resistor with     D7 of Arduino.
  7. Second end of 2k resistor with     GND of Arduino.

Connections of Servo motor with Arduino are as follows.

  1. Servo Motor GND pin with                 GND of Arduino.
  2. Servo Motor Vcc pin with                 5V of Arduino.
  3. Servo Motor Signal pin with                 D10 of Arduino.

Software Part:

First you need to make an .html page which will form your website to control the Motor angle. You will also need jQuery file for it. Both should be in same folder. Both files are provided at the end.

Explanation of html Code:

<!DOCTYPE> tells browser that we are using html5 version to write the html code for this page. It should be on the top of page

<html> </html> code written inside these tags is displayed on the webpage and title bar. It consists of head and body tags. It tells the starting point and ending point of html page to browser.

<head></head> these tags contain title, styles, links, and jQuery script.

<title></title> the statement written inside title tag is displayed on the title bar or tab of the page.

<script></script> this tag is used to include the jQuery. The jQuery is JavaScript library whichis used to simply and automate the tasks.

<body></body> What ever written inside the body tag will displayed on the page of website. Different tags are used inside the body tag to make the display attractive and readable.

<center></center> tag is used to bring the text in the center of page

<h1></h1> is used to make the size larger. There are h2, h3, h4, h5 tags which differ in text size.

<marquee></marquee> is used to move the text in specified direction as mentioned in attribute “direction”.

<b><\b> makes the text bold.

<div></div> is used to make a box of specified height and width. Border is not shown for it .

<FORM></FORM> is used to take input from user.

<input type= “range”> creates a slider whose range can be specified in attributes of tags.

Function servo sends the value of slider to board so that it can move the servo to a specified angle and at the end it closes the connection.

Second part of software consists of Arduino code which is placed in IDE and is uploaded to board.

Explanation of Arduino Code:

#include <SoftwareSerial.h> Include the software serial library which enables us to use other pins as Tx and Rx pins. This saves us from plugging out the wires from pin0 and pin1 of board each time we upload our program. If you use D0 and D1 as Tz and Rx pins then you will have to unplug these pins each time you upload program to Arduino board.

#include <Servo.h>   include the servo motor library

#define servopin 10    connect servo motor on pin 10

#define DEBUG true     To display module messages on serail monitor

SoftwareSerial compin(6, 7);   define communication pin Tx and Rx

Servo serMtr;   declare Servo Motor Variable

serMtr.attach(servopin); attach servo motor to servo pin

  serMtr.write(maxPos); to tell board motor is attached it is set to max position

  serMtr.detach(); then detach the motor so that it can work according to void loop() function.

Serial.begin(9600); starting serial Monitor and set baud rate to 9600

compin.begin(9600); Starting module and set baud rate to 9600

sData(“AT+RST\r\n”, 2000, DEBUG);   Reset module

sData(“AT+CWMODE=1\r\n”, 1000, DEBUG);  Set the module in station mode

sData(“AT+CWJAP=\”Microcontrollerslab.com\”,\”itulahore786\”\r\n”,2000,DEBUG);   Connect to Wi-Fi Router. Replace Microcontrollerslab.com with your Wi-Fi Router name and itulahore786 with your Wi-Fi router password.

sData(“AT+CIFSR\r\n”, 1000, DEBUG);     Showing IP address on the serial monitor

sData(“AT+CIPMUX=1\r\n”, 1000, DEBUG);    Allow multiple connections

sData(“AT+CIPSERVER=1,80\r\n”, 1000, DEBUG);  Start the web server on port 80

sData is a function used to send the data to  module and check the response of Wi-Fi module.

void loop() In this function Wi-Fi module 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 move the Motor accordingly.


  • Wi-Fi network communication devices without wire can reduce the cost of wires.
  • Wi-Fi setup and configuration is easy than cabling process
  • It is completely safe and it will not interfere with any network
  • We can also connect internet via hot spots
  • We can connect internet wirelessly


  • Wi-Fi generates radiations which can harm the human health
  • We must disconnect the Wi-Fi connection whenever we are not using the server
  • There are some limits to transfer the data, we cant able to transfer the data for long distance.

3 thoughts on “Web Controlled Servo Motor using Arduino and esp8266”

Leave a Comment