The Big Picture: Traditional buttons require physical switches, wiring, and often external resistors. Capacitive touch uses the electrical properties of your body to detect contact - no moving parts, no extra components, just a wire and your finger.

Hardware Setup: Just connect a jumper wire to each pin. The wire itself IS the touch sensor! Let the wires hang freely - you'll touch the exposed metal ends or the insulation near the end.

Copy All Code

/*
 * CapTouchPinsIntro.ino
 * V2: D-Pad Visualizer
 *
 * Mapping:
 * D0 (GPIO 1) -> LEFT
 * D1 (GPIO 2) -> UP
 * D2 (GPIO 3) -> DOWN
 * D3 (GPIO 4) -> RIGHT
 */

#include <Adafruit_GFX.h>
#include <Adafruit_SH110X.h>
#include <Wire.h>

Adafruit_SH1106G display = Adafruit_SH1106G(128, 64, &Wire, -1);

// Touch Pins
const int PIN_LEFT = 1;  // D0
const int PIN_UP = 2;    // D1
const int PIN_DOWN = 3;  // D2
const int PIN_RIGHT = 4; // D3

int vL, vU, vD, vR;

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

  // XIAO ESP32S3 I2C pins
  Wire.begin(5, 6);
  Wire.setClock(400000);

  display.begin(0x3C, true);
  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(SH110X_WHITE);
  display.setCursor(0, 0);
  display.println("D-Pad Init...");
  display.display();
  delay(500);
}

void drawArrow(int x, int y, int dir, bool active) {
  // dir: 0=L, 1=U, 2=D, 3=R
  if (active)
    display.fillCircle(x, y, 10, SH110X_WHITE);
  else
    display.drawCircle(x, y, 10, SH110X_WHITE);

  int color = active ? SH110X_BLACK : SH110X_WHITE;

  if (dir == 0) { // Left
    display.drawLine(x + 4, y, x - 4, y, color);
    display.drawLine(x - 4, y, x, y - 4, color);
    display.drawLine(x - 4, y, x, y + 4, color);
  } else if (dir == 1) { // Up
    display.drawLine(x, y + 4, x, y - 4, color);
    display.drawLine(x, y - 4, x - 4, y, color);
    display.drawLine(x, y - 4, x + 4, y, color);
  } else if (dir == 2) { // Down
    display.drawLine(x, y - 4, x, y + 4, color);
    display.drawLine(x, y + 4, x - 4, y, color);
    display.drawLine(x, y + 4, x + 4, y, color);
  } else if (dir == 3) { // Right
    display.drawLine(x - 4, y, x + 4, y, color);
    display.drawLine(x + 4, y, x, y - 4, color);
    display.drawLine(x + 4, y, x, y + 4, color);
  }
}

void loop() {
  vL = touchRead(PIN_LEFT);
  vU = touchRead(PIN_UP);
  vD = touchRead(PIN_DOWN);
  vR = touchRead(PIN_RIGHT);

  // Detect touch - threshold calibrated for ESP32-S3
  // Touched = value > 80000
  bool tL = vL > 80000;
  bool tU = vU > 80000;
  bool tD = vD > 80000;
  bool tR = vR > 80000;

  display.clearDisplay();

  // D-Pad Layout
  int cx = 64;
  int cy = 32;
  int spacing = 22;

  drawArrow(cx - spacing, cy, 0, tL); // Left
  drawArrow(cx, cy - spacing, 1, tU); // Up
  drawArrow(cx, cy + spacing, 2, tD); // Down
  drawArrow(cx + spacing, cy, 3, tR); // Right

  // Show raw values (for calibration)
  display.setTextSize(1);
  display.setTextColor(SH110X_WHITE);

  display.setCursor(0, 0);
  display.print(vL);
  display.setCursor(50, 0);
  display.print(vU);

  display.setCursor(0, 56);
  display.print(vD);
  display.setCursor(50, 56);
  display.print(vR);

  display.display();
  delay(16);
}

1. Upload the code and watch the numbers in the corners of the display
2. Note values when NOT touching (typically ~20,000-30,000)
3. Note values when touching (typically ~80,000-150,000)
4. Set your threshold halfway between these values

Next Up: In Project 2, you'll use this D-Pad to control a cursor and draw on screen - building an Etch-A-Sketch!