ESP32-C3 Capacitive Touch Counter with Built-in OLED Display

This project demonstrates how to use a TTP223 capacitive touch sensor with an ESP32-C3 development board that includes a 0.42″ built-in OLED display. Each time the sensor is touched, a counter increases, and a short animation appears on the display to provide instant feedback. The result is a compact, interactive project that’s ideal for learning about capacitive touch sensing, digital I/O control, and OLED display handling on the ESP32-C3 platform.

Project Overview

The TTP223 capacitive touch sensor is a low-cost, easy-to-use module that detects human touch on its surface. It outputs a digital signal that changes state whenever a touch is detected. By connecting this sensor to the ESP32-C3, we can detect each touch event, increment a counter, and show the results on the built-in OLED screen.

This project is a great introduction for beginners who want to explore capacitive touch technology, I2C communication, and display interfacing using ESP32 boards. It’s also a good foundation for more advanced applications such as touch-based control panels, interactive IoT devices, and menu navigation systems.

Watch the full demonstration here: YouTube Tutorial

PCBWay offers high-quality PCB prototyping and assembly at an affordable price, starting at just $5 for 5 PCBs. With fast turnaround, great customer support, and easy online ordering, it’s a top choice for hobbyists and professionals alike.

Order PCB’s Now

Components Required

Component	Quantity	Description
ESP32-C3 OLED Board	1	Built-in 0.42″ SSD1306 OLED display
TTP223 Capacitive Touch Sensor	1	Detects touch input (digital signal output)
Jumper Wires	—	Male-female connection wires

Wiring Connection

TTP223 Pin	ESP32-C3 Pin	Description
VCC	3.3V	Power input
GND	GND	Ground
OUT	GPIO2	Digital signal output

You can connect the sensor’s OUT pin to any other digital GPIO, but make sure to update the pin number in the code accordingly.

Library Installation

Before uploading the code, install the U8g2 library for OLED display handling.

To install:

Open Arduino IDE
Go to Sketch → Include Library → Manage Libraries
Search for U8g2
Click Install

This library provides flexible and memory-efficient graphics support for small OLED and LCD screens.

Arduino Code

#include <Arduino.h>
#include <U8g2lib.h>
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

#define SDA_PIN 5
#define SCL_PIN 6
#define TOUCH_PIN 2  // OUT pin of TTP223 sensor

U8G2_SSD1306_72X40_ER_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE, SCL_PIN, SDA_PIN);

int touchCount = 0;
bool lastState = HIGH;

void setup(void) {
  Serial.begin(115200);
  pinMode(TOUCH_PIN, INPUT);
  Wire.begin(SDA_PIN, SCL_PIN);
  u8g2.begin();

  u8g2.clearBuffer();
  u8g2.setFont(u8g2_font_ncenB08_tr);
  u8g2.drawStr(5, 20, "Touch Counter");
  u8g2.sendBuffer();
  delay(1500);
}

void loop(void) {
  bool currentState = digitalRead(TOUCH_PIN);

  if (lastState == HIGH && currentState == LOW) {
    touchCount++;
    showTouchAnimation();
  }

  lastState = currentState;
  delay(30);
}

void showTouchAnimation() {
  for (int i = 0; i < 2; i++) {
    u8g2.clearBuffer();
    u8g2.setFont(u8g2_font_ncenB08_tr);
    u8g2.drawStr(10, 15, "Touched!");
    u8g2.drawStr(10, 35, "Count:");
    u8g2.setCursor(55, 35);
    u8g2.print(touchCount);
    u8g2.sendBuffer();
    delay(150);
  }

  u8g2.clearBuffer();
  u8g2.setFont(u8g2_font_ncenB08_tr);
  u8g2.drawStr(5, 15, "Touch Count:");
  u8g2.setFont(u8g2_font_fub20_tr);
  char buf[10];
  sprintf(buf, "%d", touchCount);
  u8g2.drawStr(25, 38, buf);
  u8g2.sendBuffer();
  delay(500);
}

How It Works

The ESP32-C3 board reads the digital signal output from the TTP223 sensor. When a touch is detected, the sensor’s output briefly goes LOW, which is captured by the ESP32-C3. Each detection increments the touch counter and triggers a short on-screen animation that flashes the word “Touched!” followed by the updated count.

The onboard OLED display is driven by the U8g2 library, which supports multiple display types and fonts. The SDA and SCL pins are defined manually (SDA = GPIO5, SCL = GPIO6) to match the ESP32-C3 board’s internal connections. This configuration ensures smooth I2C communication with the built-in OLED.

Applications

Touch-activated counters
Touch-based input systems
Game triggers or scoring systems
Interactive menu navigation
DIY human-machine interfaces
Educational touch-sensor experiments

Summary

Feature	Description
MCU	ESP32-C3
Sensor	TTP223 Capacitive Touch
Display	0.42″ SSD1306 OLED (built-in)
Power	3.3V
Communication	Digital I/O

Final Thoughts

This small but engaging project shows how to integrate a TTP223 capacitive touch sensor with the ESP32-C3’s built-in OLED display to create an interactive touch counter. It’s an excellent starting point for learning how touch sensors work and how to provide immediate visual feedback on compact displays. Once you understand the basics, you can expand it into touch-controlled menus, smart counters, or IoT input modules for advanced applications.