Controlling Arduino GPIO pins from Webbrowser

ESP8266 is a serial wifi module which is capable of sending and receiving data into the Web. In this post we will discuss how to control your Arduino GPIO pins from a webbrowser.

esp82661_gpio

ESP8266 is connected to Arduino as shown below. 3 LEDs are also connected to the pins 2,3 and 4. Software serial communication is established to ESP8266.

Upload the below code to your Arduino after connecting the hardware as shown above.

#include <SoftwareSerial.h>
 
#define DEBUG true
 
SoftwareSerial esp8266(10,11); // make RX Arduino line is pin 10, make TX Arduino line is pin 11.
 // This means that you need to connect the TX line from the esp to the Arduino's pin 2
 // and the RX line from the esp to the Arduino's pin 3
void setup()
{
 Serial.begin(9600);
 esp8266.begin(9600); // your esp's baud rate might be different
 
 pinMode(2,OUTPUT);
 digitalWrite(2,LOW);
 
 pinMode(3,OUTPUT);
 digitalWrite(3,LOW);
 
 pinMode(4,OUTPUT);
 digitalWrite(4,LOW);
 
 sendData("AT+RST\r\n",2000,DEBUG); // reset module
 sendData("AT+CWMODE=2\r\n",1000,DEBUG); // configure as access point
 sendData("AT+CIFSR\r\n",1000,DEBUG); // get ip address
 sendData("AT+CIPMUX=1\r\n",1000,DEBUG); // configure for multiple connections
 sendData("AT+CIPSERVER=1,80\r\n",1000,DEBUG); // turn on server on port 80
}
 
void loop()
{
 if(esp8266.available()) // check if the esp is sending a message 
 {
 
 
 if(esp8266.find("+IPD,"))
 {
 Serial.println("listening");
 delay(1000); // wait for the serial buffer to fill up (read all the serial data)
 // get the connection id so that we can then disconnect
 int connectionId = esp8266.read()-48; // subtract 48 because the read() function returns 
 // the ASCII decimal value and 0 (the first decimal number) starts at 48
 
 esp8266.find("pin="); // advance cursor to "pin="
 
 int pinNumber = (esp8266.read()-48)*10; // get first number i.e. if the pin 13 then the 1st number is 1, then multiply to get 10
 pinNumber += (esp8266.read()-48); // get second number, i.e. if the pin number is 13 then the 2nd number is 3, then add to the first number
 
 digitalWrite(pinNumber, !digitalRead(pinNumber)); // toggle pin 
 
 // make close command
 String closeCommand = "AT+CIPCLOSE="; 
 closeCommand+=connectionId; // append connection id
 closeCommand+="\r\n";
 
 sendData(closeCommand,1000,DEBUG); // close connection
 }
 }
}
 
/*
* Name: sendData
* Description: Function used to send data to ESP8266.
* Params: command - the data/command to send; timeout - the time to wait for a response; debug - print to Serial window?(true = yes, false = no)
* Returns: The response from the esp8266 (if there is a reponse)
*/
String sendData(String command, const int timeout, boolean debug)
{
 String response = "";
 
 esp8266.print(command); // send the read character to the esp8266
 
 long int time = millis();
 
 while( (time+timeout) > millis())
 {
 while(esp8266.available())
 {
 
 // The esp has data so display its output to the serial window 
 char c = esp8266.read(); // read the next character.
 response+=c;
 } 
 }
 
 if(debug)
 {
 Serial.print(response);
 }
 
 return response;
}

Download the html page from the below link. The script uses jquery for detecting button clicks.

https://github.com/elementzonline/Arduino-Sample-Codes/tree/master/IOT_Kit/iot_control_pins

Selection_001

Open HTML script and click the button and see the GPIO pins toggle on each click.

Note: System controlling the Webbrowser should be connected to the ESP8266 through wifi before starting the HTML page.

Advertisements

5 thoughts on “Controlling Arduino GPIO pins from Webbrowser

  1. Hi , I am unable to obtain an output in the serial monitor after uploading successfully. Baud rate has been set to 9600 and Ive tried carriage return , no line ending. and others just to be sure. The three individual LEDs connected to pin 3,4 and 5 are off. L LED on Arduino is on. Embedded TX RX LED on Arduino are off. Embedded Red LED on Wifi Module is on.

  2. Hii, what if i want to check button status when i open the webpage. Can we directly recieve reponse from arduino uno

  3. “SoftwareSerial esp8266(10,11); // make RX Arduino line is pin 10, make TX Arduino line is pin 11.
    // This means that you need to connect the TX line from the esp to the Arduino’s pin 2
    // and the RX line from the esp to the Arduino’s pin 3”

    I have some Following Questions:
    1. Do i need to connect TX pin of ESP8266 to Arduino’s PIN 2 or PIN 10 and RX pin of ESP8266 to Arduino’s PIN 11 or PIN 3?
    2. I am using Arduino MINI(Clone With CH340G Converter), should i follow the same diagram also for my Arduino?
    3. Do i need to use a voltage divider if i connect my ESP8266 to my Arduino Mini(Clone)?
    I have successfully connected my ESP8266 with my Arduino Mini Clone with TR, RX pins and get results from several AT commands. My connection was
    TX of ESP to TX of Arduino MINI
    RX of ESP to RX Of Arduino MINI.
    CH_PD and VCC to 2XAA Size Battery.
    GND to GND
    RST to Blank
    GPIO0 and GPIO2 Blank
    Arduino Code Was Bare Minimum.

    Do i really need to go for software serial to control arduino GPIO pins or i can control it from arduino’s TX RX pins also?

    Thanks for Reading.Waiting for Respons.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s