Build Instructions

Collapse

• 1

  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.

• 2

  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
  • Green = ON
  • Grey = OFF

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

• 3

  Code Overview

  #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 toggle(int i){
    *buttons[i].state = !*buttons[i].state;
    digitalWrite(buttons[i].pin, *buttons[i].state ? HIGH : LOW);
    drawButton(buttons[i]);
  }
  
  void setup(){
    Serial.begin(115200);
  
    pinMode(PIN_L1, OUTPUT);
    pinMode(PIN_L2, OUTPUT);
    pinMode(PIN_L3, OUTPUT);
    pinMode(PIN_L4, OUTPUT);
  
    digitalWrite(PIN_L1, LOW);
    digitalWrite(PIN_L2, LOW);
    digitalWrite(PIN_L3, LOW);
    digitalWrite(PIN_L4, LOW);
  
    lcd.init();
    lcd.setBrightness(255);
    drawUI();
  
    Serial.println("✅ ESP32-S3 4 Lights Touch UI Ready");
  }
  
  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;
        }
      }
    }
  }

  The code has three main responsibilities:

  1. Initialize the display using LovyanGFX
  2. Draw four touch buttons on the screen
  3. 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.

View all 4 instructions