Oops! One of Our Servers Is Acting Up Please Try Again in a Minute or Two Gaia Online

This tutorial is a step-by-pace guide that shows how to build a standalone ESP8266 Web Server that controls 2 outputs (two LEDs). This ESP8266 NodeMCU Spider web Server is mobile responsive and it can be accessed with any device with a browser in your local network.

If you want to learn more well-nigh the ESP8266 module, first read my Getting Started Guide for the ESP8266 WiFi Module.

This tutorial covers 2 unlike methods to build the spider web server:

• Part 1: Create a Spider web Server Using Arduino IDE
• Part 2: Create a Spider web Server Using NodeMCU Firmware

Part 1: CREATE A Spider web SERVER USING ARDUINO IDE

This part shows yous how to create a web server to control 2 outputs using Arduino IDE. You can apply this method to create a unlike web server to fulfill your needs.

This tutorial is available in video format (picket below) and in written format (continue reading this folio).

Set up the Arduino IDE

1. Download and install the Arduino IDE on your operating system (some older versions won't work).

2.And so, you need to install the ESP8266 add together-on for the Arduino IDE. For that, go to File > Preferences.

3. Enter http://arduino.esp8266.com/stable/package_esp8266com_index.json into the "Additional Board Manager URLs" field every bit shown in the figure below. Then, click the "OK" button.

iv. Go to Tools > Lath > Boards Manager…

five. Scroll down, select the ESP8266 lath carte and install "eastwardsp8266 by ESP8266 Community", as shown in the figure below.

6. Get to Tools >Board and cull your ESP8266 board. And so, re-open your Arduino IDE.

Lawmaking

Copy the following lawmaking to your Arduino IDE, but don't upload information technology however. Y'all demand to make some changes to make it work for you.

          /*********   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;  // Electric current time unsigned long currentTime = millis(); // Previous time unsigned long previousTime = 0;  // Ascertain timeout time in milliseconds (case: 2000ms = 2s) const long timeoutTime = 2000;  void setup() {   Serial.brainstorm(115200);   // Initialize the output variables every bit 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 countersign   Serial.impress("Connecting to ");   Serial.println(ssid);   WiFi.brainstorm(ssid, password);   while (WiFi.status() != WL_CONNECTED) {     delay(500);     Serial.print(".");   }   // Impress local IP accost 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.bachelor();   // Heed for incoming clients    if (customer) {                             // If a new client connects,     Series.println("New Client.");          // print a message out in the serial port     String currentLine = "";                // make a String to agree incoming data from the customer     currentTime = millis();     previousTime = currentTime;     while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client'southward connected       currentTime = millis();                if (client.bachelor()) {             // if at that place'due south bytes to read from the client,         char c = customer.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 lot got 2 newline characters in a row.           // that'south the end of the customer HTTP request, so transport a response:           if (currentLine.length() == 0) {             // HTTP headers always kickoff with a response lawmaking (e.g. HTTP/one.1 200 OK)             // and a content-type and so the customer knows what's coming, then a blank line:             client.println("HTTP/1.ane 200 OK");             client.println("Content-type:text/html");             client.println("Connexion: 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, Loftier);             } else if (header.indexOf("Get /5/off") >= 0) {               Serial.println("GPIO 5 off");               output5State = "off";               digitalWrite(output5, Depression);             } else if (header.indexOf("Go /4/on") >= 0) {               Series.println("GPIO 4 on");               output4State = "on";               digitalWrite(output4, Loftier);             } else if (header.indexOf("GET /4/off") >= 0) {               Serial.println("GPIO 4 off");               output4State = "off";               digitalWrite(output4, Low);             }                          // Display the HTML spider web page             client.println("<!DOCTYPE html><html>");             client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-calibration=ane\">");             client.println("<link rel=\"icon\" href=\"data:,\">");             // CSS to manner the on/off buttons              // Feel gratis to change the background-colour and font-size attributes to fit your preferences             client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-marshal: center;}");             customer.println(".button { background-colour: #195B6A; border: none; color: white; padding: 16px 40px;");             client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");             customer.println(".button2 {background-colour: #77878A;}</manner></head>");                          // Web Page Heading             client.println("<body><h1>ESP8266 Web Server</h1>");                          // Display electric current state, and ON/OFF buttons for GPIO 5               customer.println("<p>GPIO 5 - Country " + output5State + "</p>");             // If the output5State is off, it displays the ON button                    if (output5State=="off") {               client.println("<p><a href=\"/5/on\"><push button class=\"button\">ON</push></a></p>");             } else {               client.println("<p><a href=\"/v/off\"><button form=\"push 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 push                    if (output4State=="off") {               customer.println("<p><a href=\"/4/on\"><push class=\"push\">ON</button></a></p>");             } else {               client.println("<p><a href=\"/4/off\"><push button grade=\"push button2\">OFF</button></a></p>");             }             customer.println("</body></html>");                          // The HTTP response ends with another bare line             customer.println();             // Suspension out of the while loop             break;           } else { // if yous got a newline, then clear currentLine             currentLine = "";           }         } else if (c != '\r') {  // if y'all got anything else just a carriage return character,           currentLine += c;      // add information technology to the end of the currentLine         }       }     }     // Articulate the header variable     header = "";     // Close the connection     client.stop();     Series.println("Customer disconnected.");     Serial.println("");   } }                  

View raw code

You demand to modify the following ii variables with your network credentials, so that your ESP8266 tin establish a connection with your router.

          // Replace with your network credentials const char* ssid = ""; const char* password = "";        

Uploading the Sketch

Uploading the Sketch to the ESP-12E

If you're using an ESP-12E NodeMCU Kit, uploading the sketch is very simple, since it has built-in programmer. Plug your lath to your calculator. Make sure you have the correct board and COM port selected.

Then, click the Upload button in the Arduino IDE and expect a few seconds until y'all see the message "Done uploading." in the bottom left corner.

Uploading Sketch to the ESP-01

Uploading code to the ESP-01 requires establishing a serial advice between your ESP8266 and a FTDI Programmer as shown in the schematic diagram below.

Note: alternatively, yous can utilise a ESP8266-01 Serial Adapter, which is easier to use and less error-prone.

The following table shows the connections you need to brand between the ESP8266 and the FTDI programmer.

ESP8266	FTDI programmer
RX	TX
TX	RX
CH_PD	3.3V
GPIO 0	GND
VCC	3.3V
GND	GND

If y'all take a make new FTDI Developer, you'll probably need to install the FTDI drivers on your Windows PC. Visit this website for the official drivers. (If the COM port is grayed out in your Arduino IDE, information technology is probably because you don't have the drivers installed).

Then, y'all just need to connect the FTDI programmer to your computer, and upload the code to the ESP8266.

Schematics

To build the excursion for this tutorial you lot need the post-obit parts:

Parts required:

• ESP8266 12-E – read Best ESP8266 Wi-Fi Development Boards
• 2x LEDs
• 2x Resistors (220 or 330 ohms should work just fine)
• Breadboard
• Jumper wires

If you're using ESP-01, you as well need an FTDI programmer or a Serial Adapter.

Y'all can use the preceding links or become directly to MakerAdvisor.com/tools to detect all the parts for your projects at the best price!

Connect two LEDs to your ESP8266 as shown in the following schematic diagram – with ane LED connected to GPIO four (D2), and some other to GPIO 5 (D1).

If you are using ESP-01…

If you're using the ESP8266-01, use the following schematic diagram as a reference, just y'all demand change the GPIOs assignment in the code (to GPIO 2 and GPIO 0).

Testing the Web Server

Now, you tin upload the code, and it will piece of work direct away. Don't forget to check if you have the right board and COM port selected, otherwise you'll get an error when trying to upload. Open the Serial Monitor at a baud charge per unit of 115200.

Finding the ESP IP Accost

Press the ESP8266 RESET button, and it will output the ESP IP accost on the Serial Monitor

Copy that IP address, because you need information technology to access the web server.

Accessing the Web Server

Open your browser, blazon the ESP IP address, and y'all'll see the following folio. This page is sent by the ESP8266 when you lot brand a request on the ESP IP address.

If take a expect at the serial monitor, you tin can see what'south going on on the background. The ESP receives an HTTP request from a new client – in this case, your browser.

You can also run across other data nigh the HTTP request – these fields are chosen HTTP header fields, and they ascertain the operating parameters of an HTTP transaction.

Testing the Web Server

Let'south exam the spider web server. Click the button to plough GPIO v ON. The ESP receives a asking on the /5/on URL, and turns LED 5 ON.

The LED state is also updated on the spider web page.

Test GPIO iv button and check that information technology works in a similar way.

How the Lawmaking Works

At present, allow's take a closer look at the lawmaking to encounter how it works, so that yous are able to modify it to fulfill your needs.

The kickoff thing you need to do is to include the ESP8266WiFi library.

          // Load Wi-Fi library #include <ESP8266WiFi.h>        

As mentioned previously, yous demand to insert your ssid and countersign in the post-obit lines within the double quotes.

          const char* ssid = ""; const char* countersign = "";        

Then, you lot set your web server to port 80.

          // Set web server port number to 80 WiFiServer server(80);        

The following line creates a variable to store the header of the HTTP asking:

          String header;        

Next, you create auxiliar variables to store the current state of your outputs. If yous desire to add together more outputs and relieve its state, y'all need to create more variables.

          // Auxiliar variables to store the current output state String output5State = "off"; String output4State = "off";        

You lot also demand to assign a GPIO to each of your outputs. Hither we are using GPIO 4 and GPIO 5. Yous can utilise any other suitable GPIOs.

          // Assign output variables to GPIO pins const int output5 = 5; const int output4 = 4;        

setup()

At present, permit's go into the setup(). The setup() part only runs once when your ESP kickoff boots. First, we start a serial communication at a baud rate of 115200 for debugging purposes.

          Serial.begin(115200);        

You also ascertain your GPIOs as OUTPUTs and set them to Low.

          // Initialize the output variables as outputs pinMode(output5, OUTPUT); pinMode(output4, OUTPUT); // Set outputs to LOW digitalWrite(output5, Depression); digitalWrite(output4, Depression);        

The following lines begin the Wi-Fi connection with WiFi.begin(ssid, countersign), wait for a successful connection and prints the ESP IP address in the Serial Monitor.

          // Connect to Wi-Fi network with SSID and password Serial.impress("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) {  filibuster(500);  Serial.print("."); } // Print local IP address and beginning web server Serial.println(""); Serial.println("WiFi connected."); Series.println("IP address: "); Series.println(WiFi.localIP()); server.begin();        

loop()

In the loop() we program what happens when a new client establishes a connectedness with the web server.

The ESP is ever listening for incoming clients with this line:

          WiFiClient client = server.available(); // Listen for incoming clients        

When a request is received from a client, we'll salvage the incoming information. The while loop that follows will exist running every bit long as the client stays connected. We don't recommend changing the following role of the code unless you know exactly what yous are doing.

          if (client) { // If a new client connects,  Serial.println("New Client."); // print a message out in the serial port  String currentLine = ""; // brand a Cord to hold incoming data from the client  while (client.continued()) { // loop while the client's connected  if (client.available()) { // if at that place's bytes to read from the client,   char c = client.read(); // read a byte, then   Series.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 bare, y'all got two newline characters in a row.    // that's the end of the client HTTP request, so transport a response:    if (currentLine.length() == 0) {     // HTTP headers ever start with a response code (eastward.g. HTTP/ane.1 200 OK)     // and a content-type and so the client knows what'southward coming, and so a blank line:     customer.println("HTTP/ane.1 200 OK");     client.println("Content-type:text/html");     client.println("Connexion: close");     customer.println();        

The next section of if and else statements checks which button was pressed in your spider web page, and controls the outputs accordingly. As we've seen previously, nosotros make a request on unlike URLs depending on the button we press.

          // turns the GPIOs on and off if (header.indexOf("Become /5/on") >= 0) {   Serial.println("GPIO five on");   output5State = "on";   digitalWrite(output5, HIGH); } else if (header.indexOf("GET /v/off") >= 0) {   Serial.println("GPIO v off");   output5State = "off";   digitalWrite(output5, Depression); } else if (header.indexOf("Get /4/on") >= 0) {   Series.println("GPIO 4 on");   output4State = "on";   digitalWrite(output4, Loftier); } else if (header.indexOf("GET /4/off") >= 0) {   Serial.println("GPIO 4 off");   output4State = "off";   digitalWrite(output4, LOW); }        

For instance, if you've pressed the GPIO 5 ON button, the URL changes to the ESP IP address followed by /5/ON, and we receive that information on the HTTP header. And then, nosotros can check if the header contains the expression Get /5/on.

If information technology contains, the code prints a message on the serial monitor, changes the output5State variable to on, and turns the LED on.

This works similarly for the other buttons. And so, if y'all desire to add together more outputs, yous should alter this part of the code to include them.

Displaying the HTML Spider web Folio

The next thing you need to practice, is generate the spider web page. The ESP8266 will be sending a response to your browser with some HTML text to display the web page.

The web folio is sent to the client using the client.println() office. You should enter what yous want to transport to the client as an argument.

The beginning text you should always transport is the following line, that indicates that nosotros're sending HTML.

          <!DOCTYPE html><html>        

Then, the post-obit line makes the web page responsive in whatever spider web browser.

          client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=i\">");        

The adjacent 1 is used to foreclose requests related to the favicon – You don't need to worry well-nigh this line.

          client.println("<link rel=\"icon\" href=\"data:,\">");        

Styling the Web Page

Next, we accept some CSS to style the buttons and the web page appearance. We choose the Helvetica font, ascertain the content to exist displayed as a block and aligned at the center.

          client.println("<mode>html { font-family unit: Helvetica; display: inline-block; margin: 0px motorcar; text-align: center;}");        

Nosotros manner our buttons with the some properties to define color, size, border, etc…

          customer.println(".push button { groundwork-color: #195B6A; border: none; color: white; padding: 16px 40px;"); client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");        

And then, we define the style for a second button, with all the properties of the button we've defined earlier, but with a unlike colour. This will be the style for the off push.

          client.println(".button2 {background-colour: #77878A;}</way></head>");        

Setting the Web Page Showtime Heading

In the side by side line you set the first heading of your spider web page, you can change this text to whatever you like.

          // Web Folio Title customer.println("<h1>ESP8266 Web Server</h1>");        

Displaying the Buttons and Respective Land

Then, you write a paragraph to display the GPIO v electric current country. As you can see nosotros apply the output5State variable, so that the state updates instantly when this variable changes.

          client.println("<p>GPIO 5 - State " + output5State + "</p>");        

So, we display the on or the off button, depending on the current land of the GPIO.

          if (output5State=="off") {  client.println("<p><a href=\"/five/on\"><button grade=\"push\">ON</button></a></p>"); } else {  customer.println("<p><a href=\"/v/off\"><push button class=\"push button2\">OFF</button></a></p>"); }        

We use the aforementioned procedure for GPIO 4.

Closing the Connection

Finally, when the response ends, we articulate the header variable, and finish the connection with the client with client.cease().

          // Clear the header variable header = ""; // Shut the connexion client.stop();        

Taking it Farther

Now that y'all know how the code works, you can modify the code to add more than outputs, or modify your web page. To alter your web page y'all may demand to know some HTML and CSS.

Instead of controlling two LEDs, yous can control a relay to command practically whatever electronics appliances.

To build a spider web server to display sensor readings, you can read the following tutorials:

• ESP8266 DHT Temperature and Humidity Web Server (Arduino IDE)
• ESP8266 DS18B20 Temperature Spider web Server (Arduino IDE)

Alternatively, if you want to programme your ESP8266 using MicroPython, you can read this tutorial: ESP32/ESP8266 MicroPython Web Server – Control Outputs

If you like ESP8266 brand certain you take a look at our course almost Home Automation with the ESP8266.

Part two: CREATE A Web SERVER USING NODEMCU FIRMWARE

This function shows you how to create a web server to command two outputs using NodeMCU firmware and LUA programming language. Y'all can employ this method to create a different spider web server to fulfill your needs.

First, watch the video demonstration beneath

Why flashing your ESP8266 module with NodeMCU?

NodeMCU is a firmware that allows you to program the ESP8266 modules with LUA script. Programming the ESP8266 with LUA using the NodeMCU firmware is very similar to the way yous plan your Arduino. With simply a few lines of lawmaking you tin plant a WiFi connexion, control the ESP8266 GPIOs, turning your ESP8266 into a spider web server and a lot more.

Downloading NodeMCU Flasher for Windows

Later wiring your circuit, you have to download the NodeMCU flasher. It'due south a.exe file that y'all can download using one of the post-obit links:

• Win32 Windows Flasher
• Win64 Windows Flasher

You can click here to find all the data about NodeMCU flasher.

Flashing your ESP8266

If you're using an ESP8266-12 you lot just need to plug the ESP into your computer. If you're using an ESP-01, you need an FTDI programmer to connect information technology to your computer. To establish a serial communication between your ESP8266 and a FTDI Programmer as shown in the schematic diagram below.

Open the flasher that yous just downloaded and a window should appear (as shown in the post-obit figure).

Press the button "Flash" and it should start the flashing process immediately (Y'all might have to alter some of the settings on the Advanced tab). After finishing this procedure, it should appear a greenish circle with a check icon.

Schematics

To build the circuit you need the following parts:

Parts required:

• ESP8266 12-East – read Best ESP8266 Wi-Fi Development Boards
• 2x LEDs
• 2x Resistors (220 or 330 ohms should work just fine)
• Breadboard
• Jumper wires

If you're using ESP-01, yous as well need an FTDI programmer.

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the all-time price!

If your using ESP-01…

If you're using the ESP8266-01, utilise the following schematic diagram as a reference.

Uploading the Code

I recommend using the ESPlorer program created by 4refr0nt to create and salvage LUA files into your ESP8266. Follow these instructions to download and install ESPlorer:

1. Click here to download ESPlorer
2. Unzip that binder
3. Become to the distfolder (here's the path: ESPlorer-master\ESPlorer\dist)
4. RunESPlorer.jar. It's a Java program, so y'all need Coffee installed on your computer.
5. Open the ESPlorer

You should come across a window similar to the preceding Figure, follow these instructions to upload a LUA file:

1. Connect your FTDI programmer to your computer
2. Select your FTDI programmer port
3. PrintingOpen/Close
4. Select NodeMCU+MicroPtyhon tab
5. Create a new file called init.lua
6. Press Save to ESP

Everything that yous demand to worry about or change is highlighted in ruby-red box.

Lawmaking

Upload the following code into your ESP8266 using the preceding software. Your file should exist named "init.lua". You lot tin can click here to download the file.

          wifi.setmode(wifi.STATION) wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD") impress(wifi.sta.getip()) led1 = 3 led2 = 4 gpio.mode(led1, gpio.OUTPUT) gpio.fashion(led2, gpio.OUTPUT) srv=net.createServer(cyberspace.TCP) srv:mind(80,function(conn)     conn:on("receive", office(client,request)         local buf = "";         local _, _, method, path, vars = cord.find(request, "([A-Z]+) (.+)?(.+) HTTP");         if(method == nil)and so             _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");         cease         local _GET = {}         if (vars ~= nil)so             for m, v in string.gmatch(vars, "(%w+)=(%westward+)&*") do                 _GET[thousand] = v             end         end         buf = buf.."<h1> ESP8266 Web Server</h1>";         buf = buf.."<p>GPIO0 <a href=\"?pin=ON1\"><button>ON</button></a>&nbsp;<a href=\"?pivot=OFF1\"><button>OFF</button></a></p>";         buf = buf.."<p>GPIO2 <a href=\"?pivot=ON2\"><button>ON</push></a>&nbsp;<a href=\"?pin=OFF2\"><button>OFF</push button></a></p>";         local _on,_off = "",""         if(_GET.pin == "ON1")then               gpio.write(led1, gpio.HIGH);         elseif(_GET.pin == "OFF1")then               gpio.write(led1, gpio.Low);         elseif(_GET.pivot == "ON2")then               gpio.write(led2, gpio.Loftier);         elseif(_GET.pin == "OFF2")then               gpio.write(led2, gpio.Depression);         end         customer:send(buf);         client:close();         collectgarbage();     cease) terminate)                  

View raw lawmaking

Don't forget to replace your WiFi Station details in that code in a higher place (Network Name and Password).

Accessing your spider web server

When your ESP8266 restarts it prints in your serial monitor the IP address of your ESP8266. If y'all type your ESP8266 IP address in your web browser, you can access your spider web server.

Our Virtually Popular ESP8266 Projects

If you like the ESP8266, you lot may also like:

• Dwelling Automation Using ESP8266
• ESP8266 Wi-Fi Button – DIY Amazon Nuance Button Clone
• ESP8266 Daily Task – Publish Temperature Readings to ThingSpeak
• ESP8266 Weather Forecaster
• Nextion Brandish with ESP8266 – Touchscreen User Interface for Node-Carmine

Exercise y'all have any questions? Leave a comment down below!

Thanks for reading. If you lot like this postal service probably yous might similar my adjacent ones, so please support me by subscribing my blog.

Updated Baronial 6, 2019

edelsteinthersibley.blogspot.com

Source: https://randomnerdtutorials.com/esp8266-web-server/

Share this post