ESP32 Project

Five-Channel RGB LED Controller

In this project, I build a five-channel RGB LED controller using two ESP32 boards, PWM output stages, an ILI9341 touchscreen display, and I2C communication between the two controllers.

The controller can drive five separate RGB LED channels. Each RGB channel needs three individual outputs for red, green, and blue, so the final controller uses 15 PWM outputs in total.

DIY ElektroBox five-channel RGB LED controller with touchscreen display

Master ESP32Handles the ILI9341 touchscreen interface and sends selected RGB values over I2C.

Slave ESP32Receives channel and color data, then controls the RGB PWM output stages.

Output channelsFive separate RGB LED channels with 15 PWM outputs in total.

1. Required Parts

Controllers2 ESP32 development boards.

DisplayILI9341 touchscreen display module.

PrototypeBreadboard, Dupont wires, resistors, and test LEDs.

Output stageTransistors or suitable logic-level MOSFETs.

Final lightingRGB LED strips and external power supply.

OptionalCustom PCB, display housing, electronics housing, and screws.

2. Required Tools

Soldering iron
Solder wire
Wire cutter
Wire stripper
Multimeter
Computer with Arduino IDE
USB cables for the ESP32 boards
Optional PCB design software and 3D printer

3. Project Structure

For more complex projects, I like to start with simple subsystem prototypes. This makes the project easier to debug because every function can be tested separately before everything is combined.

PWM color and brightness control

Transistor or MOSFET output stage

Touchscreen display test

I2C communication between two ESP32 boards

Final five-channel RGB controller

PCB and housing design

4. Test the PWM Color Control

The brightness of each LED color is controlled with PWM. PWM stands for Pulse Width Modulation. The ESP32 switches the output on and off very quickly. By changing the duty cycle, the average power delivered to the LED changes and the LED appears brighter or darker.

For the first prototype, connect one red, one green, and one blue LED to three transistor output stages. In this example, the ESP32 uses GPIO16 for red, GPIO17 for green, and GPIO5 for blue.

PWM test code

ESP32 RGB PWM test

const int redPin = 16;
const int greenPin = 17;
const int bluePin = 5;

void setup() {
  ledcAttach(redPin, 5000, 8);
  ledcAttach(greenPin, 5000, 8);
  ledcAttach(bluePin, 5000, 8);
}

void loop() {
  ledcWrite(redPin, 255);
  ledcWrite(greenPin, 0);
  ledcWrite(bluePin, 0);
  delay(1000);

  ledcWrite(redPin, 0);
  ledcWrite(greenPin, 255);
  ledcWrite(bluePin, 0);
  delay(1000);

  ledcWrite(redPin, 0);
  ledcWrite(greenPin, 0);
  ledcWrite(bluePin, 255);
  delay(1000);
}

5. Output Stage

LED strips need more current than an ESP32 pin can provide. The ESP32 PWM pins should only control the gate or base of the output stage. The LED strip current flows through the external transistor or MOSFET.

For reliable operation, use suitable logic-level MOSFETs and make sure the LED power supply is dimensioned for all channels at full brightness.

RGB LED controller prototype with touchscreen

Prototype setup with touchscreen control and RGB output testing.

Important: The ESP32 and LED strip power supply must share a common ground. Without a shared ground, the PWM signal does not have a stable reference.

6. Touchscreen Interface

The master ESP32 handles the touchscreen display. It shows the user interface and allows selecting channels, colors, and brightness values.

7. I2C Communication

Because the touchscreen already uses many pins, I split the system into two controllers. The master ESP32 sends the selected channel and RGB values to the slave ESP32 over I2C. The slave ESP32 then updates the PWM outputs.

I2C data concept

A simple message can contain the selected channel number and three color values. For example: channel 3, red 120, green 40, blue 255.

Example I2C payload

Channel: 3
Red:     120
Green:   40
Blue:    255

8. Final Software Structure

The final controller uses two separate Arduino sketches. The Master ESP32 runs the touchscreen menu, stores the RGB values for five independent channels, converts the selected color into RGB565, and sends the active channel data to the slave controller over I2C.

The Slave ESP32 listens as an I2C receiver at address 0x42. It receives three bytes from the master, converts the RGB565 color back into 8-bit red, green, and blue values, and updates the PWM outputs for the selected RGB LED channel.

Master sketch Touchscreen user interface, tab menu, RGB sliders, RGB565 conversion, and I2C transmission.

Slave sketch I2C reception, RGB565 decoding, five-channel color storage, and 15 PWM outputs.

