Description

Smart Extension Board with ESP8266

Hello everyone, and today's useful project is a SMART EXTENSION BOARD that can be utilized to switch two AC loads via a web app.

This project's brains and brawn are really a custom board made of an ESP8266 board controlling two relays to switch two different loads.

The extension board was designed with AC sockets that are connected through the home automation board's relays so that by toggling each relay, we can control the state of each load. I needed a smart switch for control two loads in my workplace.

I've created a DUAL RELAY home automation board in the past, which uses an ESP8266 to control two separate relays to switch two outputs or loads.

The XYZ equipment attached to two relays can be operated by the user by accessing the home automation device's WEB PAGE and pressing the buttons.

This article is about the whole built process of the smart expansion board, so let's get started with the built.

Materials Required

These were the materials used in this built-

Home Automation Board from previous project
3D Printed parts
AC Sockets
Copper wire AC-rated.
Extension cord
USB Port
5V 2A SMPS salvaged from a smartphone charger

Handling AC Source

Working with 240V AC electricity can be very dangerous if proper safety precautions are not taken. Here are some safety tips you should follow when handling 240V AC:

Turn off the power: Before you begin working with any electrical circuit, turn off the power at the breaker or fuse box. Use a non-contact voltage tester to confirm that the power is off.
Wear protective gear: Always wear appropriate personal protective equipment (PPE) such as insulated gloves, goggles, and rubber-soled shoes.
Use insulated tools: When working with live circuits, use insulated tools to avoid accidental contact with live wires.
Avoid working in wet conditions: Never work with electrical circuits when you or the surroundings are wet. Water can conduct electricity and increase the risk of electrocution.
Don't touch live wires: Never touch a live wire or electrical component with your bare hands or any conductive object. Use insulated tools to make contact with live wires.
Keep a safe distance: Always maintain a safe distance from electrical equipment or wires, and make sure that others stay away from the work area.
Seek help if necessary: If you are not comfortable working with electrical circuits, or if the task is beyond your skill level, seek help from a qualified electrician.

Remember, electricity is a powerful force that can be dangerous if not handled properly. By following these safety precautions, you can reduce the risk of injury and stay safe while working with 240V AC electricity.

Concept

The idea was to design an expansion board with a unique twist—in this case, the addition of the home automation board that I had previously created.

It consists of a custom PCB that PCBWAY provided, and the entire circuit is built on a straightforward ESP07S basic setup connected with two separate mosfet acting as switches to control two 5V Relays.

There's an onboard isolated Dual output SMPS on the circuit as well which converts the AC into 3.3V for the ESP to work and 5V for Relay to work.

Relay's NO and NC are linked with the AC's live wire and what we did was, we added live from relay to AC Socket's live connector and added neutral to all ac sockets.

This configuration connected two sockets with a relay, which, when turned ON or OFF, stops power from entering the AC socket.

This was the electrical work. For creating a mechanical body, In Fusion360, we modelled a body that has the home automation circuitry, three AC outlets, and even a little area for adding an additional 5V 2A SMPS so we can add USB functionality to this socket.

To extend or output 5V 2A from the SMPS, a USB board was designed, and that board was afterwards sent to PCBWAY for samples.

Home Automation Board

Here is the home automation board that will be used in this project; it is an ESP07S Module, an ESP8266 board, and it only needs four 10K resistors connected to various GPIO pins, like with all ESP8266 boards.

To control the outputs, we incorporate two relays into the design. Each relay is controlled by two N-Channel Mosfets arranged in a switch arrangement, and its gates are wired to GPIOs 4 and 0.

Also, we connect two LEDs to GPIO15 and GPIO2, which will be added near each relay when the components are placed on the PCB layout and will serve as an indicator when the relays are toggled.

This project does not incorporate an LDO, which is typically required when working with 5V input and ESP Modules to step down the 5V into 3.3V.

We utilize an AC-isolated power supply module in place of an LDO, which converts 240V AC into 5V and 3.3V filtered DC (It has two output voltages).

