Hackster is hosting Hackster Holidays, Finale: Livestream & Giveaway Drawing. Watch previous episodes or stream live on Tuesday!Stream Hackster Holidays, Finale on Tuesday!
mejdi chennoufi
Published © GPL3+

ESP32 Home Automation

Automating your house with the esp32 microcontroller to make a wireless light switch / alarm clock.

IntermediateFull instructions provided4 hours3,926
ESP32 Home Automation

Things used in this project

Hardware components

ESP32
×1
Relay Module
×1
Push button
×1
Switch
×2
Rtc module
×1
5v Power supply
×1
Resistor 10k ohm
Resistor 10k ohm
×2
LED (generic)
LED (generic)
×1
Speaker: 0.25W, 8 ohms
Speaker: 0.25W, 8 ohms
×1
Jumper wires (generic)
Jumper wires (generic)
×1

Software apps and online services

Arduino IDE
Arduino IDE
VS Code
Microsoft VS Code

Hand tools and fabrication machines

Soldering Station, 110 V
Soldering Station, 110 V
Solder Wire, Lead Free
Solder Wire, Lead Free
Hot glue gun (generic)
Hot glue gun (generic)

Story

Read more

Schematics

The wiring diagram

Code

HTML code

HTML
the website code to be hosted on the esp32
<!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>

Arduino code

Arduino
the Arduino code to be uploaded to the esp32
//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.
}

Credits

mejdi chennoufi
1 project • 1 follower

Comments