I2C message The master sends three bytes: channel index, RGB565 high byte, and RGB565 low byte.

Touch input → Master ESP32 updates the selected channel and slider values

Master ESP32 → converts the selected RGB color into RGB565

I2C message → channel index + RGB565 high byte + RGB565 low byte

Slave ESP32 → decodes RGB565 back to red, green, and blue

PWM outputs → drive the selected RGB LED channel through the output stage

LED_Controller_Master.ino

Upload this sketch to the ESP32 connected to the ILI9341 touchscreen. This board is the user interface controller and sends the selected channel color to the slave ESP32.

LED_Controller_Master.ino

/*
  ——————————————————————–
  ESP32 TFT_eSPI + XPT2046_Touchscreen
  5x RGB Channels with Tab Menu (SNAP + I2C TX)
  ——————————————————————–
  • 3 vertical sliders for R, G, B, snapping every 10% (0,25,51,…,255)
  • 5 independent RGB channels, selected via tab menu
  • Touch updates values; display via TFT_eSPI (VSPI), touch via XPT2046 (HSPI)
  • Sends current channel + color as:
        [channel_index (0..4), RGB565_MSB, RGB565_LSB]
    over I2C to 0x42
  • Screen rotated 90° clockwise vs previous version (TFT rotation = 2)
  ——————————————————————–
*/

#include <SPI.h>
#include <Wire.h>
#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>

TFT_eSPI tft = TFT_eSPI();

// —- Touch configuration (HSPI) —-
#define TOUCH_CS   26
#define TOUCH_IRQ  25
SPIClass touchSPI(HSPI);
XPT2046_Touchscreen ts(TOUCH_CS, TOUCH_IRQ);

// —- Touch calibration —-
#define TS_MINX 200
#define TS_MAXX 3800
#define TS_MINY 200
#define TS_MAXY 3800

// —- I2C (Master) —-
#define I2C_SDA        21
#define I2C_SCL        22
#define I2C_FREQ       100000
#define I2C_SLAVE_ADDR 0x42  // receiver address

// —- UI constants —-
#define HEADER_H    28
#define TAB_H       24
#define PREVIEW_H   60
#define SLIDER_GAP  20
#define SLIDER_W    60
#define DEBOUNCE_MS 80
#define SNAP_STEP   25      // ~10% steps across 0–255
#define BOX_SIZE    20      // retained for compatibility with earlier spec

// —- Channels —-
#define NUM_CHANNELS 5

// —- GPIO output —-
#define GPIO_OUT_PIN 17   // <— your pin

// —- Globals —-
int sliderX[3];
int sliderY, sliderH;

int tabX[NUM_CHANNELS];
int tabW;

uint8_t currentChannel = 0;  // 0..4

uint8_t rgb[NUM_CHANNELS][3];      // rgb[channel][component 0=R,1=G,2=B]
uint8_t lastRgb[NUM_CHANNELS][3];

unsigned long lastTouchTime = 0;

// ————————————————————
// Init color arrays
void initColors() {
  for (int ch = 0; ch < NUM_CHANNELS; ch++) {
    for (int c = 0; c < 3; c++) {
      rgb[ch][c]     = 128; // mid level
      lastRgb[ch][c] = 255; // force first draw/send
    }
  }
}

// ————————————————————
void drawHeader() {
  tft.fillRect(0, 0, tft.width(), HEADER_H, TFT_BLACK);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.setTextDatum(TC_DATUM);
  tft.drawString(“5x RGB Sliders (Snap 10%)”, tft.width() / 2, HEADER_H / 2);
}

// ————————————————————
void drawTabs() {
  tabW = tft.width() / NUM_CHANNELS;
  int y0 = HEADER_H;
  int y1 = HEADER_H + TAB_H;

  // Clear tab area
  tft.fillRect(0, y0, tft.width(), TAB_H, TFT_BLACK);

  tft.setTextDatum(MC_DATUM);
  for (int ch = 0; ch < NUM_CHANNELS; ch++) {
    tabX[ch] = ch * tabW;
    bool active = (ch == currentChannel);

    uint16_t borderColor = TFT_WHITE;
    uint16_t fillColor   = active ? TFT_DARKGREY : TFT_BLACK;

    tft.fillRect(tabX[ch], y0, tabW, TAB_H, fillColor);
    tft.drawRect(tabX[ch], y0, tabW, TAB_H, borderColor);

    // Label: “CH1”, “CH2”, …
    char label[8];
    sprintf(label, “CH%d”, ch + 1);
    tft.setTextColor(TFT_WHITE, fillColor);
    tft.drawString(label, tabX[ch] + tabW / 2, y0 + TAB_H / 2);
  }
}

