Arduino Easy Smart Home Series: Smart Device Controller with 8-Relay & 2 Servo Pins (ESP8266/ESP32)

Arduino Smart Device Controller with 8-Relay & 2 Servo Pins (ESP8266/ESP32)

Transform your home into a smart space with this DIY project! 🚀 Using a single ESP8266 or ESP32, you can control 8 relays and 2 servo motors locally through a sleek Darkstar-themed web interface. Perfect for makers, students, and electronics enthusiasts who want to learn practical automation, hardware integration, and web interfaces in one comprehensive project.

Table of Contents

• Introduction
• Required Hardware
• Arduino IDE Setup
• Wiring the Components
• ESP8266/ESP32 Code (Single File)
• How It Works
• Testing Your Project
• Advanced Modifications
• Common Issues and Troubleshooting
• Learning Insights
• Conclusion

1. Introduction

Home automation is not just a luxury: it’s a practical way to manage multiple devices efficiently and safely. In this project, you’ll build a controller capable of operating up to 8 relays and 2 servo motors using a single ESP8266 or ESP32. Unlike IoT projects requiring cloud servers, this system runs entirely locally on your WiFi network. This makes it highly secure, low-latency, and perfect for hands-on learning. You’ll gain practical experience in microcontroller programming, hardware integration, and web-based control interfaces.

Whether you want to automate lights, fans, window blinds, or small appliances, this project gives you a strong foundation. By the end, you’ll understand how to serve interactive webpages from an ESP device, manage multiple hardware components simultaneously, and design an intuitive web interface for real-time control.

2. Required Hardware

Here’s a detailed list of components you’ll need for this project, along with approximate prices:

• ESP8266 (NodeMCU) or ESP32 (~₹700-₹1200) – the main microcontroller hosting the webserver.
• 8-Channel Relay Module (~₹350-₹500) – controls devices like lights, fans, and appliances.
• 2 Servo Motors (~₹150-₹300 each) – for controlling blinds, doors, or other mechanical movements.
• Jumper Wires (~₹100) – for all connections between the microcontroller, relays, and servos.
• Breadboard (~₹200, optional) – useful for prototyping without soldering.
• 5V Power Supply (~₹250) – ensures stable power for relays and servos.
• Arduino IDE installed on your PC – for writing and uploading the code.
• Optional: LEDs for visual feedback, resistors, and push buttons for manual override.

Having the right hardware is essential. Using a separate 5V supply for the relays and servos ensures they operate reliably without causing brownouts to the ESP8266/32. Additionally, small LEDs in parallel with relays can provide visual confirmation that your devices are toggled correctly.

3. Arduino IDE Setup

Before uploading the code, you need to set up your Arduino IDE correctly for ESP8266 or ESP32 boards:

1. Open Arduino IDE → File → Preferences → Additional Board URLs → Add:
   • For ESP8266: http://arduino.esp8266.com/stable/package_esp8266com_index.json
   • For ESP32: https://dl.espressif.com/dl/package_esp32_index.json
2. Go to Tools → Board → Board Manager → Install “ESP8266” or “ESP32” boards.
3. Select your board in Tools → Board (NodeMCU 1.0 for ESP8266 or ESP32 Dev Module).
4. Install required libraries:
   • ESP8266WiFi (or WiFi.h for ESP32)
   • Servo
5. Check your port in Tools → Port and select the correct COM port.

This setup ensures your ESP8266/32 can host a webserver and interact with relays and servo motors seamlessly.

4. Wiring the Components

Proper wiring is critical for both safety and functionality. Follow these steps:

• Connect each relay module input (IN1–IN8) to ESP pins D0–D7.
• Connect the VCC and GND of the relay module to 5V and GND of your power supply. If your ESP board is 3.3V, don’t power the relays from it directly.
• Attach the servo motors to PWM pins D8 and D9.
• Connect servo VCC to 5V (separate power recommended) and GND to the common ground.
• Optional: Connect LEDs in parallel with relays for visual feedback.

Double-check the wiring before powering up. Using a breadboard initially allows you to test all connections without soldering. Ensure a common ground exists between ESP, relay module, and servos to prevent erratic behavior.

5. ESP8266/ESP32 Code (Single File)

This is a complete code that handles 8 relays, 2 servo motors, and serves a Darkstar-themed web interface from a single ESP8266/ESP32:

#include <ESP8266WiFi.h>  // Use <WiFi.h> for ESP32
#include <Servo.h>

const char* ssid = "Your_SSID";
const char* password = "Your_PASSWORD";

WiFiServer server(80);

Servo servo1;
Servo servo2;
int relayPins[8] = {D0,D1,D2,D3,D4,D5,D6,D7};
int servoPos[2] = {90,90};

