ESP32 Home Automation : Wireless Light Switch

by mejdchennoufi06 in Circuits > Arduino

5066 Views, 10 Favorites, 0 Comments

ESP32 Home Automation : Wireless Light Switch

arduino-logo-1.png
20201226_111349.jpg
1600716035016.png

in this project we'll see the steps needed to make a d.i.y home automation system :

wirelss light switch , with alarm clock around the ESP32 microcontroller

The Components Needed

1 (4).jpg
1 (3).jpg
1.jpg
1 (2).jpg
5.jpg
1 (1).jpg

we will need a couple components in addition to the esp itself (images above) :

* The esp32.

* A relay module.

* A push button.

* Two switches.

* A 5-12 v power supply.

* An RTC module.

* Along with two 10k resistors , an LED of any prefered color , a small speaker and some generic body of wire , about 2 meters should be enough.

* You will also need a computer with the arduino IDE installed , and the ESP32 programming librairy , you can find how to do that on the internet.

Wiring

wiring diagram.png

the wiring job is not hard , just follow the above wiring diagram.

The Code

The code consists of two parts , the html code for the web page , which will be embedded later in the arduino code , and the arduino code itself that displays / gets feedback from page and the RTC module for the alarm clock , it's all explained with comments in the arduino file above , so it shouldn't be hard to understand if you have expirience with arduino.

Downloads

ESP32_wireless_light_switch.ino
ESP32 website.txt

The Arduino Code

//Importing all the essetial librairies:
#include <Wire.h>  //the wire librairy for the i2c communication with the RTC.
#include <WiFi.h>  //the wifi librairy for the website hosting.
#include "RTClib.h"  // the RTC librairy that has all the essenssiel RTC code.

//setting the network information for the connection.
const char* ssid = "YOUR_SSID";
const char* password =  "YOUR_PASSWORD";

RTC_DS1307 rtc;   //initializing the RTC module.

WiFiServer server(80);    //initializing the wifi server.

//setting static server information.
IPAddress staticIP(192,168,1,2);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
IPAddress dns(192,168,1,1);

//setting the alarm parameters:

// the time of the alarm triggering.
int Hour1 = 6; 
int Mins1 = 15; 

// the time of the alarm stopping.
int Hour2 = 7;
int Mins2 = 5;

//All the necessairy variables:
int relayPin1 = 13;  //Relay pin.
int btn = 0;   //The "alarm-off" button pin.
int togpin = 25;   //The "alarm on/off" button pin.
int ledPin = 5;   //The LED pin.
int Hrs;    //Current hour.
int Mins;   //Current minute.
int snooze;   //The "alarm-off" button state.
int State;    //The light state.
int toggle;   //The "alarm on/off" button state.
bool nope = true;   //The snooze following value.

void setup() {
  //Setting the PWM parameters for the speaker pin since we are using the ESP32. 
  ledcSetup(0, 1000, 8);
  ledcAttachPin(17, 0);

  //Setting all the pinmodes for the used pins:
  pinMode(relayPin1,OUTPUT);     //The relay pin as an output.
  pinMode(ledPin,OUTPUT);   //The led pin as an output.
  pinMode(btn,INPUT);   //The "alarm-off" button pin as an input.
  pinMode(togpin,INPUT);   //The "alarm on/off" button pin as an input.
    
  digitalWrite(ledPin,HIGH);   //Setting the led pin state high since the pin is attached to the led's cathode , so by setting it high we are turning it off which is needed because it's initial state is low so the led would be on.
  
  digitalWrite(relayPin1,HIGH);   //Same for the relay pin since the module we are using is common anode.

  ConnectToWiFi();    //connecting to wifi.
  
  server.begin();   //begining the web server.
}
void loop() {
    DateTime now = rtc.now();   //initializing an element with the RTC librairy , storing all the time information.

    Hrs = now.hour();   //storing the current hour value in the variable.
    Mins = now.minute();    //storing the current minute value in the variable.
  
    snooze = digitalRead(btn);    //storing the "alarm-off" button state in the variable.
    toggle = digitalRead(togpin);   //storing the "alarm on/off" button state in the variable.    

    if(toggle == 1){    //only do the following if the "alarm on/off" value is True.

    if(snooze == 0){    //when button pressed stop the alarm.
      nope = false;
      AlarmOff();
    }
    
    if(Hrs == Hour1 && Mins >= Mins1){    //only do the following if we hit the the triggering time.
      
      if(nope){   //if we don't hit the snooze.
        State = 1;
        AlarmOn();
      }
    }

    if(Hrs == Hour2){   //do the following if we hit the stopping HOUR.
      if(Mins <= Mins2){    //if we're yet to reach the stopping MINUTE.
      
      if(nope){   //if we don't hit the snooze.
        State = 1;
        AlarmOn();
      }
      }
      
      if(Mins > Mins2){   //if we hit the stopping MINUTE.
        
      for(int i ; i < 2 ; i++){   //go around turning everything off twice , for certainty.
      
      State = 0;
      
      AlarmOff();
      
        }
      }
    }
}

         Page();    //displaying the website and controlling the light throught it.

}