// ————————————————————
void drawSliderValue(uint8_t idx) {
  // idx: 0=R,1=G,2=B for the CURRENT channel
  uint8_t val = rgb[currentChannel][idx];

  int y = sliderY + sliderH – map(val, 0, 255, 0, sliderH);
  uint16_t color = (idx == 0) ? TFT_RED : (idx == 1) ? TFT_GREEN : TFT_BLUE;

  // Clear slider area
  tft.fillRect(sliderX[idx] + 1, sliderY + 1, SLIDER_W – 2, sliderH – 2, TFT_BLACK);

  // Draw filled region
  tft.fillRect(sliderX[idx] + 2, y, SLIDER_W – 4, sliderH – (y – sliderY) – 2, color);

  // Grid lines every 10%
  for (int i = 1; i < 10; i++) {
    int gy = sliderY + (sliderH * i) / 10;
    tft.drawFastHLine(sliderX[idx] + 2, gy, SLIDER_W – 4, TFT_DARKGREY);
  }

  // Value label
  tft.setTextDatum(MC_DATUM);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  char buf[8];
  sprintf(buf, “%3d”, val);
  tft.drawString(buf, sliderX[idx] + SLIDER_W / 2, sliderY + sliderH + 10);
}

// ————————————————————
void drawSliders() {
  // Compute slider area taking header + tabs + preview into account
  sliderY = HEADER_H + TAB_H + 10;
  sliderH = tft.height() – sliderY – PREVIEW_H – 20;

  int totalW = (3 * SLIDER_W) + (2 * SLIDER_GAP);
  int startX = (tft.width() – totalW) / 2;

  // Clear slider area
  tft.fillRect(0, sliderY – 2, tft.width(), sliderH + 40, TFT_BLACK);

  for (int i = 0; i < 3; i++) {
    sliderX[i] = startX + i * (SLIDER_W + SLIDER_GAP);
    uint16_t color = (i == 0) ? TFT_RED : (i == 1) ? TFT_GREEN : TFT_BLUE;
    tft.drawRect(sliderX[i], sliderY, SLIDER_W, sliderH, color);
    drawSliderValue(i);
  }
}

// ————————————————————
void drawPreview() {
  int y0 = tft.height() – PREVIEW_H;
  uint8_t r = rgb[currentChannel][0];
  uint8_t g = rgb[currentChannel][1];
  uint8_t b = rgb[currentChannel][2];

  uint16_t color = tft.color565(r, g, b);
  tft.fillRect(0, y0, tft.width(), PREVIEW_H, color);

  float luma = 0.299f * r + 0.587f * g + 0.114f * b;
  uint16_t txtColor = (luma > 128) ? TFT_BLACK : TFT_WHITE;
  tft.setTextColor(txtColor, color);
  tft.setTextDatum(MC_DATUM);

  char label[32];
  sprintf(label, “CH%d Result”, currentChannel + 1);
  tft.drawString(label, tft.width() / 2, y0 + PREVIEW_H / 2);
}

// ————————————————————
bool readTouchPixel(int &x, int &y) {
  if (!ts.touched()) return false;
  TS_Point p = ts.getPoint();

  // Map raw touch to screen coordinates
  x = map(p.x, TS_MINX, TS_MAXX, 0, tft.width());
  y = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());
  x = constrain(x, 0, tft.width() – 1);
  y = constrain(y, 0, tft.height() – 1);
  return true;
}

// ————————————————————
// Now sends channel index + RGB565
void sendRGB565_I2C(uint8_t channel, uint16_t rgb565) {
  Wire.beginTransmission(I2C_SLAVE_ADDR);
  Wire.write(channel);                   // channel index 0..4
  Wire.write((uint8_t)(rgb565 >> 8));    // MSB
  Wire.write((uint8_t)(rgb565 & 0xFF));  // LSB
  Wire.endTransmission();
}

// ————————————————————
void printColorAndSend() {
  uint8_t r = rgb[currentChannel][0];
  uint8_t g = rgb[currentChannel][1];
  uint8_t b = rgb[currentChannel][2];

  uint32_t hex = ((uint32_t)r << 16) | ((uint32_t)g << 8) | b;
  uint16_t rgb565 = tft.color565(r, g, b);

  Serial.printf(“CH%d: RGB(%3u,%3u,%3u) HEX=0x%06X RGB565=0x%04X\n”,
                currentChannel + 1, r, g, b, hex, rgb565);

  sendRGB565_I2C(currentChannel, rgb565);
}

