Control Relay From Online Web Dashboard and IR Remote
Introduction
Relays are widely used in home automation projects. They are used to switch electrical appliances using low voltage DC signal. In this project we are going to control the relay using IR remote control and also using a web dashboard. The web dashboard is made using simple HTML and CSS code.
The ESP-01 module acts as a web server. It will serve us the web page when we connect to it using a web browser from our client device like Smartphone, laptop or computer. All we need to do is paste the local IP address of ESP-01 board in the address bar and the web page will appear with a title and two buttons to turn the relay 'on' and 'off '.
Component list
- ESP-01
- FTDI module (USB to UART)
- USB cable (type A)
- TSOP 38 (IR receiver)
- Micro switch (reset button)
- AMS1117-3.3V (voltage regulator module)
- 5V 1A SMPS adaptor (To power the circuit)
- LDR - 3mm
- LED 5mm RED
- resistors 1pcs each - 200E, 1K, 4.7K
- Diode - 1N4007 - 1pcs
- Relay - 5V
- Transistor BC547
- Breadboard
- Single core breadboard wires
- IR remote
Circuit diagram
Prerequisite
If it's your first time with the ESP-01 module. Then watch the below given beginners guide video. It will guide you on how to make ESP module compatible with Arduino IDE and upload program in it.
Code
Install the required libraries and then upload the below given program
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <IRremoteESP8266.h>
#include <IRrecv.h>
#include <IRutils.h>
const char* ssid = ""; //type your WiFi ssid
const char* password = ""; //type your WiFi password
int led = 2;
int c=0;
uint16_t RECV_PIN = 0;
IRrecv irrecv(RECV_PIN);
decode_results results;
AsyncWebServer server(80);
String led1State;
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<style>
body{
background-color: rgb(178, 247, 238);
}
h1{
text-align: center;
text-decoration:underline;
font-family: Arial, Helvetica, sans-serif;
color: rgb(250, 250, 250);
font-style: italic;
}
.title{
overflow: hidden;
background-color: #0A1128;
margin-bottom: 20px;
}
.container{
max-width:1200px;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
margin-left: 25px;
place-items: center;
column-gap: 20px;
row-gap: 10px;
}
.card1{
text-align: center;
border:1px solid black;
border-radius: 25px;
background-color: rgb(251, 207, 154);
grid-row:1/2;
}
.card1:hover{
box-shadow: 0px 2px 2px 2px rgb(1, 106, 85);
}
.buton{
width:50px;
height:50px;
background-color: rgb(5, 206, 65);
border-radius: 10px;
margin:10px;
}
.butoff{
width:50px;
height:50px;
background-color: rgb(249, 122, 122);
border-radius: 10px;
margin:10px;
}
</style>
<title>led control</title>
</head>
<body>
<div class="title">
<h1>ESP-01 WEB DASHBOARD</h1>
</div>
<div class="container">
<div class="card1">
<h3>GPIO 2</h3>
<a href="on1"><button class="buton">ON</button></a>
<a href="off1"><button class="butoff">OFF</button></a>
<p>Status:%STATE1%</p>
</div>
</div>
</body>
</html>
)rawliteral";
int dump(decode_results *results) {
// Dumps out the decode_results structure.
// Call this after IRrecv::decode()
uint16_t count = results->rawlen;
return (results->value);
}
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
if(WiFi.status() == WL_CONNECTED){
Serial.println(WiFi.localIP());
}
}
String processor(const String& var){
if(var == "STATE1") {
if(digitalRead(led)) {
led1State = "ON";
}
else {
led1State = "OFF";
}
return led1State;
}
return String();
}
void setup() {
Serial.begin(115200);
pinMode(led,OUTPUT);
initWiFi();
irrecv.enableIRIn(); // Start the receiver
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
server.on("/on1", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(led, HIGH);
request->send_P(200, "text/html", index_html, processor);
});
// Route to set GPIO state to LOW
server.on("/off1", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(led, LOW);
request->send_P(200, "text/html", index_html, processor);
});
// Start server
server.begin();
}
void loop() {
if(WiFi.status() == WL_CONNECTED && c==0){
Serial.println(WiFi.localIP());
c++;
}
if(WiFi.status() != WL_CONNECTED){
c = 0;
}
if (irrecv.decode(&results)) {
int num = dump(&results);
Serial.println(num);
if(num == 33441975){
digitalWrite(led,HIGH);
delay(200);
}
if(num == 33446055){
digitalWrite(led,LOW);
delay(200);
}
delay(300);
irrecv.resume();
}
}
//END OF CODE
After code is uploaded
- Open serial monitor.
- Setting the "on button" and "off button" on IR remote - Point IR remote at the IR receiver and press a key. A code will be printed on serial monitor. Use that code in the program to turn on the GPIO 2 pin. Similarly do it for the 'off switch' .
- Turn on the WiFi. Local IP address of ESP module will be printed on the serial monitor.
- Connect your computer/smartphone to the same WiFi network as that of the ESP module.
- Copy the IP address. Open browser(eg - chrome, firefox, opera) on your computer. Paste the IP address in the address bar and hit enter. The web page will load. It will look like this.
From this web dashboard, we can now control the relay by clicking on the buttons.
If you want to see the practical working of this project then watch the below given YouTube video.
If you have any query regarding this blog or project. Feel free to contact me. My email ID - prachethire@gmail.com
If you found this blog useful and want to support me, then you can donate me. The money you give will be used to make more advance electronics projects and setting up better lab.
Comments
Post a Comment