In my earlier posts related to NodeMCU, we discussed the initial setup of NodeMCU and went through steps to blink onboard LEDs & external LEDs. Here in this article, we will go through steps to control relay from a webpage using NodeMCU accessing it via its IP address. This, in turn, will lay the foundation of the smart home setup.

NodeMCU is an interesting piece of hardware and those who are aware of this name, know well that it has got a lot of potentials. In fact, many low-end manufacturers rely on ESP chip for their WiFi controlled devices like smart bulbs, etc.

BASICS OF RELAY

Relay is a very important component of electronic circuits. Think of it as an electronically operated mechanical switch.

The principle behind relay is the operation of a high current mechanical switch using an electromagnetic coil operated using relatively small current from the circuit. This way, we are able to separate low current primary circuit from the high current switching circuit and prevent it from damage in case of any fault.

Relays are available with different configurations as per need. Eg different operating voltage & the voltage/current its switching circuit can handle. The one i am using works with 5V DC while it can control up to 10A/250VAC or 15A/125VAC or DC30V/10A.

Also, i am using an optocoupler based relay board which has several benefits. One is that since it uses NodeMCU GPIO pins output only to control the optocoupler device, its drawing minimal current from the pins. While the relay’s extra current requirements are fulfilled via power source directly. Other is opto isolation, discussed in detail at the end of the article.

REQUIREMENTS

1. NodeMCU ESP8266 Board
2. Micro USB cable + power supply (any mobile charger or laptop USB port will work)
3. Relay Module (up to 9 relays can be operated using one NodeMCU, i am using 4 relay module)
4. AC/DC bulb, fan etc, to control using the relay (optional)
5. Breadboard *
6. Jumper cables, Male to Female M-F, Female to Female F-F *
7. Some knowledge of basic programming & HMTL

* You can connect NodeMCU to Relay board via breadboard using M-F jumper cables or you may skip breadboard and directly connect relay & NodeMCU using F-F jumper cables.

GETTING READY FOR RELAY CONTROL USING NODEMCU

1. Install the NodeMCU on the breadboard.
2. Using M-F jumper cable connect GND of NodeMCU (any GND pin) to GND of the relay module.
3. Connect GPIO’s (D0 to D8) of NodeMCU to IN1-IN4 of the relay module using M-F jumper cable. Suppose IN1-D1, IN2-D2, IN3-D3, IN4-D5.
4. With a jumper on VCC/JD-VCC, connect VCC of the relay module to VIN of NodeMCU (to provide direct 5V supply coming from the USB port) using M-F jumper cable.
5. Connect AC/DC load on relays NO circuit i.e. phase or DC(+) to each of relay connectors mid terminal and wire from the load (L1, L2, L3, L4 e.g. light, fan etc) to left NO terminal. Just be careful while dealing with AC.
6. Other ground wire of AC supply or -ve of DC, goes directly to load.
7. You can also have a manual switch parallel to NO circuit for on/off.

8. Connect micro USB cable’s one end to computer and other to board’s USB port.
9. Open Arduino IDE and choose board NodeMCU 1.0 from Tools → Boards.
10. Set baud rate to 115200 and choose the port used to connect NodeMCU to the computer.
11. Copy the code below to IDE.
12. Open serial monitor, Tools → Serial Monitor
13. Go to Sketch → Upload
14. Wait for the upload to complete. Other blue LED near the WiFi chip will bl4ink continuously while the upload process is going on.
15. Upon successful completion, check for status in serial monitor & copy the IP address of ESP8266 from there. (pic below)
16. Open the IP address in your browser and used toggle buttons on the page to switch relays on/off. (pic below)

CODE TO CONTROL 4 CH RELAY BOARD USING NODEMCU

This is basic code to toggle the relays. But you can unleash your creativity to add features to it, like displaying current relay status (on or off) on the web page, using SVG graphics for the same, making it lively with visuals of the circuit, etc.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

/* define constants of various pins for easy accessibility */
#define RELAY1 D1
#define RELAY2 D2
#define RELAY3 D3
#define RELAY4 D5

/* Enter ssid & password of your WiFi inside double quotes */
const char *ssid = "SSID of your WiFi here";
const char *password = "Password of your WiFi here";

ESP8266WebServer server(80); /* Object of web server library with default port 80 */

/* Below are various functions to handle root page, page not found and relay toggles */