// ————————————————————
void setup() {
  Serial.begin(115200);
  Serial.println(“5x RGB Slider (Snap + I2C TX) demo starting…”);
  delay(500);

  pinMode(GPIO_OUT_PIN, OUTPUT);
  digitalWrite(GPIO_OUT_PIN, HIGH);   // drive pin 17 high
  delay(500);

  initColors();

  // Display
  tft.init();
  // Rotate screen 90° clockwise compared to previous (1 -> 2)
  tft.setRotation(2);
  tft.fillScreen(TFT_BLACK);

  drawHeader();
  drawTabs();
  drawSliders();
  drawPreview();

  // Touch on HSPI
  touchSPI.begin(14, 12, 13, TOUCH_CS);  // SCK, MISO, MOSI, CS
  ts.begin(touchSPI);
  // Keep relative orientation with TFT (3 -> 0 is +1 step / 90° cw)
  ts.setRotation(0);

  // I2C master
  Wire.begin(I2C_SDA, I2C_SCL, I2C_FREQ);

  printColorAndSend();
}

// ————————————————————
void loop() {
  int x, y;
  if (readTouchPixel(x, y)) {
    unsigned long now = millis();
    if (now – lastTouchTime < DEBOUNCE_MS) return;
    lastTouchTime = now;

    // —- Tab handling —-
    int tabsY0 = HEADER_H;
    int tabsY1 = HEADER_H + TAB_H;
    if (y >= tabsY0 && y < tabsY1) {
      if (tabW > 0) {
        int ch = x / tabW;
        if (ch >= 0 && ch < NUM_CHANNELS && ch != currentChannel) {
          currentChannel = ch;
          drawTabs();
          drawSliders();
          drawPreview();
          printColorAndSend();
        }
      }
      delay(80);
      return;
    }

    // —- Slider handling —-
    for (int i = 0; i < 3; i++) {
      if (x >= sliderX[i] && x < sliderX[i] + SLIDER_W &&
          y >= sliderY && y < sliderY + sliderH) {

        int val = map(sliderY + sliderH – y, 0, sliderH, 0, 255);
        val = constrain(val, 0, 255);

        // Snap to nearest 10%
        val = ((val + (SNAP_STEP / 2)) / SNAP_STEP) * SNAP_STEP;
        val = constrain(val, 0, 255);

        rgb[currentChannel][i] = val;

        if (rgb[currentChannel][i] != lastRgb[currentChannel][i]) {
          drawSliderValue(i);
          drawPreview();
          printColorAndSend();
          lastRgb[currentChannel][i] = rgb[currentChannel][i];
        }
        delay(80);
      }
    }
  }
}

LED_Controller_Slave.ino

Upload this sketch to the ESP32 connected to the RGB output stages. This board receives the selected color and updates the PWM pins for the five RGB LED channels.

LED_Controller_Slave.ino

/*
  ——————————————————————–
  ESP32 I2C RGB Receiver for 5 Channels (analogWrite version)
  ——————————————————————–
  • I2C slave at address 0x42
  • Expects 3 bytes per message:
        [channel_index (0..4), RGB565_MSB, RGB565_LSB]
  • Converts RGB565 -> 8-bit R,G,B
  • Outputs PWM via analogWrite() on these pins:

        CH1: R1 = GPIO2,  G1 = GPIO0,  B1 = GPIO15
        CH2: R2 = GPIO16, G2 = GPIO17, B2 = GPIO4
        CH3: R3 = GPIO18, G3 = GPIO19, B3 = GPIO5
        CH4: R4 = GPIO12, G4 = GPIO14, B4 = GPIO13
        CH5: R5 = GPIO26, G5 = GPIO25, B5 = GPIO27

  ——————————————————————–
*/

#include <Arduino.h>
#include <Wire.h>

// I2C address (must match your sender)
#define I2C_SLAVE_ADDR 0x42

// Channels & colors
const uint8_t NUM_CHANNELS = 5;
const uint8_t NUM_COLORS   = 3; // R, G, B

// Indexes for readability
enum { COL_R = 0, COL_G = 1, COL_B = 2 };

// Pin mapping for each channel (R,G,B)
const int rgbPins[NUM_CHANNELS][NUM_COLORS] = {
  // CH1
  {  2,  0, 15 },  // R1, G1, B1
  // CH2
  { 16, 17,  4 },  // R2, G2, B2
  // CH3
  { 18, 19,  5 },  // R3, G3, B3
  // CH4
  { 12, 14, 13 },  // R4, G4, B4
  // CH5
  { 26, 25, 27 }   // R5, G5, B5
};