void Page(){    //function for displaying and getting user input from the web page.
  //this is where it gets a little complicated , but just focus and you'll be good :
  WiFiClient client = server.available();     //initializing server named client. 
  
  if (client) {   //if a client is present.
                                    
    String currentLine = "";                
    while (client.connected()) {    //do the following if we have a client connected.        
      if (client.available()) {   //if the client is ON the page.
        char c = client.read();   //storing the info read off the client in the variable.            
        if (c == '\n') {    //if we don't get any information from the client.        

          if (currentLine.length() == 0) {    //if there's no interaction from the client.
          if(!State){     //if the light is off.
            //The web page displayed if the light is off:
          client.print("<!DOCTYPE html>\n");client.print("<!-- saved from url=(0042)file:///C:/Users/HP%20PRO/Desktop/web.html -->\n");client.print("<html>\n");client.print("\t\t\n");client.print("\t<head>\n");client.print("\t<link rel=\"icon\" \n");client.print("      type=\"image/png\" \n");client.print("      href=\"https://pbs.twimg.com/profile_images/863510403120222208/rjVOiTe3.jpg\">\n");client.print("\n");client.print("\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n");client.print("\t\n");client.print("\t<meta name=\"viewport\" content=\"width=device-width initial-scale=1.0 \">\n");client.print("\t<title>esp32</title>\n");client.print("\t<style type=\"text/Css\">\n");client.print("\n");client.print("\t.mobileShow {display: none;}\n");client.print("\n");client.print("   \t@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ \n");client.print("     .mobileShow {display: inline;}\n");client.print("  \t}\n");client.print("\n");client.print("\t.mobileHide { display: inline; }\n");client.print("\n");client.print("  \t@media only screen and (min-device-width : 320px) and (max-device-width : 480px){\n");client.print("     .mobileHide { display: none;}\n");client.print("  \t}\n");client.print("\n");client.print("\t.sansserif {\n");client.print("  \tfont-family: Arial, Helvetica, sans-serif;\n");client.print("\t}\n");client.print(" \n");client.print("\tbody{ \n");client.print("\n");client.print("\t\tbackground-image: url('https://i.pinimg.com/originals/ea/3f/d3/ea3fd3102ccf575e3c33954f73eab78d.jpg');\n");client.print("\n");client.print("\t\tbackground-repeat: no-repeat;\n");client.print("  \t\t\n");client.print("  \t\tbackground-attachment: fixed;\n");client.print("  \t\t\n");client.print("  \t\tbackground-size: cover;\n");client.print("\n");client.print("\t\tfont-family: Arial, Helvetica, sans-serif;\n");client.print("\n");client.print("\t}\n");client.print("\n");client.print("\t.floater {\n");client.print("    height: 100%;\n");client.print("    width: 225px;\n");client.print("    display: inline-block;\n");client.print("\t}\n");client.print("\n");client.print("\t.floaterMob {\n");client.print("    height: 100%;\n");client.print("    display: inline-block;\n");client.print("\t}\n");client.print("\n");client.print("\t.container {\n");client.print("    white-space: nowrap;\n");client.print("\t}\n");client.print("\n");client.print("\t.button {\n");client.print("\ttransition-duration: 0.4s;\n");client.print("  \tborder-radius: 4px;\n");client.print("  \tborder: none;\n");client.print("  \tpadding: 22px 42px;\n");client.print("  \ttext-align: center;\n");client.print("  \ttext-decoration: none;\n");client.print("  \tdisplay: inline-block;\n");client.print("  \tfont-size: 24px;\n");client.print("  \tmargin: 4px 2px;\n");client.print("  \tcursor: pointer;\n");client.print("\t}\n");client.print("\n");client.print("\t.button1 {\n");client.print("  \tbackground-color: #e7e7e7; \n");client.print("  \tcolor: black; \n");client.print("\t}\n");client.print("\n");client.print("\t.button1:hover {\n");client.print("\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\n");client.print("  \tbackground-color: #4CAF50;\n");client.print("  \tcolor: white;\n");client.print("\t}\n");client.print("\n");client.print("\t.button2 {\n");client.print("\tpadding: 22px 42px;\n");client.print("  \tbackground-color: #e7e7e7; \n");client.print("  \tcolor: black; \n");client.print("\t}\n");client.print("\n");client.print("\t.button2:hover {\n");client.print("\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\n");client.print("  \tbackground-color: #008CBA;\n");client.print("  \tcolor: white;\n");client.print("\t}\n");client.print("</style>\n");client.print("</head>\n");client.print("\t\t<center>\n");client.print("\t\t\t\n");client.print("\t<body>\n");client.print("\t\t\t<div class=\"mobileHide\">\n");client.print("\t\t<header> \n");client.print("\n");client.print("    <div id=\"top-header\"> \n");client.print("               \n");client.print("        <div style=\"align-items: center;\"  class=\"container\"> \n");client.print("\n");client.print("        \t<div class=\"floater\"><img name=\"wifiLogo\" width=\"160\" src=\"https://i.pinimg.com/originals/db/a9/42/dba94232c569bddc40386bcb540e0f95.png\"></div>\n");client.print("\n");client.print("            <div class=\"floater\"><img name=\"arduinoLogo\" width=\"400\" height=\"100\" src=\"https://elbag.net/wp-content/uploads//arduino-logo-1024x259.png\"></div>\n");client.print("\n");client.print("            <div class=\"floater\"><img name=\"Seperation\" width=\"10\" height=\"10\" src=\"https://about.canva.com/wp-content/themes/canvaabout/img/proLandingPage/banner-wave-3.svg\"></div>\n");client.print("\n");client.print("        </div>     \n");client.print("<hr>\n");client.print("        <nav> \n");client.print("                \n");client.print("        </nav> \n");client.print("    </div>     \n");client.print("    \n");client.print("</header> \n");client.print("<br>\n");client.print("\t\t\n");client.print("\t\t<div style=\"align-items: center;\">\n");client.print("\t\t\t<center>\n");client.print("            <a href=\"/ON\">\n");client.print("  \t\t\t<button id=\"hell\" onclick=\"document.getElementById('hell').style.display='none' ; document.getElementById('hell2').style.display='block'\" class=\"button1 button\">ON</button>\n");client.print("  \t\t\t</a>\n");client.print("\n");client.print("\n");client.print("\n");client.print("  \t\t\t <a href=\"/OFF\">\n");client.print("  \t\t\t<button style=\"display: none\" id=\"hell2\" onclick=\"document.getElementById('hell2').style.display='none' ; document.getElementById('hell').style.display='block'\" class=\"button2 button\"><strong>OFF</strong></button>\n");client.print("  \t\t</a>\n");client.print("  \t\n");client.print("  \t</center>\n");client.print("\n");client.print("  \t\t</div><br><br>\n");client.print("  \t\t<a href=\"https://en.wikipedia.org/wiki/Goat\" target=\"_blank\">\n");client.print("  \t\t<img width=\"1000\" src=\"https://sammlung.staedelmuseum.de/images/1269/philipp-peter-roos-sheep-and-goat-rocky-landscape-1279--thumb-xl.jpg\" alt=\"A Goa0t\">\n");client.print("  \t\t</a>\n");client.print("\t\t</center>\n");client.print("\t\t</div>\n");client.print(" \t\n");client.print(" \t\t<!---------------------------------------------------------mobile----------------------------------------------------------------->\t\n");client.print(" \t\t<center>\n");client.print("\t\t<div class=\"mobileShow\">\n");client.print("\t\t<header> \n");client.print("\n");client.print("    <div style=\"align-items: center\" id=\"top-header\"> \n");client.print("               \n");client.print("        <div> \n");client.print("\n");client.print("        \t<div class=\"floaterMob\"><img name=\"wifiLogo\" width=\"80\" src=\"https://i.pinimg.com/originals/db/a9/42/dba94232c569bddc40386bcb540e0f95.png\"></div>\n");client.print("\n");client.print("        \t<div class=\"floaterMob\"><img name=\"separation\" width=\"20\" height=\"10\" src=\"https://about.canva.com/wp-content/themes/canvaabout/img/proLandingPage/banner-wave-3.svg\"></div>\n");client.print("\n");client.print("            <div class=\"floaterMob\"><img name=\"arduinoLogo\" width=\"200\" src=\"https://elbag.net/wp-content/uploads//arduino-logo-1024x259.png\"></div>\n");client.print("\n");client.print("        </div>     \n");client.print("<hr>\n");client.print("        <nav> \n");client.print("                \n");client.print("        </nav> \n");client.print("    </div>     \n");client.print("    \n");client.print("<br>\n");client.print("\t\t\n");client.print("\t\t<div style=\"align-items: center;\">\n");client.print("\t\t\t<center>\n");client.print("            <a href=\"/ON\">\n");client.print("  \t\t\t<button id=\"hell\" onclick=\"document.getElementById('hell').style.display='none' ; document.getElementById('hell2').style.display='block'\" class=\"button1 button\">ON</button>\n");client.print("  \t\t\t</a>\n");client.print("\n");client.print("\n");client.print("\n");client.print("  \t\t\t <a href=\"/OFF\">\n");client.print("  \t\t\t<button style=\"display: none\" id=\"hell2\" onclick=\"document.getElementById('hell2').style.display='none' ; document.getElementById('hell').style.display='block'\" class=\"button2 button\"><strong>OFF</strong></button>\n");client.print("  \t\t</a>\n");client.print("  \t\n");client.print("  \t</center>\n");client.print("\n");client.print("  \t\t</div><br><br>\n");client.print("\n");client.print("  \t\t<img name=\"mainPic\" width=\"350\" src=\"https://i.kym-cdn.com/photos/images/facebook/001/365/202/90e.jpg\" alt=\"A mayrio koala\">\n");client.print("\n");client.print("\t\t</center>\n");client.print("\t\t</div>\n");client.print("\t\t</center>\n");client.print("</body>\n");client.print("\t\n");client.print("\t</html>");
          }
          
          if(State){    //if the light is on.
            //The web page displayed if the light is on:
          client.print("<!DOCTYPE html>\n");client.print("<!-- saved from url=(0042)file:///C:/Users/HP%20PRO/Desktop/web.html -->\n");client.print("<html>\n");client.print("\t\t\n");client.print("\t<head>\n");client.print("\t<link rel=\"icon\" \n");client.print("      type=\"image/png\" \n");client.print("      href=\"https://pbs.twimg.com/profile_images/863510403120222208/rjVOiTe3.jpg\">\n");client.print("\n");client.print("\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n");client.print("\t\n");client.print("\t<meta name=\"viewport\" content=\"width=device-width initial-scale=1.0 \">\n");client.print("\t<title>esp32</title>\n");client.print("\t<style type=\"text/Css\">\n");client.print("\n");client.print("\t.mobileShow {display: none;}\n");client.print("\n");client.print("   \t@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ \n");client.print("     .mobileShow {display: inline;}\n");client.print("  \t}\n");client.print("\n");client.print("\t.mobileHide { display: inline; }\n");client.print("\n");client.print("  \t@media only screen and (min-device-width : 320px) and (max-device-width : 480px){\n");client.print("     .mobileHide { display: none;}\n");client.print("  \t}\n");client.print("\n");client.print("\t.sansserif {\n");client.print("  \tfont-family: Arial, Helvetica, sans-serif;\n");client.print("\t}\n");client.print(" \n");client.print("\tbody{ \n");client.print("\n");client.print("\t\tbackground-image: url('https://i.pinimg.com/originals/ea/3f/d3/ea3fd3102ccf575e3c33954f73eab78d.jpg');\n");client.print("\n");client.print("\t\tbackground-repeat: no-repeat;\n");client.print("  \t\t\n");client.print("  \t\tbackground-attachment: fixed;\n");client.print("  \t\t\n");client.print("  \t\tbackground-size: cover;\n");client.print("\n");client.print("\t\tfont-family: Arial, Helvetica, sans-serif;\n");client.print("\n");client.print("\t}\n");client.print("\n");client.print("\t.floater {\n");client.print("    height: 100%;\n");client.print("    width: 225px;\n");client.print("    display: inline-block;\n");client.print("\t}\n");client.print("\n");client.print("\t.floaterMob {\n");client.print("    height: 100%;\n");client.print("    display: inline-block;\n");client.print("\t}\n");client.print("\n");client.print("\t.container {\n");client.print("    white-space: nowrap;\n");client.print("\t}\n");client.print("\n");client.print("\t.button {\n");client.print("\ttransition-duration: 0.4s;\n");client.print("  \tborder-radius: 4px;\n");client.print("  \tborder: none;\n");client.print("  \tpadding: 22px 42px;\n");client.print("  \ttext-align: center;\n");client.print("  \ttext-decoration: none;\n");client.print("  \tdisplay: inline-block;\n");client.print("  \tfont-size: 24px;\n");client.print("  \tmargin: 4px 2px;\n");client.print("  \tcursor: pointer;\n");client.print("\t}\n");client.print("\n");client.print("\t.button1 {\n");client.print("  \tbackground-color: #e7e7e7; \n");client.print("  \tcolor: black; \n");client.print("\t}\n");client.print("\n");client.print("\t.button1:hover {\n");client.print("\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\n");client.print("  \tbackground-color: #4CAF50;\n");client.print("  \tcolor: white;\n");client.print("\t}\n");client.print("\n");client.print("\t.button2 {\n");client.print("\tpadding: 22px 42px;\n");client.print("  \tbackground-color: #e7e7e7; \n");client.print("  \tcolor: black; \n");client.print("\t}\n");client.print("\n");client.print("\t.button2:hover {\n");client.print("\tbox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);\n");client.print("  \tbackground-color: #008CBA;\n");client.print("  \tcolor: white;\n");client.print("\t}\n");client.print("</style>\n");client.print("</head>\n");client.print("\t\t<center>\n");client.print("\t\t\t\n");client.print("\t<body>\n");client.print("\t\t\t<div class=\"mobileHide\">\n");client.print("\t\t<header> \n");client.print("\n");client.print("    <div id=\"top-header\"> \n");client.print("               \n");client.print("        <div style=\"align-items: center;\"  class=\"container\"> \n");client.print("\n");client.print("        \t<div class=\"floater\"><img name=\"wifiLogo\" width=\"160\" src=\"https://i.pinimg.com/originals/db/a9/42/dba94232c569bddc40386bcb540e0f95.png\"></div>\n");client.print("\n");client.print("            <div class=\"floater\"><img name=\"arduinoLogo\" width=\"400\" height=\"100\" src=\"https://elbag.net/wp-content/uploads//arduino-logo-1024x259.png\"></div>\n");client.print("\n");client.print("            <div class=\"floater\"><img name=\"Seperation\" width=\"10\" height=\"10\" src=\"https://about.canva.com/wp-content/themes/canvaabout/img/proLandingPage/banner-wave-3.svg\"></div>\n");client.print("\n");client.print("        </div>     \n");client.print("<hr>\n");client.print("        <nav> \n");client.print("                \n");client.print("        </nav> \n");client.print("    </div>     \n");client.print("    \n");client.print("</header> \n");client.print("<br>\n");client.print("\t\t\n");client.print("\t\t<div style=\"align-items: center;\">\n");client.print("\t\t\t<center>\n");client.print("            <a href=\"/ON\">\n");client.print("  \t\t\t<button style=\"display: none\" id=\"hell\" onclick=\"document.getElementById('hell').style.display='none' ; document.getElementById('hell2').style.display='block'\" class=\"button1 button\">ON</button>\n");client.print("  \t\t\t</a>\n");client.print("\n");client.print("\n");client.print("\n");client.print("  \t\t\t <a href=\"/OFF\">\n");client.print("  \t\t\t<button  id=\"hell2\" onclick=\"document.getElementById('hell2').style.display='none' ; document.getElementById('hell').style.display='block'\" class=\"button2 button\"><strong>OFF</strong></button>\n");client.print("  \t\t</a>\n");client.print("  \t\n");client.print("  \t</center>\n");client.print("\n");client.print("  \t\t</div><br><br>\n");client.print("  \t\t<a href=\"https://en.wikipedia.org/wiki/Goat\" target=\"_blank\">\n");client.print("  \t\t<img width=\"1000\" src=\"https://sammlung.staedelmuseum.de/images/1269/philipp-peter-roos-sheep-and-goat-rocky-landscape-1279--thumb-xl.jpg\" alt=\"A Goa0t\">\n");client.print("  \t\t</a>\n");client.print("\t\t</center>\n");client.print("\t\t</div>\n");client.print(" \t\n");client.print(" \t\t<!---------------------------------------------------------mobile----------------------------------------------------------------->\t\n");client.print(" \t\t<center>\n");client.print("\t\t<div class=\"mobileShow\">\n");client.print("\t\t<header> \n");client.print("\n");client.print("    <div style=\"align-items: center\" id=\"top-header\"> \n");client.print("               \n");client.print("        <div> \n");client.print("\n");client.print("        \t<div class=\"floaterMob\"><img name=\"wifiLogo\" width=\"80\" src=\"https://i.pinimg.com/originals/db/a9/42/dba94232c569bddc40386bcb540e0f95.png\"></div>\n");client.print("\n");client.print("        \t<div class=\"floaterMob\"><img name=\"separation\" width=\"20\" height=\"10\" src=\"https://about.canva.com/wp-content/themes/canvaabout/img/proLandingPage/banner-wave-3.svg\"></div>\n");client.print("\n");client.print("            <div class=\"floaterMob\"><img name=\"arduinoLogo\" width=\"200\" src=\"https://elbag.net/wp-content/uploads//arduino-logo-1024x259.png\"></div>\n");client.print("\n");client.print("        </div>     \n");client.print("<hr>\n");client.print("        <nav> \n");client.print("                \n");client.print("        </nav> \n");client.print("    </div>     \n");client.print("    \n");client.print("<br>\n");client.print("\t\t\n");client.print("\t\t<div style=\"align-items: center;\">\n");client.print("\t\t\t<center>\n");client.print("            <a href=\"/ON\">\n");client.print("  \t\t\t<button style=\"display: none\" id=\"hell\" onclick=\"document.getElementById('hell').style.display='none' ; document.getElementById('hell2').style.display='block'\" class=\"button1 button\">ON</button>\n");client.print("  \t\t\t</a>\n");client.print("\n");client.print("\n");client.print("\n");client.print("  \t\t\t <a href=\"/OFF\">\n");client.print("  \t\t\t<button id=\"hell2\" onclick=\"document.getElementById('hell2').style.display='none' ; document.getElementById('hell').style.display='block'\" class=\"button2 button\"><strong>OFF</strong></button>\n");client.print("  \t\t</a>\n");client.print("  \t\n");client.print("  \t</center>\n");client.print("\n");client.print("  \t\t</div><br><br>\n");client.print("\n");client.print("  \t\t<img name=\"mainPic\" width=\"350\" src=\"https://i.kym-cdn.com/photos/images/facebook/001/365/202/90e.jpg\" alt=\"A mayrio koala\">\n");client.print("\n");client.print("\t\t</center>\n");client.print("\t\t</div>\n");client.print("\t\t</center>\n");client.print("</body>\n");client.print("\t\n");client.print("\t</html>");
          }
            break;
          }
          else {    //after the client interacted and the light followed , we reset the values.
            currentLine = "";
          }
        }
        else if (c != '\r') {   //if there is information to read from the client , we store it.
          currentLine += c;      
        }
        
        if (currentLine.endsWith("GET /ON")) {    //if ON button pressed.
        State = 1;
        TurnLightOn();
        
        }
        if (currentLine.endsWith("GET /OFF")) {   //if OFF button pressed.
        State = 0;
        TurnLightOff();
        }
      }
    }
  }
}