void handleRoot() {
  Serial.println("Calling main web page or root page");
  char mainWebPage[800];

  /* HTML code for web page inside double quotes */
  snprintf(mainWebPage, 800,
  "<html>\
      <head>\
        <title>Home Automation</title>\
        <style>\
          body { background-color: #ffffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
        </style>\
      </head>\
      <body>\
       <center>\
        <h2>HOME CONTROL SYSTEM</h2>\
            <form action=\"/Relay1\" method=\"POST\">Roof Light <input type=\"submit\" value=\"Toggle\"></form>\
            <form action=\"/Relay2\" method=\"POST\">Study Light <input type=\"submit\" value=\"Toggle\"></form>\
            <form action=\"/Relay3\" method=\"POST\">Night Lamp <input type=\"submit\" value=\"Toggle\"></form>\ 
            <form action=\"/Relay4\" method=\"POST\">Ceiling Fan <input type=\"submit\" value=\"Toggle\"></form>\        
       <h2><a href=\"https://www.abstractotech.com\">www.abstractotech.com</a></h2>\
      </center>\
      </body>\
  </html>"
          );
  server.send(200, "text/html", mainWebPage);
}

void handleRelay1() { 
 Serial.println("Relay 1 toggle");
 digitalWrite(RELAY1,!digitalRead(RELAY1));
 server.sendHeader("Location","/"); 
 server.send(303);
}

void handleRelay2() { 
 Serial.println("Relay 2 toggle");
 digitalWrite(RELAY2,!digitalRead(RELAY2));
 server.sendHeader("Location","/"); 
 server.send(303);
}

void handleRelay3() { 
 Serial.println("Relay 3 toggle");
 digitalWrite(RELAY3,!digitalRead(RELAY3));
 server.sendHeader("Location","/"); 
 server.send(303);
}

void handleRelay4() { 
 Serial.println("Relay 4 toggle");
 digitalWrite(RELAY4,!digitalRead(RELAY4)); 
 server.sendHeader("Location","/"); 
 server.send(303);
}

void handleNotFound(){
  server.send(404, "text/plain", "404: Not found");
}

/* This function helps initialize program and set initial values */

void setup(void) 
{
  Serial.begin(115200); /* open serial communication over port */
  delay(10);
  WiFi.begin(ssid, password); /* connect to WiFi */
  Serial.println("");

  /* Declare pins as output pins */
  pinMode(RELAY1,OUTPUT); 
  pinMode(RELAY2,OUTPUT);
  pinMode(RELAY3,OUTPUT);
  pinMode(RELAY4,OUTPUT);
  
  /*Declare pins output as high to keep relays off */
  digitalWrite(RELAY1,HIGH);
  digitalWrite(RELAY2,HIGH);
  digitalWrite(RELAY3,HIGH);
  digitalWrite(RELAY4,HIGH);

  /* Display progress dots on serial monitor till WiFi is connected */
  while (WiFi.status() != WL_CONNECTED) {
    delay(100);
    Serial.print(".");
  }

  /* Display WiFi SSID and IP address on serial monitor */
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  /* Server and web page related calls */
  server.on("/", handleRoot); /* Call main web page */
  server.on("/Relay1", handleRelay1); /* Call relay1 page on toggle */
  server.on("/Relay2", handleRelay2); /* Call relay2 page on toggle */
  server.on("/Relay3", handleRelay3); /* Call relay3 page on toggle */
  server.on("/Relay4", handleRelay4); /* Call relay4 page on toggle */
  server.onNotFound(handleNotFound); /* Page not found handler */
  server.begin(); /* Begin web server */
  
  Serial.println("HTTP server started");
}

/* This function keeps on looping and waits for users action on web page */

void loop(void) 
{
  server.handleClient();
}

UTILIZING OPTOCOUPLER FOR COMPLETE OPTO ISOLATION

In order to isolate the relay circuit from the NodeMCU board’s input switching circuit, follow the steps below:

1. Remove the jumper from VCC/JD-VCC.
2. Connect JD-VCC to +ve & GND to -ve terminal of separate power supply.
3. Connect VCC & IN1-IN4 to NodeMCU which has its own power supply.

This way we achieve opto isolation as doing above completely isolates the relay circuit with its own ground & positive. While switching circuit being active low, works with VCC & active low input from MCU, switching on relay & led. Below is the circuit layout from Sunfounder for proper understanding. Key here is active low switching.

Other boards with active high switching will have two ground pins on board for both the circuits to achieve opto isolation.

TO CONCLUDE

So here we learned to control the relay module using NodeMCU via Wifi over web-browser. Using this you can make your own webpage to control equipment across home, but it has its own limitations. This one is totally limited to your WiFi range and will work over your home WiFi network. As a matter of fact, it will even work without the internet as here the ESP chip connects to the WiFi router and your web-browser communicates with it via the router.

So what to do to control things from virtually anywhere? What if we are able to switch on/off lights at home from anywhere in the world? There comes a useful utility named Blynk. We will learn more about it in the next article.

A few other things to try:

Setup Arduino for NodeMCU programming

Blink Onboard Blue Colour LED

Blink External LEDs

Home Automation using NodeMCU and Blynk- Control device from anywhere

NodeMCU ESP8266 can be purchased from here.
4 Channel Opto Coupler relay from here.
Jumper cables from here.
Breadboard from here.