Week 3 — Capacitive Touch on XIAO ESP32-S3

Concept

What is Capacitive Touch?

👆

Your body is a conductor

Your skin carries a tiny electrical charge. When you touch a wire connected to a GPIO pin, you change the electrical field around it.

📏

The chip measures change

The ESP32-S3 reads a number. When nothing touches the wire: low number (~22,000). When you touch: high number (~100,000+).

🎚️

You set the threshold

You decide: "above 50,000 = touched." Every setup is different. Use the live dashboard below to find YOUR numbers.

💡 Key difference from regular ESP32

On ESP32-S3 (our board): higher number = touched. On older ESP32: lower number = touched. Old tutorials may have it backwards!

What the numbers look like

~22,000

Not touching

Baseline · varies by board

~100,000+

Finger touching

Spikes up when touched

↑ idle · set threshold somewhere in between · touched ↑

⚠️ Your numbers will be different

Baseline values depend on your specific board, wire length, humidity, desk surface, and nearby electronics. Always measure YOUR values first using the dashboard. Do not hardcode 80,000 without checking.

Hardware

Pin Map & Wiring

The XIAO ESP32-S3 has 13 touch-capable pins (pink labels in the diagram). We use 2 for this test, and 4 for the Touch-Pad project.

TOUCH — pink = touch pin GPIO — blue = digital ANALOG — orange = analog POWER — red = 3.3V / 5V GND — black = ground

2-Key Test Wiring (this experiment)

A1 / GPIO2

→

KEY 1 — connect a jumper wire. Touch the wire end or insulation.

Also labeled TOUCH2 on the pinout diagram

A3 / GPIO4

→

KEY 2 — connect a jumper wire. Touch the wire end or insulation.

Also labeled TOUCH4 on the pinout diagram

A0 / A2

→

GND GUARDS — optional. Connect to GND. These reduce interference between keys.

No code needed for these — just wire them to GND physically

USB-C

→

Connect to your computer. Powers the board and sends serial data.

ℹ️ The wire IS the sensor

You do not need any extra components. Just a jumper wire plugged into the pin. The wire itself acts as the touch electrode. Longer wire = more sensitive. Larger surface area at the end = more sensitive.

Touch pin reference table

XIAO Label	GPIO Number	Arduino name	Touch-Pad use	Available?
D0 / A0	GPIO1	touchRead(1)	LEFT	✓ touch
D1 / A1	GPIO2	touchRead(2)	UP / KEY 1	✓ touch
D2 / A2	GPIO3	touchRead(3)	DOWN	✓ touch
D3 / A3	GPIO4	touchRead(4)	RIGHT / KEY 2	✓ touch
D4 / A4	GPIO5	—	—	SDA (I2C)
D5 / A5	GPIO6	—	—	SCL (I2C)

Electrode types — what works best?

📌

Bare pin tip

Very small area. Works only when directly touched.

sensitivity: low

🔌

Insulated wire

Plastic sleeve increases area + adds dielectric. Better signal.

sensitivity: medium

🥢

Foil / copper tape pad

Large flat surface. Works even with hovering nearby.

sensitivity: high

🧵

Conductive fabric

Soft, wearable. Good for toy skins and soft buttons.

sensitivity: high

Code

Arduino Sketch — 2-Key Test

This sketch reads two touch pins and sends the values over USB to your computer. You will use the Live Dashboard (next section) to see the values in real time.

1

Open Arduino IDE

Make sure you have the esp32 by Espressif board package installed. Board: XIAO_ESP32S3. Port: the USB port your board is on.
2

Copy the code below

Click the copy button on the code block. Paste into a new Arduino sketch.
3

Upload to your board

Click the Upload arrow (→). Wait for "Done uploading." The board resets automatically.
4

Open the Live Dashboard below

Do NOT open Arduino Serial Monitor — that will block the dashboard. Go directly to the Dashboard section on this page.

cap_touch_2key_test.ino

// XIAO ESP32-S3 — Cap Touch 2-Key Test
// KEY 1: A1 pin (GPIO2 / TOUCH2)
// KEY 2: A3 pin (GPIO4 / TOUCH4)
// Optional GND guards: A0, A2 wired to GND (no code needed)

void setup() {
  Serial.begin(115200);
  Serial.println("KEY1,KEY2");  // CSV header for dashboard
}

void loop() {
  int key1 = touchRead(A1);  // GPIO2 / TOUCH2
  int key2 = touchRead(A3);  // GPIO4 / TOUCH4

  // Send as CSV — dashboard reads this format
  Serial.print(key1);
  Serial.print(",");
  Serial.println(key2);

  delay(50);  // 20 readings per second
}