void ConnectToWiFi(){   //function for connecting the esp to wifi.
  WiFi.begin(ssid, password);   //using the written info to begin the connection.

  if (!WiFi.config(staticIP, gateway, subnet, dns, dns)) {    //making sure the esp connects with our chosen static ip address.
      for(int i ; i < 10 ; i++){    //if the process fails we blink the led.
     digitalWrite(ledPin,LOW);
     delay(100);
     digitalWrite(ledPin,HIGH);
      }
  }
}

void TurnLightOn(){
  digitalWrite(relayPin1,LOW);    //setting the relay value low , therefore triggiring it , since it's a common cathode relay module.
}

void TurnLightOff(){
  digitalWrite(relayPin1,HIGH);   //setting the relay value low , therefore turning it off , since it's a common cathode relay module.
}

void AlarmOff(){  //function for stopping all the alarm actions.  
  TurnLightOff();
  LedOff();
  SpeakerOff();
}

void AlarmOn(){   //function for triggering all the alarm actions.
  TurnLightOn();
  SpeakerOn();
  Blink();
}

void LedOn(){    //function for turning the led on.
  digitalWrite(ledPin,LOW);   //setting the led pin to low , since the pin is attached to the cathode so the values are flipped around.
}

void LedOff(){    //function for turning the led off.
  digitalWrite(ledPin,HIGH);   //setting the led pin to high , since the pin is attached to the cathode so the values are flipped around.
}