void setup() {
  Serial.begin(115200);

  WiFi.begin(ssid,password);
  while(WiFi.status() != WL_CONNECTED){
    delay(500); Serial.print(".");
  }
  Serial.println("WiFi Connected");
  Serial.println(WiFi.localIP());
  server.begin();

  for(int i=0;i<8;i++){
    pinMode(relayPins[i],OUTPUT);
    digitalWrite(relayPins[i],LOW);
  }

  servo1.attach(D8);
  servo2.attach(D9);
  servo1.write(servoPos[0]);
  servo2.write(servoPos[1]);
}

void loop(){
  WiFiClient client = server.available();
  if(client){
    String request = client.readStringUntil('\r');
    client.flush();

    // Relay control
    for(int i=0;i<8;i++){
      if(request.indexOf("relay"+String(i+1)+"=on")>0) digitalWrite(relayPins[i],HIGH);
      if(request.indexOf("relay"+String(i+1)+"=off")>0) digitalWrite(relayPins[i],LOW);
    }

    // Servo control
    if(request.indexOf("servo1=")>0){
      int p = request.substring(request.indexOf("servo1=")+7).toInt();
      servoPos[0] = p; servo1.write(p);
    }
    if(request.indexOf("servo2=")>0){
      int p = request.substring(request.indexOf("servo2=")+7).toInt();
      servoPos[1] = p; servo2.write(p);
    }

    // Serve web page
    client.print("HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n");
    client.print("<!DOCTYPE html><html><head><style>");
    client.print("body {background:#0d0d0d;color:#00ff99;font-family:'Courier New',monospace;}");
    client.print("button {background:#111;color:#00ff99;border:2px solid #00ff99;padding:10px;margin:5px;cursor:pointer;}");
    client.print("button:hover {background:#00ff99;color:#0d0d0d;transition:0.3s;}");
    client.print(".slider{width:100%;}.container{max-width:600px;margin:auto;}h1{text-align:center;}");
    client.print("</style></head><body>");
    client.print("<div class='container'><h1>Smart Home Control - Darkstar</h1>");

    for(int i=0;i<8;i++){
      client.print("<button onclick='toggleRelay("+String(i+1)+")'>Relay "+String(i+1)+"</button>");
    }

    client.print("<br><br>Servo 1:<input type='range' min='0' max='180' value='"+String(servoPos[0])+"' class='slider' id='servo1' oninput='updateServo(1,this.value)'>");
    client.print("<br>Servo 2:<input type='range' min='0' max='180' value='"+String(servoPos[1])+"' class='slider' id='servo2' oninput='updateServo(2,this.value)'>");
    client.print("</div><script>");
    client.print("function toggleRelay(r){var xhr=new XMLHttpRequest();xhr.open('GET','/relay'+r+'='+((document.querySelector('button:nth-of-type('+r+')').innerText.indexOf('ON')>0)?'off':'on'),true);xhr.send();}");
    client.print("function updateServo(s,v){var xhr=new XMLHttpRequest();xhr.open('GET','/servo'+s+'='+v,true);xhr.send();}");
    client.print("</script></body></html>");
    client.stop();
  }
}

6. How It Works

This system runs entirely on the ESP8266/ESP32. The web interface uses buttons to toggle relays and sliders to adjust servo positions. AJAX requests are sent from the browser to the microcontroller, updating outputs in real-time. The Darkstar theme provides a visually appealing, dark mode interface, making it easier to monitor device status in low-light conditions.

7. Testing Your Project

1. Upload the code to ESP8266/ESP32.
2. Power the device and connect it to your WiFi.
3. Open the Serial Monitor to check the ESP IP address.
4. Enter the IP in your browser to access the Darkstar web UI.
5. Toggle relays and move servo sliders to confirm all devices respond correctly.
6. Observe Serial Monitor for debugging info if needed.

8. Advanced Modifications

• Integrate timers to schedule relay activation automatically.
• Add more servos or relays for larger smart home applications.
• Incorporate sensors (LDR, PIR, temperature) for automated responses.
• Enhance web UI with animations, icons, and mobile responsiveness.

9. Common Issues and Troubleshooting

• Relay does not toggle – check wiring, pin assignment, and power supply.
• Servo jitter – ensure correct PWM pins and voltage stability.
• Web page not loading – verify ESP IP and WiFi connection.
• Power brownouts – use a separate supply for relays and servos.
• Buttons not updating properly – clear browser cache or use a different browser.

10. Learning Insights

• Understand ESP8266/ESP32 webserver hosting and serving real-time web pages.
• Learn to integrate multiple hardware components like relays and servos.
• Experience AJAX requests for dynamic web-based control.
• Practice wiring best practices and voltage management.
• Gain insights into designing visually appealing web interfaces for IoT or home automation projects.

11. Conclusion

This project provides a **complete smart home control system** using a single ESP8266/ESP32. It demonstrates hardware-software integration, real-time control, and a professional Darkstar web interface. Expand it to include more devices, sensors, and automation logic. Ideal for makers aiming to learn full-stack embedded control, web UI design, and practical home automation. 💡

By Kaushal Haladi