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.

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

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.