Overview: Home Automation using ESP8266 Web Server
In this project, we learn how to make IoT Based Home Automation using ESP8266 Web Server. By Home Automation we mean controlling lighting and appliances without any manual switch but using a system that is connected to the Internet. When connected to the Internet, home devices are an important constituent of the Internet of Things (“IoT”).
In this project, we will be using a Local Web Server. A web server is a device that runs websites. It’s a program or a bunch of code that distributes web pages as they are requisitioned. The basic objective of the Web Server is to store, process, and deliver web pages to the users. This intercommunication is done using Hypertext Transfer Protocol (HTTP).
In this Home Automation System, we will control 4 home appliances connected to the Relay using a Local Web Server. The Wifi Module NodeMCU ESP8266 will Receive commands from the Web Page.
Before moving forward with this project, you can check our previous project:
1. Home Automation using NodeMCU & Alexa
2. Wifi & Voice Controlled Home Automation Using NodeMCU & Android
3. IoT Home Automation using Blynk & NodeMCU ESP8266
4. Home Automation using Google Firebase & NodeMCU ESP8266
5. Home Automation with Arduino IoT Cloud & ESP32
6. Industrial Automation using ESP8266 & AWS IoT Core
Bill of Materials
The following are the components required for making this project. All the components can be easily purchased from Amazon. The component purchase link is given below.
| S.N. | Components Name | Quantity | Purchase Links |
|---|---|---|---|
| 1 | NodeMCU ESP8266 | 1 | Amazon | AliExpress |
| 2 | Relay 5V | 4 | Amazon | AliExpress |
| 3 | 7805 Voltage Regulator IC | 1 | Amazon | AliExpress |
| 4 | Female DC Power Jack DCJ0202 | 1 | Amazon | AliExpress |
| 5 | Diode 1N4007 | 4 | Amazon | AliExpress |
| 6 | Resistor 330-ohm | 5 | Amazon | AliExpress |
| 7 | NPN Transistor BC547 | 4 | Amazon | AliExpress |
| 8 | Terminal Block | 4 | Amazon | AliExpress |
| 9 | LED 5mm Any Color | 1 | Amazon | AliExpress |
| 10 | Female Header | 2 Set | Amazon | AliExpress |
Circuit Diagram & Connection
The circuit diagram for Web Server Controlled Home Automation using ESP8266 is given below. Using this circuit diagram you can assemble the circuit on the Breadboard using 4 4-channel Relay and NodeMCU Board.
Home Automation PCB & Gerber File
If you don’t want to assemble the circuit on a breadboard and you want a PCB for the project, then here is the PCB for you. The PCB Board for the Home Automation Project is designed using the EasyEDA online Circuit Schematics & PCB designing tool. The front side and back side of the PCB are given below.
The Gerber File for the PCB Board is given below. You can simply download the Gerber File for this project.
Source Code/Program
Copy the code from below and upload it to the NodeMCU Board.
|
1 2 |
const char* ssid = "MySmartHome"; //wifi name const char* password = "hngzhowxiantan"; //wifi password |
But before uploading change the WiFi SSID & Password.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 |
#include <ESP8266WiFi.h> // Replace with your network credentials const char* ssid = "MySmartHome"; //wifi name const char* password = "hngzhowxiantan"; //wifi 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 output0State = "off"; String output1State = "off"; String output2State = "off"; String output3State = "off"; // Assign output variables to GPIO pins const int output0 = D2; //GPIO4 const int output1 = D5; //GPIO14 const int output2 = D6; //GPIO12 const int output3 = D1; //GPIO5 void setup() { Serial.begin(115200); // Initialize the output variables as outputs pinMode(output0, OUTPUT); pinMode(output1, OUTPUT); pinMode(output2, OUTPUT); pinMode(output3, OUTPUT); // Set outputs to LOW digitalWrite(output0, LOW); digitalWrite(output1, LOW); digitalWrite(output2, LOW); digitalWrite(output3, 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 if (header.indexOf("GET /4/on") >= 0) { Serial.println("GPIO 4 on"); output0State = "on"; digitalWrite(output0, HIGH); } else if (header.indexOf("GET /4/off") >= 0) { Serial.println("GPIO 4 off"); output0State = "off"; digitalWrite(output0, LOW); } // turns the GPIOs on and off else if (header.indexOf("GET /14/on") >= 0) { Serial.println("GPIO 14 on"); output1State = "on"; digitalWrite(output1, HIGH); } else if (header.indexOf("GET /14/off") >= 0) { Serial.println("GPIO 14 off"); output1State = "off"; digitalWrite(output1, LOW); } // turns the GPIOs on and off else if (header.indexOf("GET /12/on") >= 0) { Serial.println("GPIO 12 on"); output2State = "on"; digitalWrite(output2, HIGH); } else if (header.indexOf("GET /12/off") >= 0) { Serial.println("GPIO 12 off"); output2State = "off"; digitalWrite(output2, LOW); } // turns the GPIOs on and off else if (header.indexOf("GET /5/on") >= 0) { Serial.println("GPIO 5 on"); output3State = "on"; digitalWrite(output3, HIGH); } else if (header.indexOf("GET /5/off") >= 0) { Serial.println("GPIO 5 off"); output3State = "off"; digitalWrite(output3, 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>Home Automation</h1>"); client.println("<body><h2>using Local Web Server</h2>"); // Display current state, and ON/OFF buttons for GPIO 4 client.println("<p>GPIO 4 - State " + output0State + "</p>"); // If the output0State is off, it displays the ON button if (output0State == "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>"); } // Display current state, and ON/OFF buttons for GPIO 14 client.println("<p>GPIO 14 - State " + output1State + "</p>"); // If the output1State is off, it displays the ON button if (output1State == "off") { client.println("<p><a href=\"/14/on\"><button class=\"button\">ON</button></a></p>"); } else { client.println("<p><a href=\"/14/off\"><button class=\"button button2\">OFF</button></a></p>"); } // Display current state, and ON/OFF buttons for GPIO 12 client.println("<p>GPIO 12 - State " + output2State + "</p>"); // If the output2State is off, it displays the ON button if (output2State == "off") { client.println("<p><a href=\"/12/on\"><button class=\"button\">ON</button></a></p>"); } else { client.println("<p><a href=\"/12/off\"><button class=\"button button2\">OFF</button></a></p>"); } // Display current state, and ON/OFF buttons for GPIO 5 client.println("<p>GPIO 5 - State " + output3State + "</p>"); // If the output3State is off, it displays the ON button if (output3State == "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>"); } 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(""); } } |
Controlling Home Appliances through Web Page
Once the code is uploaded, the NodeMCU Board will try connecting to the Network using the given SSID & Password.
Once connected to the network, the Serial Monitor will display the Local IP Address.
Now you can copy the IP Address and paste it to the web Browser. The Web Browser will display a beautiful webpage.
Now you can send 1 or 0 to turn ON & OFF the home appliances. The ON command is assigned to a certain GPIO PIN as 1 & OFF command as 0.
Apart from all this, if your NodeMCU ESP8266 Board is connected to your PC, the Serial Monitor will display the following message.
Well, that’s all from IoT Based Home Automation using ESP8266 Web Server. If you have any doubts, please comment below.
11 Comments
Bro i uploaded code after uploading code . In serial monitor not showing ip.. just showing connecting to ssid .. what to do
Press reset button
In this project, what is used as server, esp or mobile?
I tried my hands on this project and it works flawlessly,though the esp8266 requires too much power to stay on. Thnaks a lot
This control on local area network but not wide area network what should do for that
ESP8266 is the server sending HTTP over internet to any web browser which connects to the ESP8266 IP address
While this is beyond the scope of this article, there are several options. One would be to set up a port redirect on your LAN Router/Switch/Modem so that when you connect to your LAN with the proper port it gets re-directed to the ESP8266. Others may include using services like Arduino Cloud, Amazon Echo, etc. There are many articles out there to guide you through that process. But as a simple LAN IoT project this is a great introduction to IoT setups. You may also want to look at TAZMOTA or TAZMATIZING the ESP8266 for some really nice, premade programing which you can modify.
code is having build error. This should be avoided , wrong code in learning platform does not keep the learning good.
Can we use led instead of bulbs with holders
where we should buy pcb board
Order the pcb from here: https://www.allpcb.com/lp/prototype.html?code=PT18