I have made an article about this board which you can check out here-

https://www.hackster.io/Arnov_Sharma_makes/home-automation-board-with-esp8266-dual-output-75f5b3

CODE and WEB APP

Check out the main sketch, which is attached in the code section.

We first edit the SSID and PASSWORD in the sketch
next we upload the code into the ESP07S Module using the NODEMCU Programmer
after uploading, we open the serial Monitor and copy the IP Address shown when the ESP gets connected to WiFi.
We paste the IP Address in any browser and WEB APP will open up which can be used to toggle two outputs.

The web app is completely customized and is made completely from a single sketch without using any third-party tools.

This sketch is a fusion of classic embedded C language and HTML with a little bit of CSS.

We set up the HTML page in this sketch by the below lines.

// Display the HTML web page client.println("<!DOCTYPE html><html>"); client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"); client.println("<link rel=\"icon\" href=\"data:,\">"); // CSS to style the on/off buttons // Feel free to change the background-color and font-size attributes to fit your preferences client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}"); client.println(".button { background-color: #5B196A; border: none; color: white; padding: 16px 40px;"); client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}"); client.println(".button2 {background-color: #5B196A;}</style></head>"); // Web Page Heading client.println("<body><h1>HOME AUTOMATION DUAL OUTPUT</h1>"); // Display current state, and ON/OFF buttons for OUTPUT1 client.println("<p>LOAD1 - State " + output1State + "</p>");

We have 4 outputs (two relays and two LEDs), which were declared at the start of the sketch.

const int output1 = 0; //RELAY1 const int output2 = 4; //RELAY2 const int ledPin1 = 15; //LED1 const int ledPin2 = 2; //LED2

Please note that this setup will only work if the ESP8266 and the device that you're browsing the APP on the same network.(LOCAL NETWORK OPERATION)

PCBWAY

After the PCB design for the USB Extension board was completed, Gerber data was generated and then sent to PCBWAY for samples.

An order was placed for the PCBs with white solder masks and black silkscreen, as they look pretty cool in general.

The PCBs were received within a week, and they were excellent, as expected.

As a leading China PCB manufacturer, PCBWay offers one-stop PCB manufacturing services,

ranging from raw material and electronic component procurement and in-house PCB fabrication to PCB assembly, testing, and shipping.

Check out PCBWay service for getting great PCB service at a lower cost.

PCB Assembly

The USB Board was quite easy to put together because only three USB Sockets needed to be attached to their PCB pads and soldered in place using a soldering iron.

Getting 5V 2A SMPS from a Smartphone Charger

A 5V smartphone charger circuit typically uses a switched-mode power supply (SMPS) to convert AC voltage from a wall outlet to DC voltage at a lower voltage level suitable for charging a smartphone. Here are some of the key details about an SMPS-based 5V smartphone charger circuit:

Input voltage: The input voltage for the charger circuit is typically 100-240V AC, which is the range of standard AC power outlets in most countries.
Rectification: The AC voltage from the wall outlet is rectified using a bridge rectifier to convert it to a pulsating DC voltage.
Filtering: The rectified voltage is then filtered using a capacitor to smooth out the pulsations in the DC voltage
Switching: The filtered voltage is fed into a switching circuit, which uses a high-frequency oscillator to rapidly switch the voltage on and off.
Transformer: The switched voltage is then passed through a transformer to step down the voltage to a lower level.
Rectification and filtering: The stepped-down voltage is rectified and filtered again to obtain a clean DC output voltage.
Voltage regulation: The DC output voltage is regulated using a voltage regulator circuit to ensure that it remains at a steady 5V.
Output protection: The charger circuit may also include various protection features, such as overcurrent protection, overvoltage protection, and thermal protection, to prevent damage to the smartphone or the charger circuit itself.

Overall, an SMPS-based 5V smartphone charger circuit is a highly efficient and compact way to convert AC voltage to DC voltage for charging a smartphone. It is capable of delivering a high current output while maintaining a stable and reliable voltage level.

