In this project you’ll create a standalone web server with an ESP8266 that can toggle two LEDs using Arduino IDE. This ESP8266 Web Server is mobile responsive and it can be accessed with any device that as a browser in your local network.
For a more in-depth tutorial on how to create a web server, and explanation of the code, read this post ESP8266 Web Server Step-by-step
If you want to learn more about the ESP8266 module, first read my Getting Started Guide for the ESP8266 WiFi Module.
If you like the ESP and you want to do more projects you can read my eBook Home Automation Using ESP8266.
Let’s get started!
First, watch the video tutorial
Uploading the ESP8266 code
Having the ESP8266 add-on for the Arduino IDE installed (How to Install the ESP8266 Board in Arduino IDE), go to Tools and select “Generic ESP8266 Module”.
Copy the sketch below to your Arduino IDE. Replace the SSID and password with your own network credentials.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";After modifying the sketch upload it to your ESP8266 (If you can’t upload code to your ESP8266, read this troubleshooting guide).
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include <ESP8266WiFi.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";
// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /5/on") >= 0) {
Serial.println("GPIO 5 on");
output5State = "on";
digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /5/off") >= 0) {
Serial.println("GPIO 5 off");
output5State = "off";
digitalWrite(output5, LOW);
} else if (header.indexOf("GET /4/on") >= 0) {
Serial.println("GPIO 4 on");
output4State = "on";
digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
Serial.println("GPIO 4 off");
output4State = "off";
digitalWrite(output4, LOW);
}
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP8266 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 5
client.println("<p>GPIO 5 - State " + output5State + "</p>");
// If the output5State is off, it displays the ON button
if (output5State=="off") {
client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO 4
client.println("<p>GPIO 4 - State " + output4State + "</p>");
// If the output4State is off, it displays the ON button
if (output4State=="off") {
client.println("<p><a href=\"/4/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/4/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
Upload code to ESP8266-01
If you’re using an ESP8266-01, you need an FTDI programmer to upload the code. Wire the ESP8266 to the FTDI programmer as shown in the following schematic diagram.
ESP8266 IP Address
Open the Arduino serial monitor at a baud rate of 115200.
- If you’re using ESP8266-01, connect GPIO 0 to VCC and reset your board.
- If you’re using ESP8266-12E, just press the RESET button.
After a few seconds, the ESP8266 IP address should appear.
Parts Required
Here’s the hardware that you need to complete this project:
- ESP8266 – read Best ESP8266 Wi-Fi Development Boards
- 2x LED
- 2x 330 Ohm resistor (220 Ohm or other values also work)
- Breadboard
- Jumper wires
If you’re using an ESP8266-01, you need an FTDI programmer to upload code.
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
Final Circuit
Follow the next schematic diagram to build the circuit you’ll control. One LED connected to GPIO 4(D2) and another connected to GPIO 5(D1).
If you’re using the ESP8266-01, use the following schematic diagram as a reference, but you need change the GPIOs assignment in the code (to GPIO 2 and GPIO 0).
Demonstration
For the final demonstration open any browser from a device that is connected to the same router that your ESP8266 is. Then, type the ESP8266 IP address and click Enter!
Now , press the buttons in your web server to control the ESP8266 GPIOs.
Wrapping Up
For an in-depth explanation on how the web server code works, please refer to this tutorial: ESP8266 Web Server Step-by-step
If you like the ESP8266 make sure you check our most popular projects:
- Home Automation Using ESP8266 (eBook)
- ESP8266 Web Server Tutorial Step-by-step
- ESP8266 Wi-Fi Button – DIY Amazon Dash Button Clone
- ESP8266 Daily Task – Publish Temperature Readings to ThingSpeak
- ESP8266 Weather Forecaster
- Nextion Display with ESP8266 – Touchscreen User Interface for Node-RED
Thanks for reading.
P.S. If you got stuck throughout this tutorial make sure you read “ESP8266 Troubleshooting Guide“
Hi Rui, I am having some problems with the code and getting this error:-
ESP8266_Web_Server.ino: In function ‘void setup()’:
ESP8266_Web_Server:26: error: ‘gpio0_pin’ was not declared in this scope
ESP8266_Web_Server:28: error: ‘gpio2_pin’ was not declared in this scope
ESP8266_Web_Server.ino: In lambda function:
ESP8266_Web_Server:56: error: ‘gpio0_pin’ is not captured
ESP8266_Web_Server.ino: In lambda function:
ESP8266_Web_Server:61: error: ‘gpio0_pin’ is not captured
ESP8266_Web_Server.ino: In lambda function:
ESP8266_Web_Server:66: error: ‘gpio2_pin’ is not captured
ESP8266_Web_Server.ino: In lambda function:
ESP8266_Web_Server:71: error: ‘gpio2_pin’ is not captured
‘gpio0_pin’ was not declared in this scope
Regards
Geoff
Hi Geoff,
I’ve fixed the problem and thank you for pointing that out.
Regards,
Rui
Hi Rui,
Great work on writting this sketch. I like how it avoids the use of any third-party websites like some do, and it’s also easy to open a port on my router so I can access the ESP-8266 webserver from any location using the internet. However I was not able to get your sketch to compile on any version of Arduino running on Windows or Linux. Errors like “gpio0_pin was not declared in this scope” were coming up so I updated it just a little and now it compiles perfectly for me (I don’t know if anyone else is having trouble compiling?). and after I uploaded the sketch to the ESP-8266 v1 the Webserver and both sockets work perfectly. I’m thinking of making a video showing it working. And of course i will mention it is Written By Rui Santos at RandomNerdTutorials.com After all it is your sketch! Here is the code in case anyone is interested in it. Thanks Rui for the great work and a great website where people can learn about electronics.
David Connolly Feb. 09, 2016
Volthaus Electronics Laboratory
================================================================
[code]
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
Code Update Feb. 12, 2016 David Connolly
*********/
#include
#include
#include
#include
MDNSResponder mdns;
// Replace with your network credentials
const char* ssid = “SSID”;
const char* password = “Your_Password”;
int gpio0Pin = 0;
int gpio2Pin = 2;
ESP8266WebServer server(80);
String webPage = “”;
void setup(void){
webPage += “ESP8266 Web ServerSocket #1 ON OFF“;
webPage += “Socket #2 ON OFF“;
// preparing GPIOs
pinMode(gpio0Pin, OUTPUT);
digitalWrite(gpio0Pin, LOW);
pinMode(gpio2Pin, OUTPUT);
digitalWrite(gpio2Pin, LOW);
delay(1000);
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println(“”);
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);
}
Serial.println(“”);
Serial.print(“Connected to “);
Serial.println(ssid);
Serial.print(“IP address: “);
Serial.println(WiFi.localIP());
if (mdns.begin(“esp8266”, WiFi.localIP())) {
Serial.println(“MDNS responder started”);
}
server.on(“/”, [](){
server.send(200, “text/html”, webPage);
});
server.on(“/socket1On”, [](){
server.send(200, “text/html”, webPage);
digitalWrite(gpio0Pin, HIGH);
delay(1000);
});
server.on(“/socket1Off”, [](){
server.send(200, “text/html”, webPage);
digitalWrite(gpio0Pin, LOW);
delay(1000);
});
server.on(“/socket2On”, [](){
server.send(200, “text/html”, webPage);
digitalWrite(gpio2Pin, HIGH);
delay(1000);
});
server.on(“/socket2Off”, [](){
server.send(200, “text/html”, webPage);
digitalWrite(gpio2Pin, LOW);
delay(1000);
});
server.begin();
Serial.println(“HTTP server started”);
}
void loop(void){
server.handleClient();
}
Thank you David,
Yes, I had a problem in my code! Luckily everything is fixed now!
hai bro i have problem in my library files on Arduino
will you please able to send me the libraries you used … [email protected]
Thank you very much
You’re welcome Kai!
Rui
Why does the energy go when the work program
help!
Hi Rui I have uploaded the code on the esp8266 but when i open the serial monitor nothing happens of course after remove GPIO-0 from ground to Vcc. for the reset part I just removed power from it.
Make sure you have the correct baud rate to see the information appearing in your serial monitor..
Perhaps I’m temporarely blind, but where is “the sketch below”?
best regards
Andreas
Hello Andreas. The sketch below refers to the program code below that begins with “/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/”
A sketch is what a Arduino program is called. I hope this helps. Best of luck to you in the future with your electronic projects!
Hi David,
I think he means that the sketch for some reason isn’t loading on his browser.
Here’s the link for the code: https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/master/Projects/ESP8266_Web_Server_Arduino_IDE.ino
Here’s the sketch: https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/master/Projects/ESP8266_Web_Server_Arduino_IDE.ino
That sketch is a beautiful piece of work!
Hello, how I can do to make the text and icons look bigger on an Android phone. As a page version for phone or compatible with the desktop and the phone? Is it possible with the libraries used in this sketch?
Hi Rui, although I am away from my normal work area, I finally have a chance to work again on 8266 projects. It’s been a while, and I’m using my laptop instead of the desktop I normally use. Knowing you’re inundated with communications, I’ll refresh the past a bit: I was having troubles with several ESP-12 modules. One would not flash, the other was somewhat “cranky”. Today I tried to communicate with either with strange results. I downloaded Esplorer to the laptop, and proceeded. The one I tried to flash would respond to Esplorer only to say a connection was made and the OS could not be identified because the proper answer was not received. That is exactly where I had left it several months ago. So I had one with nodeMcu firmware on it, and decided to experiment with it just to connect to the router at this location using a previous script I had loaded as an init.lua script months ago but the ssid, and password needed updated for this router. I changed those in the script and tried to upload it. In the process, I got numerous errors, unrelated to the changes I’d made. Thinking that there may have been updates to Esplorer, or java I then downloaded the latest of both. Now Esplorer won’t even open. When I try to execute the .jar file, nothing happens, except for perhaps a flicker on the screen.
I am at a complete loss as to what is going on here, I won’t be able to get back to the desktop for another several weeks to try on that machine. The laptop is running Win7 and the desktop Win10. If you have any insight on this mess I’d sure like to hear it.
Thanks for your great work!
how to install the required libraries for this sketch.
i get the following error after having the esp8266 board installed in the boards manager:
fatal error: ESP8266WiFi.h: No such file or directory
#include
compilation terminated.
exit status 1
Error compiling.
You have to install the ESP libraries for the Arduino IDE or simply restart your Arduino IDE
can you help me, I didn’t get my IP, and I got this on my serial monitor
ets Jan 8 2013,rst cause:4, boot mode:(3,6)
wdt reset
load 0x4010f000, len 1264, room 16
tail 0
chksum 0x42
csum 0x42
~ld
Sounds like you’re having power issues…
I did this project back when you used nodeMcu/lua. I’m wondering why you went to the arduino IDE, and I’m wondering if you have as many problems using Esplorer as I do……..
Hi Rui, I did your similar project a few months back using nodeMcu/lua with success. Now I’ve tried to do this one using the Arduino IDE and run into several issues. I first tried to upload the “blink” to verify that things would go well. Instead I find that the blue LED on the ESP07 I’m using turns on constantly. The led on the CH340 converter I’m using also goes on constantly. If my analogy is correct that would indicate a high placed on the TX lead of the module. I don’t see any “blink activity on any of the GPIO pins. This causes many questions in my mind. Since the module was originally flashed with nodeMcu, I am assuming that was removed, since we place GPIO0 at ground as if to “flash”. Is that correct? Second question is; Are the GPIO pins labeled straight or are they mapped like nodeMcu. And of course last; Why does “blink” not work? I am at this point because I wanted to make the presentation on the page a bit more elaborate, like colors for the buttons, add some buttons and spacing, but trying to upload the HTML code within a string would not work. I had it working on a module in the past, but something happened since then and I get interpreter errors when trying to upload the lua program via ESPlorer. Some seem to like the Arduino IDE better, and I thought I’d try it. Unfortunately without much luck so far. Can you offer any help?
To add to the last comment…
So, I’ve set up IDE Ver. 1.6.8 set the board to generic 8266. Nothing would upload, went to a tutorial that had me set gpio 0 low (as if to flash,(question on that later), and upload “blink” with pin modified to 0. It seemed to upload, but the only thing that happened was the blue led on the module that indicates serial traffic came on solid. I checked all GPIO’s for voltage changes and saw none. Where/what should blink? Do I have to remove nodeMcu from the module? Do I need to configure the 8266 with a bootloader, similar to the arduino? Do you always have to go into “flash” mode to upload? and next Are the GPIO pin numbers straight forward or mapped like nodeMcu? This gives credence to my fears of “changing horses in the middle of the stream”. I’d like to work within the Arduino ide, but I know less now than I did before 😆 😕
May I continue to present my experiences in hopes that someone can provide explanations to the bazaar results I’ve experienced, and perhaps lend a bit of understanding to anyone who has had similar experiences. Forgive me if I get a bit more in depth but I want to present as much information as I can with my limited experience with this module. So…..
After further investigation I found that the blue LED refered to above was actually NOT in a total “on” state, but instead was actually sending continuous garble from the module. At this point I decided to reflash it with nodeMcu in an effort to restore operation. I configured it to flash mode, opened the nodeMcu flasher, and it happily sent blocks of data with the obligatory “acks” returned, to the point of a successful completion indication. Then opened Esplorer set for 9600 baud (native for nodeMcu) and connection was never established. It just continuously retried. Next I set the baud rate at 74800 and reset again. This time information was returned relating to “room, tail”, etc (which I have yet to learn the meaning of). But still a non-working system. I then set the baud at 115200, and got a string of garble, but at the end the words “mem test failed!” Next I attempted to see if I had issues with breadboard continuity; a suspicion I had from earlier attempts to flash these modules, by inserting another module in the same location as the one being described here. It worked fine. (I did not try to use it with Arduino IDE as I didn’t want to brick another one)
Next in an effort to recover this thing from “brick” mode, I attempted to use yet another flasher at my disposal; Electrodragon’s At command flasher; and IT FLASHED..successfully…with AT commands available through Esplorer.
So I still have the question What is happening within when this thing is flashed with the various firmwares? I will attempt to upload other example sketches for varification, then my next step will be to now try to flash nodeMcu again with the impression that something, a vector table perhaps, gets overwritten during one of the processes. Any insight into this mystery (to me) would be greatly appreciated.
Can I use USB to TTL converter for program ESP8266.On Tx line use
(1k+2k) resistor.
hi, I have successfully uploaded the Arduino code. Now my problem is that my arduino serial monitor showing my IP ADDRESS is 192.168.1.35.
But when I enter the IP ADDRESS in browser, it’s saying it can’t connect to the website.
plsss help me
You need to be connected to the same network as your ESP8266, please read this guide https://randomnerdtutorials.com/esp8266-troubleshooting-guide/
Hi Rui,
thanks for your good job :o)
It works great at boards using E12 modules like NodeMCU and WeMos D1. I have also an E13 mounted board (ESPDuino) and it does not work. There is no connetion to the network. The same board works fine with your humidity sketch. Any ideas why E13 isn’t supported?
Regards
Reiner
Hi Reiner,
It should work, but I’ve never used the ESPDuino…
HI RUI just made the arduino esp8266 webserver works well thanks
Thanks Jeff!
Fala Rui, tudo bem?
Seu trabalho é muito bom, sempre que posso acompanho, parabéns!
Gostaria de trabalhar com o ESP no modo AP (Access Point). Gostaria de saber quais alterações seriam necessárias no programa para que isso fosse possível.
Abraço! Obrigado!
Bom dia,
É possível, mas eu nao tenho nenhum tutorial neste momento que explique isso.
Obrigado por perguntar,
Rui
Hi Rui, I’ve contacted you several times about this project and some issues you’ve helped me with. I have been going back and forth between the Arduino IDE and NodeMCU on different projects, for several reasons. I find that if I go one way and something doesn’t work, and I try the other I find a solution. For example, (I think I mentioned it to you before) using this sketch with the Arduino IDE I expanded on it to create an under cabinet puck light controller for 5 lights. I worked on another project using nodeMCU/lua, and found things had changed so much I was lost. I then came back to this project and Arduino IDE to get something going and in the process updated the IDE to 1.6.8, then 1.8.0. I could not get this sketch to work. Some of the other symptom were that some of the libraries included were bolded (ESP8266WebServer.h)text and others ( ESP8266WiFi and WiFiClient) faded, as if not available. I don’t know what that indicates or how to correct it. I also found that when I uploaded this to the 8266 GPIO0 went permanently low. Needless to say the sketch wouldn’t run. I could overwrite the sketch with a simple example like blink and it was ok.
I feel like I’m going backwards and not forward. Can you offer any help?
I’ve never ran into that problem. Can you start from a fresh Arduino IDE installation with the 1.6.8 version and re-install the ESP8266 add-on?
It’s very likely to solve your problem…
Thanks for your patience
Rui
Hi Rui, The mystery is solved. I posted the issue on the Everything ESP8266
Hi Rui, if I use an esp8266 esp-07 insted, which has more gpios, can I make some changes to the
Hi Rui, if I use an esp8266 esp-07,which has more gpios, can I make some minor adjustments and put 3 instead of 2, like your programme has?
Here’s the pin assignment Christos: https://rntlab.com/wp-content/uploads/2016/06/esp8266-12E-pinout.png
Hi Rui, the mystery is solved. After posing the issue on the “Everything 8266” forum I very quickly got a response that the issue was not the version of the IDE but the version of the board manager (within the IDE) I installed the latest for the 8266 when I updated to IDE 1.8.0, and had forgotten about that part. I rolled back the 8266 board manager to 2.0 and everything worked fine. Just thought you’d like to pass that on to any others that have issues. Cheers
How can i access from different router.please send suggestion
You could use port forwarding for example which is not very secure
hi,
how to change the SSID and Password when i want to connect to another SSID without re-uploading this sketch
You can’t. you need to re-upload the sketch to your ESP
hello rui.
how can i convert this code from client to an AP. and that will be a router free connection to access in ESP.
I don’t have an example on that subject.
Thanks for reply . i meant by the previous question is – i want to make an AP which will not to be connected with any router or an existing n/w.
i want the esp as an AP.
u have already an example using lua “https://randomnerdtutorials.com/esp8266-web-server/ “,
why not with arduino!!
Nice job you did here with the ESP8266.
I only have 1 question and that is: powersupply is 3.3 volt but the GPI0 ports give 2.2 max when (for example) Socket#1 = on. How is this possible?
Wondering if it normal or …
Thanks anyway for the nice example.
Hi, how can i setting static IP in this project ?
I don’t have any tutorials on that exact subject.
But just search for “set static ip address esp8266 arduino”
Nice work…. But i have an error after uploading…
warning: espcomm_sync failed
error: espcomm_open failed
error: espcomm_upload_mem failed
error: espcomm_upload_mem failed
Thanks!
That means that your ESP is not in flashing mode or is not establishing a connection with your computer.
Please take a look at this guide: https://randomnerdtutorials.com/esp8266-troubleshooting-guide/
nice..
Thanks!
Rui
Hi Rui, thanks for your tutorial! 🙂 I miss a status view for any socket, is the Socket 1 ON or OFF.
webPage += “Status Socket1:ON”;
Thanks for help :-*
You can save the status in a String variable and display it in your web page
Rui, I’ve been playing with this for over a year. I modified a project of yours a while back to read a dht21 sensor and post to my phone and it worked great. It used the ESP82266 library and the WiFiServer library. This one is using the WiFiClient, ESP8266WebServer, and ESP8266mDNS libraries. It worked as is but I am a fan of setting a static ip and could do so with the older sketch using:
WiFi.begin(ssid, password);
// NETWORK: Static IP details…
WiFi.mode(WIFI_STA); // Set module to station mode.\
// config static IP
IPAddress ip(192, 168, 1, 199); // where xx is the desired IP Address
IPAddress gateway(192, 168, 1, 1); // set gateway to match your network
IPAddress subnet(255, 255, 255, 0); // set subnet mask to match your network
WiFi.config(ip, gateway, subnet);
This worked fine and connected to the router almost immediately.
But when I add those lines to this sketch to implement station mode with a static IP, it never connects to the router. Any thoughts on this? Thanks for any guidance.
Hello Rui,
great work, this is exactly what i am looking for.
It will help me to get my project done.
I have one question.
Could you explain me the following code?
Why do you do that?
String currentLine = “”; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client’s connected
if (client.available()) { // if there’s bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == ‘\n’) { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that’s the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what’s coming, then a blank line:
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-type:text/html”);
client.println(“Connection: close”);
client.println();
Thank you very much!
Hi David.
That piece of code basically reads the http request from the client (your browser).
We are always saving the incoming data in the header variable with:
char c = client.read()
header += c;
The if statements that follow are used to find the end of the http request.
You know that the http request has ended when you receive two newlines in a row.
I hope this helps.
Regards,
Sara
Hi, how are you?
you can add to be able to see the temperature with the sensor DS18B20, and be able to see the current time with the sensor ds3132. please … I hope you can help me.
thanks friend.
Yes Fernando, it’s definitely possible to use the DS18B20 and that RTC, but I don’t have any tutorials on that exact subject.
Regards,
Rui
Hello Rui Santos, I realized this project of Arduino Mega + WiFi R3 ATmega2560 + ESP8266 (32Mb memory), USB-TTL CH340G. LEDs do not respond. The DIP switch is: OFF OFF OFF OFF ON ON OFF OFF. The web server is working. I tried other combinations of the DIP switch – it does not work. What could be the problem?
Hi Nikolay, I’m not sure, because I’ve never tried that project with that exact setup.
Great article!! Thank you.
Thanks 🙂
i couldn’t get the IP address of ESP8266 on pressing the RESET on esp8266.
kindly advice.
thx
Hi Donn,
Make sure you’ve added your SSID and password. Also double-check that the credentials are correct and that your ESP is fairly close to your router, so it can establish a Wi-Fi connection.
Hi, can you make a tutorial how to create this webpage on antoher AP created by ESP8266 ?
Hi Alessandro.
The following tutorial shows how to create access point for esp32. It should be compatible with the esp8266:
https://randomnerdtutorials.com/esp32-access-point-ap-web-server/
I hope this helps,
Regards,
Sara 🙂
Dear,
I’m trying to make a controller for my garage door, based on your tutorial. My sketch is working when I only use the software buttons on the website.
I also need local hardware buttons to open and close the garage door, but when I include the in the sketch, everything blocks. Please find my actual sketch below. How do I have to include the hardware buttons ?
Many thanks for your help.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Load Wi-Fi library
#include
// Replace with your network credentials
const char* ssid = “xxxxxxxx”;
const char* password = “yyyyyyyy”;
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output5State = “off”;
String output4State = “off”;
// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;
int Ocm =0;// push button open garage door
int Ccm =0;// push button close garage door
void setup() {
Serial.begin(115200);
// Initialize the output variables as outputs
pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);
pinMode(3, INPUT); // Open Command from pushbutton
pinMode(2, INPUT); // Close Command from pushbutton
// Set outputs to LOW
digitalWrite(output5, LOW);
digitalWrite(output4, LOW);
// Connect to Wi-Fi network with SSID and password
Serial.print(“Connecting to “);
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);
}
// Print local IP address and start web server
Serial.println(“”);
Serial.println(“WiFi connected.”);
Serial.println(“IP address: “);
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println(“New Client.”); // print a message out in the serial port
String currentLine = “”; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client’s connected
if (client.available()) { // if there’s bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == ‘\n’) { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that’s the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what’s coming, then a blank line:
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-type:text/html”);
client.println(“Connection: close”);
client.println();
// turns the GPIOs on and off
// Serial.println (digitalRead(3));
// Serial.println (digitalRead(2));
Ocm= digitalRead(3);
Ccm= digitalRead(2);
if (header.indexOf(“GET /5/on”) >= 0 || Ocm==1 ) {
Serial.println(“GPIO 5 on”);
output5State = “openen”;
digitalWrite(output4, LOW);
digitalWrite(output5, HIGH);
}
else if (header.indexOf(“GET /4/on”) >= 0 || Ccm ==1) {
// Serial.println(“GPIO 4 on”);
// output4State = “on”;
digitalWrite(output4, HIGH);
Serial.println(“GPIO 5 off”);
output5State = “sluiten”;
digitalWrite(output5, LOW);
digitalWrite(output4, HIGH);
}
// Display the HTML web page
client.println(“”);
client.println(“”);
client.println(“”);
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println(“html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}”);
client.println(“.button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;”);
client.println(“text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}”);
client.println(“.button2 {background-color: #77878A;}”);
// Web Page Heading
client.println(“POORT”);
// Display current state, and ON/OFF buttons for GPIO 5
client.println(“GPIO 5 – State ” + output5State + “”);
// If the output5State is off, it displays the ON button
// if (output5State==”off”) {
// client.println(“ON“);
//} else {
// client.println(“OFF“);
//}
client.println(“OPEN“);
// Display current state, and ON/OFF buttons for GPIO 4
// client.println(“GPIO 4 – State ” + output4State + “”);
// If the output4State is off, it displays the ON button
// if (output4State==”off”) {
// client.println(“ON“);
//} else {
// client.println(“OFF“);
// }
client.println(“TOE“);
client.println(“”);
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = “”;
}
} else if (c != ‘\r’) { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = “”;
// Close the connection
client.stop();
Serial.println(“Client disconnected.”);
Serial.println(“”);
}
}
Hi.
I haven’t tried that specific project.
But I suggest that you use interrupts to detect when the hardware buttons were pressed and change its state on the interrupt handling function.
As I said, I haven’t tried it. It’s just a suggestion that I think would work.
I hope it helps.
Regards,
Sara 🙂
Hi All,
I am getting data in chunks with 3 second from my device. I need to send that data to my web server. Example:
12 KB… then 1 sec wait.. then 12 KB data.. It’s sending 2 separate files in this request, instead of maintaining connection and having 24 KB of file on web server.
I am using httpclient for this and tried passing content-length as well. But doesn’t work.
Please guide / help / support.
Hi Prateek.
Unfortunately, I’ve never tried what you’re describing. So I don’t know what might be wrong.
Sorry that I can’t help.
Regards,
Sara 🙂
great tutorial. worked from scratch in less than 30mins for noob. thumbs up. i tried 8266 for several days and hazzled with missing characters in IDE and tutorials. BUT NOT here!
That’s great!
Thanks you very much. Mr. Rui Santosand Mrs. Sara Santos.
Good code for ESP8266, it’s easily to understand and learn.
Thank you! 🙂
YOU ARE THE BEST RUI !!! GREAT WORK!
Thanks for your support.
Hi, I am trying to show water sensor values on HTML page , can you guide me how to modify this according to my requirement.
Hi.
I recommend following the next tutorial and replace the DHT readings with the readings from your sensor:
https://randomnerdtutorials.com/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide/
I hope this helps.
Regards,
Sara
Hi Sara,
Could you give a hint on how to combining the two in to one sketch?
Thanks in advance,
Gerard
I couldnot get my ip from serial moniter .It keep on showing dots(……) and I used baudrate 115200.Will be gratefull for your reply
Hi Ali.
That usually happens when people forget to insert their network credentials or don’t insert the credentials properly.
Please make sure that you’ve inserted your network credentials and double-check that they’re correct.
Also, make sure that the ESP is relatively close to your router so that it is able to catch Wi-Fi signal.
Regards,
Sara
hi all, any example for esp to esp websocket?
Hi.
At the moment, we don’t have any example about that.
Regards,
Sara
Sara
thanks for sharing this nice project. I have few questions:
1. There is a way to secure the access to the device with login?
2. There is a way to access the device with URL rather than IP address?
PS: I managed to modify the HTML code so it will be friendly and dynamically adjust the application size on the connected devices screen sizes, iPad, iPhone with different sizes. Also considering the phone rotation. If interested I can share the code (where should I place it?).
David
Hi David.
I recommend that you take a look at these two tutorials:
https://randomnerdtutorials.com/esp32-esp8266-web-server-http-authentication/
https://randomnerdtutorials.com/control-esp32-esp8266-gpios-from-anywhere/
I hope this helps.
Regards,
Sara
Hai Rui
In the sketch, I have added Serial.println(“”); but still there is garbage before it prints …. on the serial monitor. Can you tell the command?
Hi.
Getting some garbage at first, is normal with the ESP8266.
After that initial garbage, it should print adequately to the serial montior.
Also, make sure that you have the right baud rate selected.
Regards,
Sara
Thank you Sara for your prompt reply.
Of course! after the garbage useful data is coming on serial port.
The garbage comes whenever the Reset button is pressed followed by useful data.
I have set the correct baud rate and all….
The garbage doesn’t appear after programming the IC through USB port in which it finally says
hard reset using CTS. Please clarify
Regards
Sorry not CTS, it is RTS
Hi.
That’s the normal behavior.
After uploading code you get that message, and you should press the reset button to start running the new code.
Everything seems to be working as expected.
Regards,
Sara
Hello Sara!
Thank you for your prompt reply
Regards
Parabéns Sara e Rui Santos! funcionou muito bem. Montei com esp8266 NODEMCU 12E.
Carlos Bruni
Bahia Brasil
Hello everyone, I want to install encryption algorithm on arduino and esp8266, what should I pay attention to.