✅ What the serial output looks like

You will see lines like: 22813,23377 — two numbers separated by a comma. First is KEY 1, second is KEY 2. Numbers jump up when you touch.

Live Dashboard

Read Your Touch Values

This tool runs directly in Chrome. It reads the serial data from your board and shows live graphs, values, and helps you find the right threshold for your setup.

1

Make sure your board is plugged in

USB-C cable connected. Sketch already uploaded (see Code section above).
2

Click "Connect Serial" below

A popup will appear. Select the port that says usbmodem (Mac) or COM (Windows). Click Connect.
3

Click "Auto-calibrate baseline (3s)"

Keep your hands away from the wires for 3 seconds. This sets the resting value for your specific board.
4

Touch KEY 1 and KEY 2 a few times

Watch the values spike. The "suggested thresh" in the Stats section will calculate the best threshold for you automatically.
5

Use Macro + Micro sliders to set threshold

Macro = big moves (step 5,000). Micro = fine tuning (step 100). Each key can have its own threshold — use the Per-Key section if KEY 1 and KEY 2 behave differently.

⚠️ Chrome / Edge only

WebSerial does not work in Safari or Firefox. Use Google Chrome or Microsoft Edge for the dashboard to work.

Live Dashboard

Cap Touch Monitor v2

Opens in a new tab — use Chrome or Edge. Reads your board over USB via WebSerial.

Open Dashboard →

Troubleshooting

When Things Don't Work

Problem	Fix	Why
Dashboard shows no data	Close Arduino Serial Monitor. It blocks the port. Reconnect in dashboard.	Only one program can use the serial port at a time.
Connect Serial button does nothing	Switch to Chrome or Edge browser. Safari does not support WebSerial.	WebSerial API is only in Chromium-based browsers.
Touch does not register (stays idle)	Lower the threshold with the Macro slider. Try 30,000 first. Or use a larger electrode (foil pad, more wire).	Your baseline may be lower than expected, or your electrode has low sensitivity.
Triggers without touching (false touch)	Raise the threshold. Also check if any wire is touching a metal surface or another wire.	Noise or cross-talk between pins causes false readings.
KEY 1 and KEY 2 have very different sensitivities	Use the Per-Key Threshold section. Set different thresholds for each key.	Different wire lengths, bends, or electrode sizes change each pin's baseline independently.
Values jump around a lot (noisy)	Move away from power supplies, phone chargers, and fluorescent lights. Try on a wooden surface instead of metal desk.	Electromagnetic interference couples into the unshielded wires.
Insulated wire more sensitive than bare pin tip	This is normal! The plastic sleeve increases contact area and acts as a dielectric layer. This is good — it means more of your finger touches the sensor area.	Capacitance = area × material factor ÷ distance. More area + dielectric = more signal.
Works on desk but not in finished project	Re-run auto-calibrate in the final assembly. The enclosure material, metal parts, and power supply all affect the baseline. Always calibrate in the final context.	Capacitive touch is affected by everything nearby. Lab results ≠ field results.

📊 Data collection tip

Before drawing conclusions about your setup, test with at least 3 different electrode types (bare pin, insulated wire, foil pad) in the same conditions. One observation on a desk with loose wires is not enough data to know what is happening.

Common questions

Why does it work through plastic and tape? +

Capacitance works through insulators. Your phone screen has glass on top of the sensors. You can put tape or thin plastic over your touch wire — it often works better because the plastic adds surface area for your finger to contact.

Does humidity affect the readings? +

Yes. Humid air conducts slightly. Your threshold values may need adjustment on rainy days vs dry winter days. This is also why you should always auto-calibrate at the start of a session, not rely on yesterday's numbers.

Can I use the I2C pins (GPIO5, GPIO6) for touch? +

Technically yes — they are touch-capable. But we use GPIO5 and GPIO6 for the OLED display (SDA and SCL). If you try to use them for touch at the same time as the OLED, things will break. Stick to GPIO1–4 for touch when using the OLED.

Why does removing the GND guard wires seem to change nothing? +

This is an open question that needs more testing. Early observations suggest the guards may not have a big effect in this particular configuration on a desk. But we need more data — different setups, different environments, and tests inside an actual enclosure — before we can say anything definitive. Keep testing and note your conditions carefully.

How do I make a bigger touch area? +

