Introduction
Step 1: The Idea
Step 2: Hardware Used
Step 3: Wiring Overview
Step 4: Building the Touch UI with LovyanGFX
Step 5: Code Overview (High-Level
Step 6: Testing & Working Demo
Step 7: Watch the Full Build Video
Step 8: Taking the Project to the Next Level – What JUSTWAY Offers
Step 9: Final Thoughts

Published February 27, 2026 © GPL3+

Turning a Simple Home Switchboard into a Smart Touch Control

Touchscreen smart switchboard with ESP32-S3: control 4 lights locally, clear ON/OFF UI no app no cloud instant response

BeginnerShowcase (no instructions)1 hour1,640

Turning a Simple Home Switchboard into a Smart Touch Control

Things used in this project

Hardware components

ESP32S3 Box 3

Seeed Studio Grove - 4-Channel SPDT Relay

Jumper wires (generic)

Software apps and online services

Arduino IDE

Story

Introduction

Home automation projects usually look impressive in videos, but when you try building one yourself, things quickly become messy — loose wires, random modules on the desk, and half-finished enclosures.

In this tutorial, we build a clean, touch-based controller using the ESP32-S3 Box 3 that can control four lights locally, without any app or cloud dependency. This project is beginner-friendly, works offline, and is perfect as a practical home automation demo or hackathon prototype.

[IMAGE: Final assembled project – touchscreen mounted near switchboard]

Step 1: The Idea

Most homes still rely on traditional mechanical switchboards. They work fine, but they don’t provide visual feedback or flexibility for future automation.

Instead of replacing every switch with expensive smart switches, this project replaces the control logic behind the switchboard with a single touchscreen panel.The goal is simple: big buttons, clear ON/OFF feedback, instant response, and no internet dependency.

Step 2: Hardware Used

For this build, you’ll need:

ESP32-S3 Box 3 (with built-in touchscreen)
4-channel relay module
Jumper wires
5V power supply

The ESP32 handles the UI and touch input, while the relay module switches the actual loads (lights).

Step 3: Wiring Overview

Each light is controlled by one relay channel, and each relay channel is driven by one GPIO pin on the ESP32-S3:

GPIO 10 → Light 1
GPIO 14 → Light 2
GPIO 13 → Light 3
GPIO 21 → Light 4

Power the relay module using 5V and GND.Note: Many relay boards are active-low, so ON/OFF logic may appear inverted.

Step 4: Building the Touch UI with LovyanGFX

LovyanGFX is used to handle the display and touch input.The UI is kept intentionally minimal:

Four large buttons

Four large button
Green = ON
Grey = OFF

This makes the system easy to use for anyone, even without technical knowledge.

Step 5: Code Overview (High-Level)

The code has three main responsibilities:

Initialize the display using LovyanGFX
Draw four touch buttons on the screen
Toggle GPIO pins when a button is touched

Each button maps to one GPIO pin. When a button is pressed, the ESP32 toggles the corresponding relay.

Step 6: Testing & Working Demo

After uploading the code and powering the system:

Tap a button on the screen
The relay switches
The light turns ON or OFF instantly

Because everything runs locally on the ESP32, the system works even when Wi-Fi is unavailable.

Step 7: Watch the Full Build Video

I’ve also documented the complete build process in a step-by-step video, including wiring, UI design, and live testing.If you prefer learning by watching, this will help you follow along and build the same project easily.

👉 Watch the full video here:

Step 8: Taking the Project to the Next Level – What JUSTWAY Offers

A prototype with loose wires and a bare PCB is fine for testing. But when you want to present your project at a tech fair, demo day, or pitch session, presentation matters.

This is where professional fabrication and enclosure services become useful. Instead of exposed electronics, you can package your project in a proper casing and make it look like a real product.

JUSTWAY offers multiple manufacturing options that support different stages of hardware development:

Rapid Prototyping – fast turnaround, DFM feedback, online quoting
CNC Machining – precise aluminum and steel parts for strong enclosures
Sheet Metal Fabrication – laser-cut and bent metal frames and casings
Injection Molding – prototype molds and production tooling
Urethane Casting – low-volume, production-quality parts
3D Printing – transparent resin for aesthetic enclosures, nylon for durable functional parts

These options don’t change how your circuit works — they change how your project is presented and perceived.

Step 9: Final Thoughts

This ESP32-S3 touchscreen controller shows how you can move from basic GPIO control to a clean, usable interface without adding cloud complexity.

From here, you can extend the project with timers, a web dashboard, voice control, or energy monitoring. Even in its current form, it demonstrates how UI design and physical presentation can take a DIY project closer to a real product.

Code

Code

#include <Arduino.h>

#define LGFX_ESP32_S3_BOX_V3
#include <LGFX_AUTODETECT.hpp>
#include <LovyanGFX.hpp>

static LGFX lcd;

// ===== PINS =====
#define PIN_L1 10
#define PIN_L2 14
#define PIN_L3 13
#define PIN_L4 21

bool l1=false, l2=false, l3=false, l4=false;

struct Btn { int x,y,w,h; const char* label; bool* state; int pin; };
Btn buttons[] = {
  {20, 60, 130, 60, "Light 1", &l1, PIN_L1},
  {170,60, 130, 60, "Light 2", &l2, PIN_L2},
  {20, 140,130, 60, "Light 3", &l3, PIN_L3},
  {170,140,130,60, "Light 4", &l4, PIN_L4},
};

void drawButton(Btn &b){
  lcd.fillRoundRect(b.x, b.y, b.w, b.h, 14, *b.state ? TFT_GREEN : TFT_DARKGREY);
  lcd.drawRoundRect(b.x, b.y, b.w, b.h, 14, TFT_WHITE);
  lcd.setFont(&fonts::FreeSansBold9pt7b);
  lcd.setTextColor(TFT_WHITE);
  lcd.setTextDatum(middle_center);
  lcd.drawString(b.label, b.x + b.w/2, b.y + b.h/2);
}

void drawUI(){
  lcd.fillScreen(TFT_BLACK);

  lcd.setFont(&fonts::FreeSansBold12pt7b);
  lcd.setTextColor(TFT_GREEN);
  lcd.setTextDatum(middle_center);
  lcd.drawString("ESP32-S3 Smart Lights", 160, 25);

  for(auto &b : buttons) drawButton(b);
}

void applyRelayState(int pin, bool isOn){
  // 🔁 Inverted logic for active-low relay:
  // ON  -> LOW
  // OFF -> HIGH
  digitalWrite(pin, isOn ? LOW : HIGH);
}

void toggle(int i){
  *buttons[i].state = !*buttons[i].state;
  applyRelayState(buttons[i].pin, *buttons[i].state);
  drawButton(buttons[i]);
}

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

  pinMode(PIN_L1, OUTPUT);
  pinMode(PIN_L2, OUTPUT);
  pinMode(PIN_L3, OUTPUT);
  pinMode(PIN_L4, OUTPUT);

  // 🔁 Initial state: OFF (active-low relay => HIGH)
  applyRelayState(PIN_L1, false);
  applyRelayState(PIN_L2, false);
  applyRelayState(PIN_L3, false);
  applyRelayState(PIN_L4, false);

  lcd.init();
  lcd.setBrightness(255);
  drawUI();

  Serial.println("✅ ESP32-S3 4 Lights Touch UI Ready (Active-Low Relay Logic)");
}

void loop(){
  uint16_t x, y;

  if(lcd.getTouch(&x, &y)){
    for(int i=0;i<4;i++){
      Btn &b = buttons[i];
      if(x > b.x && x < b.x + b.w && y > b.y && y < b.y + b.h){
        toggle(i);
        delay(250); // debounce
        break;
      }
    }
  }
}

Credits

Rohan Barnwal

43 projects • 38 followers

Rohan Barnwal - maker, hacker, tech enthusiast. I explore new tech & find innovative solutions. See my projects on hackster.io!

Turning a Simple Home Switchboard into a Smart Touch Control