This is a tutorial on how to send data from a webpage to your ESP8266 and Arduino to be able to toggle any digital pins. You can find the code below the video.
Arduino Code/Sketch to Receive Input From Webpage and Control LEDs
Upload the code below to your Arduino. As it is, you can control pins 11, 12, and 13. If you would like to control more pins simply add the initial pinMode and digitalWrite lines for that pin.
Although unnecessary, you may open the Arduino’s serial window to monitor what is happening on the Arduino side of things.
#include <SoftwareSerial.h>
#define DEBUG true
SoftwareSerial esp8266(2,3); // make RX Arduino line is pin 2, make TX Arduino line is pin 3.
// 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(11,OUTPUT);
digitalWrite(11,LOW);
pinMode(12,OUTPUT);
digitalWrite(12,LOW);
pinMode(13,OUTPUT);
digitalWrite(13,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,"))
{
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;
}
HTML Code Used to Send Data to The ESP8266-Arduino Circuit
Copy the code below to Notepad or any other text editor.
To save the file as an HTML file using Notepad, go to File->Save As then in “Save as Type” select “All Files”, the file name can be anything you wish but make sure you put “.html” at the end. For example if you would like to name your file myesp8266control, then your file name will have to be myesp8266control.html
<html>
<head>
<title>ESP8266 LED Control</title>
</head>
<body>
<!-- in the <button> tags below the ID attribute is the value sent to the arduino -->
<button id="11" class="led">Toggle Pin 11</button> <!-- button for pin 11 -->
<button id="12" class="led">Toggle Pin 12</button> <!-- button for pin 12 -->
<button id="13" class="led">Toggle Pin 13</button> <!-- button for pin 13 -->
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".led").click(function(){
var p = $(this).attr('id'); // get id value (i.e. pin13, pin12, or pin11)
// send HTTP GET request to the IP address with the parameter "pin" and value "p", then execute the function
$.get("http://192.168.4.1:80/", {pin:p}); // execute get request
});
});
</script>
</body>
</html>
Obtaining JQuery
The HTML code above uses the Javascript library JQuery, so we need to obtain that. To do so, go to this link. Now right click and “Save As” in the same directory where your HTML from the code above was created. The name for the jquery library file should be jquery.min since that is how we link to it from the HTML code above:
<script src="jquery.min.js"></script>
Now open the webpage using your web browser, the following three buttons should appear:
Arduino Code Explanation
For those interested, here is how the Arduino Sketch works:
Whenever you click on a button in the HTML page a GET request is sent to the ESP8266
+IPD,0,345:GET /?pin=13 HTTP/1.1 Host: 192.168.4.1 Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 User-Agent:Moila/.0(inow N 61;WO64 AplWeKi/57.6(KTM, ik Gco)Chom/3.0211.5 afri53.3 Acep-Ecoin: zp,delae,sdh Acep-Lngag: nUSenq=.8
- To know when request is in progress, the Arduino looks for the string “+IPD,” in the Serial buffer using Serial.find
- The code then reads the next character (the connection id, 0 in the example request above). The connection ID is needed to know which connection to close (different simultaneous requests have a different ID).
- Next we get the pin number by looking for the string “?pin=” in the serial buffer, once again using Serial.find
- Now that we have the pin number we know which pin to toggle
That’s it for this tutorial, I hope you find it useful. Don’t forget to subscribe to the YouTube channel and like the facebook page to support this website, thanks.