XIAO ESP32 Home Automation Shield

Greetings and welcome back.

This is a home automation shield that was created from scratch for the XIAO ESP32 C3/S3 boards. It has an integrated, separate power supply and can power a 240V AC while setting up a system.

Using the XIAO ESP32 C3 or S3 Development Board, the goal was to create a basic home automation shield with two relay outputs that may be used to operate a variety of AC or even DC devices.

Two buttons are used to control the status of the relay through a basic web application whose source code is attached to the main sketch.

Let us get started; this Instructables covers the project's entire construction procedure.

These were the components used in this project-

• Custom PCB Provided by Seeed Studio
• XIAO ESP32 C3/S3
• Relay Module 5V Omron G5PA-1
• AC to 5V DC SMPS Module
• AO3400 Mosfet
• 10K Resistor
• 1K Resistor
• 0603 Green LED
• M7 Diode
• 3D-printed Frame
• DC Screw terminal Connector
• M2 Screws

We will use two 5V relay modules to control the AC load; to drive these relays, we used a Mosfet switch setup, which functions as a switch that can be turned ON or OFF by providing a voltage to its gate.

A 10K resistor connects the Mosfet's gate to the XIAO MCU's I/O pin.

In addition, we attached an indicator led to the I/O pin of the XIAO MCU and placed it close to each relay. The indicator LED will glow when the relay is turned on or off.

We installed an isolated SMPS to power this arrangement with AC power, which converts AC 240V into the steady 5V needed for the MCU to function.

Subsequently, we export the netlist from the schematic and convert the entire board into a PCB file. To keep the AC and DC components apart, we first draw a square outline of the board, placing the SMPS and relay on one side and the XIAO with the remaining electronics on the other.

We later added few aesthetic markings to the PCB and sent it to Seeed Fusion for samples.

The PCB was ordered in a blue solder mask with white silkscreen.

PCBs were received in a week, and their quality was super good considering the rate, which was also pretty low.

Seeed Fusion PCB Service offers one-stop prototyping for PCB manufacture and PCB assembly, and as a result, they produce superior-quality PCBs and fast turnkey PCBAs within 7 working days.

This XIAO HOME AUTOMATION Board's PCB quality is SUPER COOL!

Seeed Studio Fusion PCB Assembly Service takes care of the entire fabrication process, from Seeed Studio Fusion Agile manufacturing and hardware customization to parts sourcing, assembly, and testing services, so you can be sure that they are getting a quality product.

After gauging market interest and verifying a working prototype, Seeed Propagate Service can help you bring the product to market with professional guidance and a strong network of connections.

Next is the PCB assembly process.

• Using a solderpaste syringe, we first add solderpaste (we are using normal SnPb 63/37 solderpaste) to the pads of each component in the PCB assembly process.
• The SMD resistors, LEDs, Mosfets, XIAO Module, and diodes are then selected and arranged in their proper locations.

In order to heat the PCB to the solder paste melting temperature, we carefully lift the board and place it on an SMT hotplate. Solder paste melts, and components are attached to their pads as soon as the board reaches the solder paste's melting temperature.

This board is being reflowed utilizing a previously completed PCB hotplate project; for further information, see this article.

• Subsequently, we collect every THT component, comprising the relay module, screw connectors, and SMPS module.
• Using a standard soldering iron, we arrange them all in their proper places and secure them to their pads.
• Next, we added the WiFi antenna to XIAO's BT/WIFI antenna connector.
• The PCB has now been completed.

• This step was optional, but we designed a basic stand for the Home Automation board that elevates it slightly off the ground. It also has four mounting brackets that can be used to fasten the board to anything with screws or a cable tie.
• The stand was constructed from white PLA that was 40% infill and printed with a layer height of 0.2 mm through a 0.8 mm nozzle.
• To secure the circuit and the 3D mount together, four M2 screws were used.

Here's the sketch used in this built-

#include <WiFi.h>


// Replace with your network credentials
const char *ssid = "ADDYOURSSID";
const char *password = "ASSYOURPASS";

// 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 = 3; //RELAY2
const int ledPin1 = 1; //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("");
  }
}

This code sets up a simple web server using an ESP32/ESP8266 (Arduino with WiFi capabilities) to control two loads (possibly relays) through a web interface. Let's break down the main components and functionality:

Include Libraries:

#include <WiFi.h>

This line includes the WiFi library for ESP32/ESP8266, allowing the device to connect to a WiFi network.

Network Configuration:

const char *ssid = "ADDYOURSSID";
const char *password = "ASSYOURPASS";

Replace "ADDYOURSSID" with your WiFi network name and "ASSYOURPASS" with your WiFi password.

Web Server Setup:

WiFiServer server(80);

Creates a web server on port 80.

Pin Assignments:

const int output1 = 0;  // RELAY1
const int output2 = 3;  // RELAY2
const int ledPin1 = 1;  // LED1
const int ledPin2 = 2;  // LED2

Associates GPIO pins with the loads (relays) and LEDs.

Setup Function:

void setup() {...}

• Initializes serial communication and sets up pins.
• Connects to the WiFi network.
• Prints the local IP address and starts the web server.

Loop Function:

void loop() {...}

• Listens for incoming clients (web browser requests).
• When a client connects, it reads the HTTP request.
• Parses the request to determine if the user is turning the loads (RELAY1 and RELAY2) ON or OFF.
• Updates the state of the loads and corresponding LEDs.
• Sends an HTML response to the client with the current state and buttons to control the loads.

HTML Response:The HTML response includes a simple webpage with buttons to control the loads. The state of each load (ON or OFF) is displayed, and the buttons allow the user to toggle the state.

The web page also includes some basic styling with CSS.

The response is sent back to the client or browser to be displayed.

Note:This code assumes that the loads are connected to GPIO pins 0 and 3, and LEDs are connected to GPIO pins 1 and 2.

The functionality is quite straightforward: the ESP32/ESP8266 acts as a web server, and users can control two loads remotely through a web interface. The loads are switched on or off by clicking buttons on the web page served by the ESP32/ESP8266.

We copy the IP address displayed in the serial monitor after uploading the sketch; this IP address will serve as the webapp link.

Here's a test video that shows the workings of the home automation device.

We added an AC cord to the AC terminal of the home automation device. To make sure the device is getting the proper voltage, we check the AC voltage using a multimeter.

Next, we connected an AC light to the relay module's AC terminals and turned on the AC source by following the provided wiring schematic.

We connect through the webapp using the IP address we got from the serial monitor after uploading the sketch.

Using the web app, we are able to toggle the AC light on and off by pressing the button in the web app.

This project was successful because we can use this board to turn any appliance into a smart internet of things appliance. We can connect the relay directly to an existing power board and connect the AC switch in parallel with it to divert current through the relay and turn on the AC appliance that is connected to that switch.

Since this configuration is essentially a switch that connects to and disconnects from two ports, we can also add DC Load with relay.

By using XIAO in this project, we get super fast IEEE 802.11 b/g/n WiFi connectivity, which improves the connectivity range and makes everything run super fast.

By adding the SMPS supply to the PCB, we can easily power the whole board via AC source, which is especially helpful if we want to fit this setup outside where it is hard ti get 5V.

This project is complete, and all the files are available. Let me know if you need additional information about this project.

Thanks to Seeed Studio 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!