Learn how to create a webpage that can be used to control a servo motor with JQUERY and an Arduino UNO.

In this project, we are going to control a servo motor through a webpage. The webpage will be created using an ESP8266 module, and by moving the slider on the webpage, the servo motor will move.

Circuit Diagram

First, connect the ESP8266 with Arduino. We have used an adapter to connect the ESP8266 with the Arduino, which will make connection much easier. The adapter has a 5 to 3.3V regulator, and you don’t need to connect any external resistors with it.

  • Connect the GND of adapter to the GND of Arduino
  • Connect the VCC of adapter to the 5V of Arduino
  • Connect the RX from the adapter to pin 2 of Arduino
  • Connect the TX pin from the adapter to pin 3 of Arduino

After that, connect the servo motor with the Arduino. Make the connections of the servo motor with the Arduino as follows:

  • Black wire of servo motor to the GND pin of Arduino
  • Red wire of servo motor to the 5V pin of Arduino
  • Yellow wire of servo motor to pin 8 of Arduino
image1.png

Creating a Webpage Using HTML

To control the servo motor through the webpage, we will have to make a webpage using HTML. The HTML code we created for our project can be downloaded from the end of this article. If you want to rename the file, change the filename, but make sure that it has “.html” at the end.

After that, download the JQUERY file, which is also given at the end of the article, and place this file in the same folder as the HTML file. After that, open the HTML and the webpage will look like this:

Arduino servo control.jpg

Change the Wi-Fi name and password in the Arduino code with your Wi-Fi name and password and upload the code. Open the serial monitor, and it will show you the IP address as shown in the below figure:

image2.png

Type this IP address in the space given in the webpage, and when you move the slider, the servo motor will move.

Project Code

    #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=\"Tenda_31BC98\",\"barcelona\"\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;
}

Project Code Explanation

First of all, include the libraries for the software serial and for the servo. The software serial library will help us use the TX and RX communication on other Arduino pins. The servo library will help us move the servo easily. After that, we defined the pins where we have connected the RX and TX from the ESP8266, and then we defined the pin where we attached the servo motor.

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

In the setup function, we tell the Arduino which pin we have connected the servo motor to and we move the motor to the maximum position. Then we set the baud rate for the serial communication and the ESP8266 at 9600. Set the ESP8266’s baud rate according to your ESP8266’s baud rate. Your ESP8266 might 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 your Wi-Fi network and will set the webserver at the IP address and port that it will show in the serial monitor after uploading the code.

esp8266Data("AT+RST\r\n", 2000, DEBUG); //reset module
 esp8266Data("AT+CWMODE=1\r\n", 1000, DEBUG); //set station mode
 esp8266Data("AT+CWJAP=\"Tenda_31BC98\",\"barcelona\"\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);

The Arduino will see that if the data is available or not. If the slider on the webpage is moved, the ESP8266 will send the data to the Arduino according to the slider movement. The Arduino will move the servo motor according to 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 will send the commands to the ESP8266 and will print the response of the ESP8266 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;
 }
}

Muhammad Aqib
I am an embedded programmer with the expertise in Arduino, Raspberry pi, ESP8266, IOT and OpenCV.


Maker Pro Logo
Continue to site
Quote of the day

-