Connect the pin to a larger conductor: copper tape, aluminum foil, or conductive fabric. Larger area means more capacitance change when your finger approaches, which means higher signal delta and easier detection. This is how commercial capacitive buttons work — the visible copper pad on a PCB is the electrode, not just the pin.

Project

Touch-Pad Controller with OLED

Once you understand the 2-key test, you are ready to build the full Touch-Pad. This uses 4 touch pins to make a directional controller that shows arrows on the OLED display.

📚 Required library

Go to: Sketch → Include Library → Manage Libraries → Search Adafruit SH110X → Install. Also install Adafruit GFX Library when prompted.

Touch-Pad pin mapping

XIAO Label	GPIO	Direction	Wire Color (suggestion)
D0	GPIO1	LEFT ←	Red
D1	GPIO2	UP ↑	Green
D2	GPIO3	DOWN ↓	Blue
D3	GPIO4	RIGHT →	Yellow

CapTouchDPad_V2.ino

/*
 * CapTouchDPad_V2.ino — Touch-Pad Visualizer
 * XIAO ESP32-S3 + SH1106G OLED
 *
 * Wiring:
 *   D0 (GPIO 1) → LEFT wire
 *   D1 (GPIO 2) → UP wire
 *   D2 (GPIO 3) → DOWN wire
 *   D3 (GPIO 4) → RIGHT wire
 *   OLED: SDA=GPIO5, SCL=GPIO6 (I2C default)
 */
#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

// Threshold — adjust after calibration!
const int THRESHOLD = 80000;

int vL, vU, vD, vR;

void setup() {
  Serial.begin(115200);
  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("Touch-Pad Ready!");
  display.display();
  delay(500);
}

void drawArrow(int x, int y, int dir, bool active) {
  if (active) display.fillCircle(x, y, 10, SH110X_WHITE);
  else        display.drawCircle(x, y, 10, SH110X_WHITE);
  int c = active ? SH110X_BLACK : SH110X_WHITE;
  if (dir == 0) { // Left
    display.drawLine(x+4,y, x-4,y, c);
    display.drawLine(x-4,y, x,y-4, c);
    display.drawLine(x-4,y, x,y+4, c);
  } else if (dir == 1) { // Up
    display.drawLine(x,y+4, x,y-4, c);
    display.drawLine(x,y-4, x-4,y, c);
    display.drawLine(x,y-4, x+4,y, c);
  } else if (dir == 2) { // Down
    display.drawLine(x,y-4, x,y+4, c);
    display.drawLine(x,y+4, x-4,y, c);
    display.drawLine(x,y+4, x+4,y, c);
  } else { // Right
    display.drawLine(x-4,y, x+4,y, c);
    display.drawLine(x+4,y, x,y-4, c);
    display.drawLine(x+4,y, x,y+4, c);
  }
}

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

  bool tL = vL > THRESHOLD;
  bool tU = vU > THRESHOLD;
  bool tD = vD > THRESHOLD;
  bool tR = vR > THRESHOLD;

  display.clearDisplay();
  int cx=64, cy=32, sp=22;
  drawArrow(cx-sp, cy,    0, tL);
  drawArrow(cx,    cy-sp, 1, tU);
  drawArrow(cx,    cy+sp, 2, tD);
  drawArrow(cx+sp, cy,    3, tR);

  // Raw values in corners for calibration
  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);  // ~60fps
}

⚠️ Change THRESHOLD after calibration

The code uses THRESHOLD = 80000 as a starting point. Use the 2-key test + dashboard first to find YOUR board's actual values, then update this number in the Touch-Pad code.

🔗 Full project page

The original Touch-Pad project page with additional exercises and build prompts is at: b.parsons.edu/~gitmany/courses/week3/project1-captouch-dpad.html

Feel the TouchNo buttons needed.

What is Capacitive Touch?

Your body is a conductor

The chip measures change

You set the threshold

What the numbers look like

Pin Map & Wiring

2-Key Test Wiring (this experiment)

Touch pin reference table

Electrode types — what works best?

Bare pin tip

Insulated wire

Foil / copper tape pad

Conductive fabric

Arduino Sketch — 2-Key Test

Open Arduino IDE

Copy the code below

Upload to your board

Open the Live Dashboard below

Read Your Touch Values

Make sure your board is plugged in

Click "Connect Serial" below

Click "Auto-calibrate baseline (3s)"

Touch KEY 1 and KEY 2 a few times

Use Macro + Micro sliders to set threshold

When Things Don't Work

Common questions

Touch-Pad Controller with OLED

Touch-Pad pin mapping

Feel the Touch
No buttons needed.