ESP32 Project: How to control 4 AC bulb or load over WiFi with 4 Relay

How to control 4 AC bulbs or loada using 4 Relay mobule and ESP32 over WiFi

Using this Arduino code we can control 4 AC load such as AC bulb or fan using ESP32 over WiFi either from Computer or tablet or mobile phone.
HTML page to control 4 AC Loads using ESP8266

HTML Page for Mobile phone

Topics and Timing of section of video

00:47 Introduction
02:23 Wiring Explained
-Wiring Diagram on Robojax Arduino Course on Udemy
05:24 Preparing Arduino IDE for ESP32
07:23 Code Settings
-Full explanition of code on Robojax Arduino Course on Udemy
11:51 Desktop Demonstration
13:33 Mobile Phone demonstration
The link to use in the "preferences" of Arduino IDE for ESP32 board https://dl.espressif.com/dl/package_esp32_index.json Watch video for instructions.
Resources for this sketch

Basic code to control direction of rotation of motor with 2 relay


 /*
 * Contol a relay over WiFi using ESP32  to 
 * turn ON or OFF 4 AC bulb or 4 fan or other load using 4 channel relay
 * 
 * Watch Video instrution for this code:https://youtu.be/o6j_Qy3JTvU
 * 
 * Full explanation of this code and wiring diagram is available at
 * my Arduino Course at Udemy.com here: http://robojax.com/L/?id=62

 * Written by Ahmad Shamshiri on Feb 26, 2020 at 06:20
 * in Ajax, Ontario, Canada. www.robojax.com
 * 

 * Get this code and other Arduino codes from Robojax.com
Learn Arduino step by step in structured course with all material, wiring diagram and library
all in once place. Purchase My course on Udemy.com http://robojax.com/L/?id=62

If you found this tutorial helpful, please support me so I can continue creating 
content like this. You can support me on Patreon http://robojax.com/L/?id=63

or make donation using PayPal http://robojax.com/L/?id=64

 *  * This code is "AS IS" without warranty or liability. Free to be used as long as you keep this note intact.* 
 * This code has been download from Robojax.com
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

   Copyright (c) 2015, Majenko Technologies
   All rights reserved.

   Redistribution and use in source and binary forms, with or without modification,
   are permitted provided that the following conditions are met:

 * * Redistributions of source code must retain the above copyright notice, this
     list of conditions and the following disclaimer.

 * * Redistributions in binary form must reproduce the above copyright notice, this
     list of conditions and the following disclaimer in the documentation and/or
     other materials provided with the distribution.

 * * Neither the name of Majenko Technologies nor the names of its
     contributors may be used to endorse or promote products derived from
     this software without specific prior written permission.

   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
   ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
   WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
   DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
   ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
   (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
   LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
   ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
   (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
   SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
const int relayCount =4;//total number of relays
int relayPin[relayCount] ={12, 14, 27, 26};//
int relayState[relayCount]={1, 1, 1, 1};//initial state . 1 OFF, 0 ON
String buttonTitle1[relayCount] ={"Light 1 ON", "Light 2 ON", "Light 3 ON", "Light 4 ON"};
String buttonTitle2[relayCount] ={"Light 1 OFF", "Light 2 OFF", "Light 3 OFF", "Light 4 OFF"};
String argId[relayCount] ={"r1", "r2", "r3", "r4"};


#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>

const char *ssid = "Robojax";
const char *password = "YouTube2020";

WebServer server(80);

void handleRoot() {
  //Robojax.com ESP32 2 Relay Control
 String HTML ="<!DOCTYPE html>\
  <html>\
  <head>\
  	
<title>Robojax ESP32 2 Relay Control</title>\
  	
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\
  
<style>\
 
html,body{	
width:100%\;
height:100%\;
margin:0}
*{box-sizing:border-box}
.colorAll{
	background-color:#90ee90}
.colorBtn{
	background-color:#add8e6}
.angleButtdon,a{
	font-size:30px\;
border:1px solid #ccc\;
display:table-caption\;
padding:7px 10px\;
text-decoration:none\;
cursor:pointer\;
padding:5px 6px 7px 10px}a{
	display:block}
.btn{
	margin:5px\;
border:none\;
display:inline-block\;
vertical-align:middle\;
text-align:center\;
white-space:nowrap}
";
   
  HTML +="</style>

</head>

<body>
<h1>Robojax ESP32 Relay Control </h1>
";
  
   for(int i=0; i< relayCount; i++){
      if(relayState[i]){
        HTML +="	<div class=\"btn\">
		<a class=\"angleButton\" style=\"background-color:#90ee90\"  href=\"/relay?";
        HTML += argId[i];
        HTML += "=on\">";
        HTML +=buttonTitle1[i]; //Light ON title
      }else{
        HTML +="	<div class=\"btn\">
		<a class=\"angleButton \" style=\"background-color:#f56464\"  href=\"/relay?";
        HTML += argId[i];
        HTML +="=off\">";      
        HTML +=buttonTitle2[i];//Light OFF title  
      }   
     HTML +="</a>	
	</div>

";     
   }
   

  HTML +="	
</body>
</html>
";
  server.send(200, "text/html", HTML);  
}//handleRoot()

void handleNotFound() {
  //Robojax.com ESP32 Relay Control
  String message = "File Not Found

";
  message += "URI: ";
  message += server.uri();
  message += "
Method: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "
Arguments: ";
  message += server.args();
  message += "
";

  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "
";
  }

  server.send(404, "text/plain", message);
 //Robojax.com ESP32 Relay Control
}//end of handleNotFound()

void setup(void) {
  //Robojax.com ESP32 Relay Control 
 
  for(int i=0; i< relayCount; i++){
    pinMode(relayPin[i], OUTPUT);// define a pin as output for relay
    digitalWrite(relayPin[i], relayState[i]);//initial state either ON or OFF
  }

  Serial.begin(115200);//initialize the serial monitor
  Serial.println("Robojax ESP32 Relay Control");

  //Relay control ON OFF by Robojax.com
    
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: http://");
  Serial.println(WiFi.localIP());

//multicast DNS //Robojax.com ESP32 Relay Control 
  if (MDNS.begin("robojaxESP32")) {
    Serial.println("MDNS responder started");
    Serial.println("access via http://robojaxESP32");
  }

  server.on("/", handleRoot);
  server.on("/relay", HTTP_GET, relayControl);         
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");

}//end of setup

void loop(void) {
  //Robojax ESP32 Relay Control
  server.handleClient();

  for(int i=0; i< relayCount; i++){
    if(relayState[i] ==1)
    {
      digitalWrite(relayPin[i], HIGH);
    }else{
      digitalWrite(relayPin[i], LOW);
    }
    //printRelayState(i);//prints for debugging purpose
    //will slow your ESP32. Do not use it for normal operation
  }


   delay(100);
 //Robojax ESP32 Relay Control
}//end of loop


/*
 * relayControl()
 * updates the value of "relayState" varible to 1 or zero 
 * returns nothing
 * written by Ahmad Shamshiri
 * on Wednesday Feb 22, 2020 at 16:20 in Ajax, Ontario, Canada
 * www.robojax.com
 */
void relayControl() {

  for(int i=0; i< relayCount; i++){
    if(server.arg(argId[i]) == "on")
    {
      relayState[i] = 0;// set state of relay to ON
    }else if(server.arg(argId[i]) == "off"){
      relayState[i] = 1;  // set state of relay to OFF
    }    
  }
  

  handleRoot();
}//relayControl() end


/*
 * printRelayState()
 * prints state of each relay for degubbing purpose
 * returns nothing
 * written by Ahmad Shamshiri
 * on Wednesday Feb 26, 2020 at 06:10 in Ajax, Ontario, Canada
 * www.robojax.com
 */
void printRelayState(int id)
{
   Serial.print(buttonTitle1[id]);
   Serial.print(" : ");
   Serial.println (relayState[id]);
   delay(500);
}//printRelayState end