dreamstack/docs/fabric-display-build-guide.md

# Fabric Display Build Guide

> **Goal:** Build an interactive, networked display on fabric — combining the electroluminescent textile concepts from [Shi et al. (Nature, 2021)](https://www.nature.com/articles/s41586-021-03295-8) and the LED-on-fabric approach from [Carpetlight / LED Professional](https://www.led-professional.com/resources-1/articles/lighting-fabrics-a-new-approach-for-flexible-light-sources).

---

## 1. Technology Landscape

The two source articles represent opposite ends of the same spectrum:

| | Nature Paper (EL Textile) | Carpetlight (LED Fabric) |
|---|---|---|
| **Light source** | ZnS:Cu phosphor EL units at warp-weft contacts | Discrete SMD LEDs on miniature PCBs |
| **Pixel pitch** | ~800µm (research-grade) | ~10–20mm (commercial) |
| **Addressing** | AC field at fiber intersections | Standard LED driver (DMX/PWM) |
| **Flexibility** | Fully woven, machine-washable | Rip-stop polyamide, rollable |
| **DIY feasibility** | Lab-only (ionic gel electrodes, custom fibers) | **Highly practical** |
| **Interactivity** | Demonstrated textile keyboard (capacitive) | External control only |

**Bottom line:** The Nature paper's exact process (ionic gel transparent electrodes, ZnS:Cu phosphor-coated fibers, industrial weaving) is not reproducible outside a materials science lab. But its *architecture* — a woven grid where intersections are pixels, with integrated capacitive touch — can be replicated using commercially available components.

---

## 2. Three Practical Build Approaches

### Approach A: Addressable LED Matrix on Fabric (Recommended Start)

The most accessible path. Uses off-the-shelf components to create a flexible, interactive pixel grid on textile.

#### Bill of Materials

| Component | Specific Product | Source | Est. Cost |
|---|---|---|---|
| LED panel | WS2812B 16×16 flexible matrix (256px) | AliExpress, Adafruit, SuperLightingLED | $15–40 |
| Substrate fabric | Rip-stop nylon (1.1oz, silicone-coated) | Ripstop by the Roll, Amazon | $5–15 |
| Controller | ESP32-S3 DevKit | Adafruit, SparkFun, Mouser | $8–15 |
| Touch sensing | MPR121 capacitive breakout (12 channels) | Adafruit (#1982), SparkFun | $8 |
| Touch electrodes | Conductive thread (stainless steel or silver-coated) | Adafruit (#641), SparkFun | $3–8 |
| Power | 5V 4A USB-C power bank or wall adapter | Amazon | $10–20 |
| Logic level shifter | 74AHCT125 or SN74HCT245 (3.3V→5V) | Adafruit, Mouser | $2 |
| Diffusion layer | White ripstop nylon or organza | Fabric store | $3–5 |
| Protection | 1000µF capacitor, 330Ω resistor | Any electronics supplier | $1 |

**Total: ~$55–115**

#### Construction Steps

**Step 1 — Prepare the fabric substrate**
- Cut rip-stop nylon to desired panel size + 2cm margin on all sides
- Mark a grid for the LED panel position and touch zones
- If using multiple LED panels (e.g., 4× 8×8 to make 16×16), plan the daisy-chain data path in a serpentine pattern

**Step 2 — Mount LEDs to fabric**
- **Option A (simplest):** Use flexible WS2812B matrix panels. Bond to fabric with E6000 flexible adhesive or fabric glue. The flexible PCB substrate bends with the fabric.
- **Option B (like Carpetlight):** Create fabric pockets/sleeves for LED strips. Sew channels from rip-stop, slide strips in. Allows removal for washing.
- **Option C (closest to Nature paper):** Use individual WS2812B modules. Sew each LED to fabric using conductive thread for power/ground rails, with thin silicone wire for the data line.

**Step 3 — Wire the LED matrix**
```
Power Supply (5V, 4A+)
    │
    ├──► 1000µF capacitor across V+ and GND
    │
    ├──► LED Matrix V+ (inject power every 64 LEDs)
    │
    └──► ESP32 Vin
         │
         GPIO pin ──► 330Ω resistor ──► 74AHCT125 ──► LED Data In
```

- Use silicone-jacketed wire (30 AWG) for flexibility
- For matrices >128 LEDs, inject power at multiple points to prevent voltage drop
- Common ground between ESP32 and LED power supply is **critical**

**Step 4 — Add capacitive touch**
- Embroider touch zones onto the fabric using conductive thread
- Create isolated zones (e.g., 4×3 grid = 12 touch areas matching MPR121's 12 inputs)
- Route conductive thread traces to an edge connector area
- Keep positive and negative traces at least 3mm apart to avoid shorts
- Connect to MPR121 breakout via I²C (SDA/SCL to ESP32)

```
Conductive Thread Layout (back of fabric):
┌─────────────────────────────┐
│  [Zone1] [Zone2] [Zone3]    │
│  [Zone4] [Zone5] [Zone6]    │  ← Embroidered conductive pads
│  [Zone7] [Zone8] [Zone9]    │
│             ...              │
│  ════════════════════════    │  ← Thread traces to edge
│  → MPR121 breakout board    │
└─────────────────────────────┘
```

**Step 5 — Diffusion layer**
- Layer white organza or thin white rip-stop over the LED matrix
- A 5–10mm spacer (foam or spacer fabric mesh) between LEDs and diffusion layer softens the hotspots into smooth pixel blobs
- Sew or Velcro the diffusion layer for removability

**Step 6 — ESP32 firmware**
```cpp
// Core libraries
#include <FastLED.h>
#include <Wire.h>
#include <Adafruit_MPR121.h>

#define NUM_LEDS    256
#define DATA_PIN    16
#define MATRIX_W    16
#define MATRIX_H    16

CRGB leds[NUM_LEDS];
Adafruit_MPR121 cap = Adafruit_MPR121();

void setup() {
  FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);
  FastLED.setMaxPowerInVoltsAndMilliamps(5, 4000);  // limit current
  FastLED.setBrightness(80);
  cap.begin(0x5A);  // MPR121 default I2C address
}

void loop() {
  uint16_t touched = cap.touched();
  for (int i = 0; i < 12; i++) {
    if (touched & (1 << i)) {
      // Map touch zone i to pixel region and update
      setTouchZoneColor(i, CRGB::White);
    }
  }
  FastLED.show();
  delay(16);  // ~60fps
}

// Map 12 touch zones to 16x16 pixel regions
void setTouchZoneColor(int zone, CRGB color) {
  int zx = zone % 3;  // 3 columns of touch zones
  int zy = zone / 3;  // 4 rows of touch zones
  int px = zx * 5;    // each zone covers ~5 pixels wide
  int py = zy * 4;    // each zone covers ~4 pixels tall
  for (int y = py; y < py + 4 && y < MATRIX_H; y++) {
    for (int x = px; x < px + 5 && x < MATRIX_W; x++) {
      int idx = (y % 2 == 0) ? (y * MATRIX_W + x) : (y * MATRIX_W + (MATRIX_W - 1 - x));  // serpentine
      leds[idx] = color;
    }
  }
}
```

---

### Approach B: EL Wire/Panel Woven Grid

Closer to the Nature paper's warp-weft concept, using commercial EL materials.

#### Key Components

| Component | Product | Source | Notes |
|---|---|---|---|
| EL wire (warp) | 2.3mm EL wire, multiple colors | Adafruit, SparkFun, Ellumiglow | Each color = separate AC channel |
| Conductive fiber (weft) | Silver-coated nylon thread (235Ω/ft) | Adafruit (#641) | Woven perpendicular to EL wire |
| AC inverter | 3V or 12V EL inverter | SparkFun, Adafruit | Converts DC→AC (100-200V, 1kHz) |
| AC switching | Opto-triacs (MOC3021) + triacs (BT136) | Mouser, DigiKey | One per EL channel |
| Controller | Arduino Nano or ESP32 | Standard | Drives opto-triacs via GPIO |
| Frame | Embroidery hoop or lightweight aluminum | Craft store | Keeps the weave taut |

#### Architecture

```
EL Wire Segments (warp, vertical)
    ║   ║   ║   ║   ║
════╬═══╬═══╬═══╬═══╬════  ← Conductive thread (weft, horizontal)
    ║   ║   ║   ║   ║
════╬═══╬═══╬═══╬═══╬════
    ║   ║   ║   ║   ║

Each ╬ = potential EL pixel (glows where AC passes through intersection)
```

**How it works:**
- EL wire segments run vertically (warp)
- Conductive threads run horizontally (weft)
- Applying AC between a specific warp wire and weft thread illuminates only their intersection
- **Row-column scanning** (multiplexing) addresses individual pixels, just like the Nature paper

> ⚠️ **Caution:** EL wire operates at 100–200V AC. Proper insulation, isolated opto-triac drivers, and careful handling are essential. This approach requires intermediate electronics experience.

#### Practical pixel resolution
- EL wire: 2.3mm diameter → minimum pitch ~5mm with spacing
- Achievable grid: ~20×20 pixels per 10cm² panel
- Color: limited to EL wire color choices (blue, green, orange, white, pink)

---

### Approach C: Screen-Printed EL Ink on Fabric

Closest to the Nature paper's pixel density, but requires screen printing equipment.

#### Materials

| Layer | Material | Supplier |
|---|---|---|
| **Base electrode** | Silver conductive ink (screen-printable) | Sun Chemical (SunTronic), Creative Materials |
| **Dielectric** | Barium titanate dielectric paste | Saralon, SPLinx |
| **Phosphor** | ZnS:Cu EL phosphor paste (SaralEL Display Ink) | Saralon (Blue/Green/Orange/White) |
| **Top electrode** | PEDOT:PSS transparent conductive ink | Heraeus (Clevios), Sigma-Aldrich |
| **Substrate** | Tightly-woven polyester or cotton fabric | Any fabric supplier |

#### Process (per panel)

1. Screen-print silver conductive traces on fabric (bottom electrode grid pattern)
2. Cure at 130°C for 10 min
3. Screen-print dielectric layer over the electrode pattern
4. Cure at 130°C for 10 min
5. Screen-print ZnS:Cu phosphor layer over dielectric
6. Cure at 130°C for 10 min
7. Screen-print transparent PEDOT:PSS top electrode
8. Cure, then seal with flexible polyurethane coating
9. Connect bus bars to AC inverter (60–200V, 400–1000Hz)

> ⚠️ This requires screen printing equipment, a curing oven, and access to specialty inks (~$50–200 per ink system from Saralon). Best suited for maker spaces with printing facilities.

---

## 3. Adding Interactivity

All approaches support the same input methods:

### Capacitive Touch (recommended)
- **Behind the display:** Embroider conductive thread pads on the back of the fabric, behind pixel zones
- **Controller:** MPR121 (12-channel) or FDC2214 (4-channel, higher sensitivity) connected to ESP32
- **Principle:** Human finger changes capacitance through the fabric layers; controller detects the change
- **Thread choices:**
  - Stainless steel thread (Adafruit #641) — durable, moderate conductivity
  - Silver-coated nylon (Adafruit #640) — higher conductivity, less durable after washing

### Pressure/Force Sensing
- **Velostat/Eeonyx:** Sandwich conductive fabric + piezoresistive sheet + conductive fabric
- **Use case:** Detect where and how hard someone presses
- **Resolution:** One analog reading per zone

### Gesture (proximity)
- **APDS-9960:** Detects hand swipes 10–20cm from the fabric surface
- **Use case:** Touchless control layer

---

## 4. Networking with DreamStack

The fabric display becomes a **DreamStack streaming endpoint**:

```
┌──────────────────────────────────┐
│  ESP32 on Fabric                 │
│                                  │
│  signal pixels = [256 × RGB]     │──► DreamStack bitstream
│  signal touch_zones = [12 × bool]│    via WiFi → relay
│                                  │
│  on touch_zone[i] changed:       │
│    mutate pixels[zone_region]    │
└──────────────────────────────────┘
         ▲                │
         │                ▼
   Remote Input      Remote Viewer
   (phone/laptop)    (any browser)
```

**Key integration points:**
- Pixel state is a flat signal array — efficient for bitstream delta encoding
- Touch events generate mutations that propagate upstream through the relay
- Remote clients can push pixel data downstream (animations, text, images)
- Conflict resolution (version counters) arbitrates simultaneous fabric-touch + remote-touch

---

## 5. Supplier Quick Reference

| Category | Supplier | URL | Key Products |
|---|---|---|---|
| Addressable LEDs | Adafruit | adafruit.com | NeoPixel matrices, strips |
| Addressable LEDs | SuperLightingLED | superlightingled.com | Flexible WS2812B panels |
| EL wire/thread | Ellumiglow | ellumiglow.com | SewGlo EL thread, EL wire |
| EL wire | SparkFun | sparkfun.com | EL wire, inverters, sequencers |
| EL inks | Saralon | saralon.com | SaralEL Display Inks (screen-print) |
| EL inks | SPLinx | splinx.eu | EL coatings and varnishes |
| Conductive thread | Adafruit | adafruit.com | Stainless (#641), silver (#640) |
| Conductive fabric | LessEMF | lessemf.com | Shielding fabric, conductive textiles |
| Touch IC | Adafruit | adafruit.com | MPR121 breakout (#1982) |
| Fiber optic fabric | Light Up Wear | lightupwear.com | Pre-woven fiber optic fabric |
| LED-on-fabric (commercial) | Forster Rohner | ffrosti.com | e-broidery LED textiles |
| Microcontrollers | Adafruit/SparkFun | — | ESP32-S3, Pico W |

---

## 6. Comparison: Which Approach For What?

```mermaid
graph LR
    A["Want to build<br/>this weekend?"] -->|Yes| B["Approach A<br/>LED Matrix on Fabric"]
    A -->|"Want EL glow<br/>aesthetic"| C["Approach B<br/>EL Wire Grid"]
    A -->|"Want highest<br/>pixel density"| D["Approach C<br/>Screen-Print EL Ink"]
    B --> E["+ Touch + ESP32<br/>= Interactive Display"]
    C --> E
    D --> E
    E --> F["+ DreamStack<br/>= Networked Display"]
```

| | Approach A | Approach B | Approach C |
|---|---|---|---|
| **Time to build** | 1–2 days | 1 week | 2+ weeks |
| **Cost** | $55–115 | $80–150 | $200–500 |
| **Pixel count** | 256+ (16×16 or larger) | ~100–400 | ~1000+ |
| **Color** | Full RGB | Limited (EL colors) | Limited (phosphor colors) |
| **Flexibility** | Good (flexible PCB) | Excellent (wire) | Good (printed) |
| **Brightness** | High | Low-medium | Low |
| **Interactivity** | Easy (capacitive touch) | Moderate | Moderate |
| **Washable** | With removable pockets | Fragile | With PU sealing |
| **Skills needed** | Basic soldering, sewing | Electronics + HV safety | Screen printing + chemistry |