void SpeakerOn(){   //function for playing the speaker tune.
    ledcWrite(0,123);   //sending the speaker a PWM signal to play a tune.
    delay(400);   //waiting a while.
    ledcWrite(0,0);   //turning the speaker off.
    delay(400);  //waiting a while.
}

void SpeakerOff(){    //function for turning speaker off.
  ledcWrite(0,0);   //bascically setting the speaker pin low.
}

void Blink(){   //the led blinking function.
  digitalWrite(ledPin,LOW);   //turning led on.
  delay(75);    //waiting a while.
  digitalWrite(ledPin,HIGH);    //turning led off.
}

The Html Code

<!DOCTYPE html>
<!-- saved from url=(0042)file:///C:/Users/HP%20PRO/Desktop/web.html -->
<html>
		
	<head>
	<link rel="icon" 
      type="image/png" 
      href="https://pbs.twimg.com/profile_images/863510403120222208/rjVOiTe3.jpg">

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<meta name="viewport" content="width=device-width initial-scale=1.0 ">
	<title>esp32</title>
	<style type="text/Css">

	.mobileShow {display: none;}

   	@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ 
     .mobileShow {display: inline;}
  	}

	.mobileHide { display: inline; }

  	@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
     .mobileHide { display: none;}
  	}

	.sansserif {
  	font-family: Arial, Helvetica, sans-serif;
	}
 
	body{ 

		background-image: url('https://i.pinimg.com/originals/ea/3f/d3/ea3fd3102ccf575e3c33954f73eab78d.jpg');

		background-repeat: no-repeat;
  		
  		background-attachment: fixed;
  		
  		background-size: cover;

		font-family: Arial, Helvetica, sans-serif;

	}

	.floater {
    height: 100%;
    width: 225px;
    display: inline-block;
	}

	.floaterMob {
    height: 100%;
    display: inline-block;
	}

	.container {
    white-space: nowrap;
	}

	.button {
	transition-duration: 0.4s;
  	border-radius: 4px;
  	border: none;
  	padding: 22px 42px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 24px;
  	margin: 4px 2px;
  	cursor: pointer;
	}

	.button1 {
  	background-color: #e7e7e7; 
  	color: black; 
	}

	.button1:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  	background-color: #4CAF50;
  	color: white;
	}

	.button2 {
	padding: 22px 42px;
  	background-color: #e7e7e7; 
  	color: black; 
	}

	.button2:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  	background-color: #008CBA;
  	color: white;
	}
