Rajiv SharmaIoTBoysRajivCodeLab
Published © GPL3+

How to Create ESP8266 Web Server to Make Your Own Smart Home

Transform your home into a smart home with our step-by-step guide on How to Create ESP8266 Web Server to Make Your Own Smart Home.

IntermediateProtip2 hours622
How to Create ESP8266 Web Server to Make Your Own Smart Home

Things used in this project

Hardware components

NodeMCU ESP8266 Breakout Board
NodeMCU ESP8266 Breakout Board
×1
Male/Female Jumper Wires
Male/Female Jumper Wires
×4
Breadboard (generic)
Breadboard (generic)
×1
Arduino 4 Relays Shield
Arduino 4 Relays Shield
×1
LED Light Bulb, Frosted GLS
LED Light Bulb, Frosted GLS
×2
USB-A to Micro-USB Cable
USB-A to Micro-USB Cable
×1

Software apps and online services

Arduino IDE
Arduino IDE

Story

Read more

Schematics

ESP8266 Smart Home Schematic

Code

ESP8266 Smart Home Sketch

C/C++
#include <ESP8266WiFi.h>

const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

WiFiServer server(80);

String header;

String output5State = "off";
String output4State = "off";

const int output5 = 5; //D1
const int output4 = 4; //D2


unsigned long currentTime = millis();

unsigned long previousTime = 0;

const long timeoutTime = 2000;

IPAddress local_IP(192, 168, 1, 111);
IPAddress gateway(192, 168, 1, 156);
IPAddress subnet(255, 255, 0, 0);
IPAddress primaryDNS(8, 8, 8, 8);
IPAddress secondaryDNS(8, 8, 4, 4);

void setup() {
  Serial.begin(115200);

  pinMode(output5, OUTPUT);
  pinMode(output4, OUTPUT);

  digitalWrite(output5, HIGH);
  digitalWrite(output4, HIGH);

 if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS)) {
    Serial.println("Failed to configure");
  }

  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  //WiFi.hostname("iotboys");
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();

  if (client) {
    Serial.println();
    //Serial.print("ESP Board MAC Address:  ");
    //Serial.println(WiFi.macAddress());
    Serial.println("New Client.");
    String currentLine = "";
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) {
      currentTime = millis();
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        header += c;
        if (c == '\n') {
          if (currentLine.length() == 0) {

            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, LOW);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /4/on") >= 0) {
              Serial.println("GPIO 4 on");
              output4State = "on";
              digitalWrite(output4, LOW);
            } else if (header.indexOf("GET /4/off") >= 0) {
              Serial.println("GPIO 4 off");
              output4State = "off";
              digitalWrite(output4, HIGH);
            }

            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:,\">");

            client.println("<style>html { font-family: Helvetica; display: inline-block;  text-align: center;}");
            client.println("body{ background-color: #111a23; color: #ecf0f1; margin: 0px !important;}");
            client.println("header { background-color: #0c151e; display: flex; align-items: center; justify-content: center; } footer { background-color: #0c151e; position: fixed;bottom: 0;width: 100%; }");
            client.println(".button { background-color: green; border: none; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer; width:35%;}");
            client.println(".logo {max-width: 100px; height: auto;  } .container{ padding:10px; margin-top:25%;} ");
            client.println(".button2 {background-color: red; border: none; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer; width:35%;}</style></head>");
            client.println("<body><header><img class='logo' src='https://iotboys.com/wp-content/uploads/2023/09/cropped-IoTBoys-512x512-1.png' alt='IoTBoys' /><h1>My Smart Home</h1></header>");
            
            
           
            client.println("<div class='container'>");
           
            client.println("<h3>Outdoor Light </h3>");
            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("<h3>Kitchen Light </h3>");
         
            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>");
            }
            client.println("</div>");
            client.println("<footer><p>Powered by &copy; IoTBoys</p></footer></body></html>");


            client.println();

            break;
          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    header = "";

    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Credits

Rajiv Sharma
18 projects • 71 followers
Having more than 10 years of experience in IoT and software technology. Founded IoTBoys to share knowledge with IoT enthusiasts.
Contact
IoTBoys
9 projects • 115 followers
Watch, Learn and Built IoT projects | DIY IoT Projects | IoT Projects for College Student.
Contact
RajivCodeLab
7 projects • 4 followers
Creates YT videos on DIY IoT Projects: Raspberry Pi Pico, Raspberry Pi Zero, Arduino, ESP32,
Contact

Comments

Please log in or sign up to comment.