Activating Loads With Relay Via WiFi With ESP8266

You will learn how to develop your printed circuit board and code to drive a load over WiFi using ESP8266.

ESP8266

PCBWay Printed Circuit Board

Do you want an electronic board for activating loads via WiFi that is safe against surges in the electrical network and with high immunity to noise to avoid failures/locks in your ESP8266 circuit?

Problems with code locking, lack of protection against electrical surges, lack of development of a secure electronic board are just a few points that users do not know how to develop. This causes several problems in the process of creating professional projects and prevents the circuit from working efficiently to drive loads in the field of application.

To solve these and other problems, we developed an electronic project for the board below and implemented the following circuits:

• Power supply from the electrical network,
• Short circuit and overvoltage protection circuit,
• Power supply isolation circuit,
• Circuit with optocoupler for driving relays,
• And among other blocks.

If you want to understand the complete functioning of each block of the circuit, click on the following PCBWay Community link and understand each part of the electronic circuit.

Take advantage and download all the manufacturing files, list of materials and component place list for assembling the printed circuit board on PCBWay.

In this article you will learn how to use this printed circuit board and develop an application to activate the relay from a web page.

Circuits with relays are frequently requested when it is necessary to activate higher power loads that are connected to the electrical network. As already mentioned, the big problem is that users do not know how to assemble the ideal circuit and this causes serious problems in the drive system.

Below we have the structure of the developed electronic board and from now on you will learn how to create an application to control any load from your computer or cell phone.

This electronic board must be powered by the electrical network and can be supplied with voltages between 127VAC and 220VAC. The input circuit consists of the varistor, fuse and Hilink source, as shown in the figure below.

From the Hilink AC-DC converter, we have an output voltage of 5VDC to power the direct current circuit. As you can see, we have a relay and, when activated, it is common to generate electromagnetic interference and cause the microcontroller chip to reset or lock. How to avoid this problem and ensure the safe operation of the CHIP?

The source isolation circuit is essential to completely isolate two parts of a circuit. Our objective in this project was to create an isolated power supply to power just the ESP8266 and another source to power the rest of the circuit. For this, we use the B0505S device.

The B0505S is an isolated DC-DC converter device. It receives the 5V input voltage that comes from the Hilink source and then provides an isolated DC voltage at its output with a value of 5V. Its maximum current supply capacity is 200mA. This current is sufficient to be used in the ESP8266 power circuit.

From this isolation, there will be no direct connection between the ESP8266 circuit and the relay, as there is an optical isolation circuit with the PC817 optocoupler. See the figure below.

This way, there is complete isolation and safety in the relay activation process through the ESP8266. As previously discussed, these circuits provide greater safety for activating loads in the field of application.

Next, we will discuss an application to be embedded in the ESP8266 and activate the relay through a webserver.

The electronic board system consists of a relay to activate the load. To do this, there are 2 ways to activate the relays: you can use a button connected directly to the board or use a webserver with buttons to activate it.

In this application we use a server to allow activation through a web page. See the interface below.

The interface presented above is not my own. It was modified based on Rui Santos' code. All credits and link to the author's page are at the end of the article. Below we have the modified code.

#include "ESP8266WiFi.h"
#include "ESPAsyncWebServer.h"

// Set to true to define Relay as Normally Open (NO)
#define RELAY_NO    true

// Set number of relays
#define NUM_RELAYS  1

// Assign each GPIO to a relay
int relayGPIOs[NUM_RELAYS] = {4};

// Replace with your network credentials
const char* ssid = "GESILANE";
const char* password = "bruxxf6d";

const char* PARAM_INPUT_1 = "relay";  
const char* PARAM_INPUT_2 = "state";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 3.0rem;}
    p {font-size: 3.0rem;}
    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
    .switch {position: relative; display: inline-block; width: 120px; height: 68px} 
    .switch input {display: none}
    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #cc0000; border-radius: 34px}
    .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
    input:checked+.slider {background-color: #17A057}
    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
  </style>
</head>
<body>
  <h2>Relay Activation System</h2>
  %BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1", true); }
  else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }
  xhr.send();
}</script>
</body>
</html>
)rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if(var == "BUTTONPLACEHOLDER"){
    String buttons ="";
    for(int i=1; i<=NUM_RELAYS; i++){
      String relayStateValue = relayState(i);
      buttons+= "<h4>Relay " + String(i) + " - GPIO " + relayGPIOs[i-1] + "</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue +"><span class=\"slider\"></span></label>";
    }
    return buttons;
  }
  return String();
}

String relayState(int numRelay){
  if(RELAY_NO){
    if(digitalRead(relayGPIOs[numRelay-1])){
      return "";
    }
    else {
      return "checked";
    }
  }
  else {
    if(digitalRead(relayGPIOs[numRelay-1])){
      return "checked";
    }
    else {
      return "";
    }
  }
  return "";
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);

  // Set all relays to off when the program starts - if set to Normally Open (NO), the relay is off when you set the relay to HIGH
  for(int i=1; i<=NUM_RELAYS; i++){
    pinMode(relayGPIOs[i-1], OUTPUT);
    if(RELAY_NO){
      digitalWrite(relayGPIOs[i-1], HIGH);
    }
    else{
      digitalWrite(relayGPIOs[i-1], LOW);
    }
  }
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP8266 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Send a GET request to <ESP_IP>/update?relay=<inputMessage>&state=<inputMessage2>
  server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    String inputMessage2;
    String inputParam2;
    // GET input1 value on <ESP_IP>/update?relay=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1) & request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
      inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
      inputParam2 = PARAM_INPUT_2;
      if(RELAY_NO){
        Serial.print("NO ");
        digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());
      }
      else{
        Serial.print("NC ");
        digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());
      }
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage + inputMessage2);
    request->send(200, "text/plain", "OK");
  });
  // Start server
  server.begin();
}
  
void loop() 
{

}

The purpose of the code above is to switch the relay state by pressing the button on the web page. The code above allows you to insert several buttons to control numerous relays. To do this you need to change the number of relays, which can be configured in the line of code below.

#define NUM_RELAYS  1

The relay control pin was configured for GPIO 4, which is defined in programming through the line of code below.

int relayGPIOs[NUM_RELAYS] = {5};

Using these configurations, activation tests were carried out with a lamp supplied from the mains with a voltage of 220V.

The connection system to the electrical grid is quite simple. The board is made up of 2 terminals: one for the mains supply and the other with connection to the relay terminals. The user must choose between the normally open or normally closed contacts of the relay to connect the load. In this project we use normally open contact.

See the figure below with the lamp connected to the circuit board.

As can be seen, the system presented the desired result and guaranteed safety in the process of activating the load connected to the electrical system.

There are several types of projects that you can develop using this electronic board to control several devices. In this application we use a lamp, however, you can make modifications to control other devices, like a: motors, pumps, actuators, etc.

The electronic project is available and you can download all the files and electronic schematics.

We would like to thank PCBWAY for supportting the creation of this project and made some units available for you to earn for free and receive 5 units at your home.

To receive them, access this link, create an account on the website and receive coupons for you to win right now.