</style>
</head>
		<center>
			
	<body>
			<div class="mobileHide">
		<header> 

    <div id="top-header"> 
               
        <div style="align-items: center;"  class="container"> 

        	<div class="floater"><img name="wifiLogo" width="160" src="https://i.pinimg.com/originals/db/a9/42/dba94232c569bddc40386bcb540e0f95.png"></div>

            <div class="floater"><img name="arduinoLogo" width="400" height="100" src="https://elbag.net/wp-content/uploads//arduino-logo-1024x259.png"></div>

            <div class="floater"><img name="Seperation" width="10" height="10" src="https://about.canva.com/wp-content/themes/canvaabout/img/proLandingPage/banner-wave-3.svg"></div>

        </div>     
<hr>
        <nav> 
                
        </nav> 
    </div>     
    
</header> 
<br>
		
		<div style="align-items: center;">
			<center>
            <a href="/ON">
  			<button id="hell" onclick="document.getElementById('hell').style.display='none' ; document.getElementById('hell2').style.display='block'" class="button1 button">ON</button>
  			</a>



  			 <a href="/OFF">
  			<button style="display: none" id="hell2" onclick="document.getElementById('hell2').style.display='none' ; document.getElementById('hell').style.display='block'" class="button2 button"><strong>OFF</strong></button>
  		</a>
  	
  	</center>

  		
		</center>
		</div>
 	
 		<!---------------------------------------------------------mobile----------------------------------------------------------------->	
 		<center>
		<div class="mobileShow">
		<header> 

    <div style="align-items: center" id="top-header"> 
               
        <div> 

        	<div class="floaterMob"><img name="wifiLogo" width="80" src="https://i.pinimg.com/originals/db/a9/42/dba94232c569bddc40386bcb540e0f95.png"></div>

        	<div class="floaterMob"><img name="separation" width="20" height="10" src="https://about.canva.com/wp-content/themes/canvaabout/img/proLandingPage/banner-wave-3.svg"></div>

            <div class="floaterMob"><img name="arduinoLogo" width="200" src="https://elbag.net/wp-content/uploads//arduino-logo-1024x259.png"></div>

        </div>     
<hr>
        <nav> 
                
        </nav> 
    </div>     
    
<br>
		
		<div style="align-items: center;">
			<center>
            <a href="/ON">
  			<button id="hell" onclick="document.getElementById('hell').style.display='none' ; document.getElementById('hell2').style.display='block'" class="button1 button">ON</button>
  			</a>



  			 <a href="/OFF">
  			<button style="display: none" id="hell2" onclick="document.getElementById('hell2').style.display='none' ; document.getElementById('hell').style.display='block'" class="button2 button"><strong>OFF</strong></button>
  		</a>
  	
  	</center>

  		</div><br><br>

  		
		</center>
		</div>
		</center>
</body>
	
	</html>

The End Result

20201226_111306.jpg
20201226_111349.jpg

At the end , your project should look a little something like the above image , you can choose any project box to contain it , just be careful when handeling the live 220v wires , it'll be best if you leave it to a professionel because every wiring job will be different depending on the house wiring itself , so you'll need to figure that out yourself.