Extension Board Assembly

Using M3 nuts and bolts, we first add the AC sockets to their positions on the 3D Body to begin the assembly process.
The AC Wires are then connected to the relay and socket using the accompanying wiring diagram.
We then use hot glue to permanently fix the home automation board in position.
The USB Board is then attached using hot glue.
Next, we connect the USB Board to the 5V side of the 5V SMPS that we added to the AC Source.
The exposed AC wires are then covered with hot glue to keep the SMPS in place and avoid shorting.
Finally, the 3D enclosure receives a lid, and the assembly is finished.

Result

The final result of this project is a functional smart extension board constructed from scratch and has three 5V 2A USB ports, one direct socket, and two load outputs for adding two AC Loads.

I have a 240V AC room cooler attached to this extension bar for the demonstration of the gadget, and yes, it can be turned ON or OFF by using the online app for the home automation system.

Do leave a comment if you need any help regarding this project.

This is it for today folks.

Thanks PCBWAY for supporting this project, you guys can check them out if you need great PCB and stencil service for less cost and great quality.

And I'll be back with a new project pretty soon!

Code

code

C/C++

#include <ESP8266WiFi.h>

// Replace with your network credentials
const char *ssid = "JioFiber-nCDgC";
const char *password = "jiexaifieXai5chu";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String output1State = "off";
String output2State = "off";

// Assign output variables to GPIO pins
const int output1 = 0; //RELAY1
const int output2 = 4; //RELAY2
const int ledPin1 = 15; //LED1
const int ledPin2 = 2; //LED2


void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(output1, OUTPUT);
  pinMode(output2, OUTPUT);

  //LEDs
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);  
  // Set outputs to LOW
  digitalWrite(output1, LOW);
  digitalWrite(output2, LOW);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected()) {            // loop while the client's connected
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /1/on") >= 0) {
              Serial.println("LOAD1 on");
              output1State = "on";
              digitalWrite(output1, HIGH);
              digitalWrite(ledPin1, HIGH);
            } else if (header.indexOf("GET /1/off") >= 0) {
              Serial.println("LOAD1 off");
              output1State = "off";
              digitalWrite(output1, LOW);
              digitalWrite(ledPin1, LOW);
            } else if (header.indexOf("GET /2/on") >= 0) {
              Serial.println("LOAD2 on");
              output2State = "on";
              digitalWrite(output2, HIGH);
              digitalWrite(ledPin2, HIGH);
            } else if (header.indexOf("GET /2/off") >= 0) {
              Serial.println("LOAD2 off");
              output2State = "off";
              digitalWrite(output2, LOW);
              digitalWrite(ledPin2, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #5B196A; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #5B196A;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>HOME AUTOMATION DUAL OUTPUT</h1>");
            
            // Display current state, and ON/OFF buttons for OUTPUT1 
            client.println("<p>LOAD1 - State " + output1State + "</p>");
           
            // If the output1State is off, it displays the ON button       
            if (output1State=="off") {
              client.println("<p><a href=\"/1/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/1/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<p>LOAD2 - State " + output2State + "</p>");
            
            // If the output4State is off, it displays the ON button       
            if (output2State=="off") {
              client.println("<p><a href=\"/2/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/2/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Schematic and Layout

wiring

BOPARD.jpg

CAD-Custom parts and enclosures

cad

extensionboard v1.step

Download Gerbers

May 08,2023

476 views

Smart Extension Board with ESP8266

Made a smart expansion board with help of an custom ESP07S Based PCB and few 3D Printed parts

476

Published: May 08,2023

Download Gerber file 3

PCBWay Donate 10% cost To Author

Add to cart

*PCBWay community is a sharing platform. We are not responsible for any design issues and parameter issues (board thickness, surface finish, etc.) you choose.

Copy this HTML into your page to embed a link to order this shared project

Copy