// Store current 8-bit colors (for debug / future use)
uint8_t colors[NUM_CHANNELS][NUM_COLORS];

// ————————————————————
// Convert 16-bit RGB565 -> 8-bit R,G,B
// ————————————————————
void rgb565To888(uint16_t rgb565, uint8_t &r, uint8_t &g, uint8_t &b) {
  uint8_t r5 = (rgb565 >> 11) & 0x1F; // 5 bits
  uint8_t g6 = (rgb565 >> 5)  & 0x3F; // 6 bits
  uint8_t b5 =  rgb565        & 0x1F; // 5 bits

  // Expand to 8 bits
  r = (r5 << 3) | (r5 >> 2);  // 5 -> 8 bits
  g = (g6 << 2) | (g6 >> 4);  // 6 -> 8 bits
  b = (b5 << 3) | (b5 >> 2);  // 5 -> 8 bits
}

// ————————————————————
// Apply R,G,B to one channel (0..4) using analogWrite
// Only this channel is touched; others keep their last PWM
// ————————————————————
void setChannelColor(uint8_t ch, uint8_t r, uint8_t g, uint8_t b) {
  if (ch >= NUM_CHANNELS) return;

  // Save current color (for debugging / optional reuse)
  colors[ch][COL_R] = r;
  colors[ch][COL_G] = g;
  colors[ch][COL_B] = b;

  // Update ONLY this channel’s pins
  analogWrite(rgbPins[ch][COL_R], r);
  analogWrite(rgbPins[ch][COL_G], g);
  analogWrite(rgbPins[ch][COL_B], b);

  Serial.printf(“Set CH%d -> R=%3u G=%3u B=%3u\n”,
                ch + 1, r, g, b);
}

// ————————————————————
// I2C receive interrupt callback
// called when master sends data
// ————————————————————
void onReceive(int numBytes) {
  // Process data in chunks of 3 bytes: [ch, msb, lsb]
  while (Wire.available() >= 3) {
    uint8_t ch  = Wire.read();          // channel 0..4
    uint8_t msb = Wire.read();
    uint8_t lsb = Wire.read();

    uint16_t rgb565 = ((uint16_t)msb << 8) | lsb;

    uint8_t r, g, b;
    rgb565To888(rgb565, r, g, b);

    Serial.printf(“I2C recv: ch=%u, rgb565=0x%04X -> R=%3u G=%3u B=%3u\n”,
                  ch, rgb565, r, g, b);

    // Only this channel is updated; others remain untouched
    setChannelColor(ch, r, g, b);
  }
}

// ————————————————————
void setupPins() {
  for (int ch = 0; ch < NUM_CHANNELS; ch++) {
    for (int c = 0; c < NUM_COLORS; c++) {
      pinMode(rgbPins[ch][c], OUTPUT);
      analogWrite(rgbPins[ch][c], 0);  // start all off at boot
    }
  }
}

// ————————————————————
void setup() {
  Serial.begin(115200);
  Serial.println(“\nI2C RGB Receiver (analogWrite) starting…”);

  setupPins();

  // Clear color array
  for (int ch = 0; ch < NUM_CHANNELS; ch++) {
    for (int c = 0; c < NUM_COLORS; c++) {
      colors[ch][c] = 0;
    }
  }

  // Optional: explicitly set resolution/frequency on newer ESP32 cores
  // analogWriteResolution(8);   // 0–255
  // analogWriteFrequency(5000); // 5 kHz

  // I2C slave init
  Wire.begin(I2C_SLAVE_ADDR);   // ESP32 Arduino: slave mode with address
  Wire.onReceive(onReceive);

  Serial.printf(“I2C slave listening on 0x%02X\n”, I2C_SLAVE_ADDR);
}

// ————————————————————
void loop() {
  // Nothing to do here; all work handled in onReceive()
}

9. Common Problems

The LED strip does not light up

Check the power supply, shared ground, MOSFET wiring, and LED strip polarity.

The colors are swapped

Check the channel order. Some LED strips or wiring layouts use a different RGB order.

The touchscreen works but the LEDs do not react

Check the I2C wiring, addresses, pull-up resistors, and whether both ESP32 boards are powered.

10. Final Result

The final controller uses a touchscreen as the user interface and a second ESP32 for the RGB output channels. This keeps the project modular and makes the wiring easier to understand.

The design can be expanded with saved presets, animations, Wi-Fi control, or a custom PCB for a cleaner final build.