ESP32 LED Ring For Kids: Build + Web Dashboard Guide

The Night I Almost Gave Up

It was 11:30 PM. My son Debansh was asleep. I was sitting on the floor with three ESP32 boards, a half-soldered LED ring, and a Serial Monitor screaming WiFi FAILED. Status code: 6 at me — again.

I had spent four hours trying to connect one tiny microcontroller to my home WiFi — something that sounds simple, but is actually a core part of what IoT means in real-world projects.. My router was fine. My password was correct. The board kept disconnecting like it had a personal grudge against me.

Turned out? My router was running 5GHz only. And ESP32 cannot see 5GHz. At all. It literally does not exist for this chip.

That one realization — which took me four hours to find — is the reason I’m writing this blog. So you don’t lose your Saturday night to the same wall.

This is not a ‘buy this, connect that, it works’ tutorial. This is the real story — with real errors, real debug steps, and the exact code that runs on my living room shelf right now — blinking happily for Debansh every single evening.

What We’re Actually Building

Before we get into the weeds, here’s the full picture of what this project does:

20 LED light effects — Rainbow, Fire, Meteor Rain, Police Lights, Candy (kid-favourite), and 15 more
Mobile web dashboard — No app install. Just open a browser on your phone
On/Off power button — One tap to kill all LEDs without unplugging anything
Learn & Play game — Shows random A–Z letters and 0–9 numbers, Debansh taps the right answer
Sparkle celebration — When he gets it right, the whole ring explodes in rainbow sparkles
Parent controls — Choose which letters and numbers appear before starting the game

Total hardware cost: under ₹500 / $6 USD. Total hours to build if you follow this guide: under 2 hours.

The Shopping List (And Why Each Part Was Chosen)

I tried two other LED types before landing on WS2812. Here’s what the table actually looks like based on what I observed, not just what the datasheets say:

Component	What I Paid (India)	Can You Skip It?
ESP32 Dev Board (Choose best boards for IoT projects)	₹320 (~$4)	No — the brain
WS2812 16-LED Ring	₹150 (~$2)	No — the show
USB Micro Cable	₹40	No — for power + upload
300Ω Resistor (optional)	₹2	Recommended
Jumper wires (3 pcs)	₹20	No

Why This Matters: The 300Ω resistor between ESP32’s D2 pin and the LED ring’s DI pin isn’t in most tutorials. But without it, long wires pick up noise and your LEDs flicker randomly. I learned this the hard way after 20 minutes of debugging what I thought was a code bug.

Wiring: Three Wires. That’s Literally It.

Think of the LED ring like a garden sprinkler. It needs:

Water pressure → That’s your 5V power (VIN pin)
A drain → That’s GND
A control signal → That’s the data wire (D2 pin)

WS2812 Ring Pin	ESP32 Pin	Wire Colour (suggested)
5V	VIN	Red
GND	GND	Black
DI (Data In)	D2	Yellow or Blue
DO (Data Out)	Not connected	—

⚠️ CRITICAL: Use VIN, not 3.3V. The LED ring needs 5 volts to display correct colours. On 3.3V the ring appears dim, colours look wrong, and the first LED often shows a different hue than the rest. I wasted an hour before I swapped the wire.

Why This Matters: The DO pin (Data Out) is only needed if you chain two rings together. One ring = DO is left floating, completely unconnected. Plugging it in randomly to some GPIO pin caused my first board to bootloop until I removed it.

Devraj's actual ESP32 LED ring build — WS2812 16-LED ring glowing in rainbow colours, mounted with an ESP32 board and perfboard inside a clear plastic enclosure, powered by a USB phone charger, with a blue 18650 battery and rocker switch visible. — The real build — not a breadboard prototype. ESP32 sitting on a perfboard inside a repurposed plastic box, a rocker switch for manual power cut, and an 18650 battery for portable use. The LED ring is running the Rainbow Cycle effect here. Total enclosure cost: whatever that box was lying around the house.

Tested & Working Code

// ============================================================
//  🌟 Dedicated to Debansh — My Son 🌟
//  WS2812 16-LED Ring Controller + Learn & Play Game
//  Board  : ESP32 (any variant)
//  Library: FastLED  (install from Arduino Library Manager)
// ============================================================
//
//  WIRING:
//  ┌──────────────────┬──────────────────┐
//  │  WS2812 Ring Pin │  ESP32 Pin       │
//  ├──────────────────┼──────────────────┤
//  │  5V              │  VIN  (5 V)      │
//  │  GND             │  GND             │
//  │  DI  (Data In)   │  D2   (GPIO 2)   │
//  │  DO  (Data Out)  │  Not connected   │
//  └──────────────────┴──────────────────┘
// ============================================================

#include <FastLED.h>
#include <WiFi.h>
#include <WebServer.h>
#include <esp_wifi.h>      // needed for esp_wifi_set_ps()

// ──────────────────────────────────────────────
//  ★  CHANGE THESE TO YOUR WIFI DETAILS  ★
// ──────────────────────────────────────────────
const char* WIFI_SSID     = "YourWiFiName";
const char* WIFI_PASSWORD = "YourWiFiPassword";
// ──────────────────────────────────────────────

#define LED_PIN     2
#define NUM_LEDS    16
#define LED_TYPE    WS2812B
#define COLOR_ORDER GRB

CRGB leds[NUM_LEDS];
WebServer server(80);

// ── Global state ──────────────────────────────
int  currentEffect  = 0;
int  effectSpeed    = 50;
int  brightness     = 180;
CRGB solidColor     = CRGB::Blue;
bool ledsOn         = true;

unsigned long lastUpdate = 0;
int effectStep = 0;

// ── Game: celebrate sparkle timer ─────────────
bool     celebrateActive = false;
unsigned long celebrateStart = 0;
#define  CELEBRATE_DURATION 3000   // ms

// ── Effect names ──────────────────────────────
const char* effectNames[] = {
  "Rainbow",
  "Rainbow Cycle",
  "Color Wipe",
  "Theater Chase",
  "Comet",
  "Meteor Rain",
  "Larson Scanner",
  "Fire Effect",
  "Twinkle",
  "VU Meter",
  "Solid Color",
  "Breathing",
  "Sparkle",
  "Color Bounce",
  "Police Lights",
  "Confetti",
  "Color Pulse",
  "Starburst",
  "Waterfall",
  "Candy"
};
const int NUM_EFFECTS = 20;

// ============================================================
//  SETUP
// ============================================================
void setup() {
  Serial.begin(115200);
  delay(400);
  Serial.println("\n\n=== Debansh LED Ring Controller ===");

  FastLED.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS);
  FastLED.setBrightness(brightness);
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  FastLED.show();

  Serial.print("Connecting to WiFi: ");
  Serial.println(WIFI_SSID);

  // ── Deep reset + force 2.4GHz STA mode ──────────────
  WiFi.persistent(false);   // do not save credentials to flash
  WiFi.disconnect(true);    // disconnect + clear old config
  WiFi.mode(WIFI_OFF);      // full radio off
  delay(1500);
  WiFi.mode(WIFI_STA);
  esp_wifi_set_ps(WIFI_PS_NONE);  // disable power-save (fixes status=6)
  delay(300);

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  Serial.print("Trying");

  int tries = 0;
  while (WiFi.status() != WL_CONNECTED && tries < 40) {
    delay(500);
    Serial.print(".");
    if (tries % 10 == 9) {
      Serial.print(" ["); Serial.print(WiFi.status()); Serial.print("] ");
    }
    tries++;
  }

  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("\n\nWiFi connected!");
    Serial.print("IP Address: http://");
    Serial.println(WiFi.localIP());
    Serial.print("Signal strength (RSSI): ");
    Serial.print(WiFi.RSSI());
    Serial.println(" dBm");
  } else {
    Serial.println("\n\nWiFi FAILED (status=6 = kept disconnecting).");
    Serial.println("Almost certainly a 5GHz problem. Try these:");
    Serial.println("  1. Turn on your PHONE HOTSPOT (2.4GHz by default)");
    Serial.println("     and change WIFI_SSID/WIFI_PASSWORD to your hotspot.");
    Serial.println("  2. OR log into your router and enable 2.4GHz band.");
    Serial.println("  3. OR move ESP32 closer to the router.");
    Serial.println("Web server running but unreachable until WiFi works.");
  }

  server.on("/",          handleRoot);
  server.on("/set",       handleSet);
  server.on("/status",    handleStatus);
  server.on("/celebrate", handleCelebrate);
  server.on("/power",     handlePower);
  server.begin();
  Serial.println("Web server started.");
}

// ============================================================
//  MAIN LOOP
// ============================================================
void loop() {
  server.handleClient();

  unsigned long now = millis();
  if (now - lastUpdate >= (unsigned long)effectSpeed) {
    lastUpdate = now;

    if (!ledsOn) {
      fill_solid(leds, NUM_LEDS, CRGB::Black);
      FastLED.show();
      return;
    }

    // Celebrate (correct answer sparkle) overrides effects
    if (celebrateActive) {
      if (now - celebrateStart < CELEBRATE_DURATION) {
        effectCelebrate();
      } else {
        celebrateActive = false;
      }
    } else {
      runCurrentEffect();
    }

    FastLED.setBrightness(brightness);
    FastLED.show();
    effectStep++;
  }
}

// ============================================================
//  EFFECTS DISPATCHER
// ============================================================
void runCurrentEffect() {
  switch (currentEffect) {
    case 0:  effectRainbow();       break;
    case 1:  effectRainbowCycle();  break;
    case 2:  effectColorWipe();     break;
    case 3:  effectTheaterChase();  break;
    case 4:  effectComet();         break;
    case 5:  effectMeteorRain();    break;
    case 6:  effectLarsonScanner(); break;
    case 7:  effectFire();          break;
    case 8:  effectTwinkle();       break;
    case 9:  effectVUMeter();       break;
    case 10: effectSolidColor();    break;
    case 11: effectBreathing();     break;
    case 12: effectSparkle();       break;
    case 13: effectColorBounce();   break;
    case 14: effectPoliceLights();  break;
    case 15: effectConfetti();      break;
    case 16: effectColorPulse();    break;
    case 17: effectStarburst();     break;
    case 18: effectWaterfall();     break;
    case 19: effectCandy();         break;
  }
}

// ============================================================
//  ORIGINAL EFFECTS (0–12)
// ============================================================
void effectRainbow() {
  uint8_t hue = effectStep * 3;
  for (int i = 0; i < NUM_LEDS; i++)
    leds[i] = CHSV(hue + (i * 256 / NUM_LEDS), 255, 255);
}

void effectRainbowCycle() {
  uint8_t hue = effectStep * 5;
  for (int i = 0; i < NUM_LEDS; i++)
    leds[i] = CHSV(hue + (i * 256 / NUM_LEDS), 240, 255);
}

void effectColorWipe() {
  int pos = effectStep % (NUM_LEDS * 2);
  if (pos == 0) fill_solid(leds, NUM_LEDS, CRGB::Black);
  if (pos < NUM_LEDS) leds[pos] = solidColor;
  else                leds[pos - NUM_LEDS] = CRGB::Black;
}

void effectTheaterChase() {
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  for (int i = 0; i < NUM_LEDS; i++)
    if ((i + effectStep) % 3 == 0) leds[i] = solidColor;
}

void effectComet() {
  for (int i = 0; i < NUM_LEDS; i++) leds[i].fadeToBlackBy(80);
  int pos = effectStep % NUM_LEDS;
  leds[pos] = solidColor;
  if (pos > 0) leds[pos-1] = solidColor.scale8(180);
  if (pos > 1) leds[pos-2] = solidColor.scale8(80);
}

void effectMeteorRain() {
  for (int i = 0; i < NUM_LEDS; i++)
    if (random8(3) != 0) leds[i].fadeToBlackBy(64);
  int pos = effectStep % NUM_LEDS;
  leds[pos] = CRGB::White;
  if (pos > 0) leds[pos-1] = CRGB(100,100,255);
  if (pos > 2) leds[pos-2] = CRGB(30,30,80);
}

void effectLarsonScanner() {
  fadeToBlackBy(leds, NUM_LEDS, 40);
  int period = NUM_LEDS * 2 - 2;
  int pos    = effectStep % period;
  if (pos >= NUM_LEDS) pos = period - pos;
  leds[pos] = CRGB::Red;
  if (pos > 0)          leds[pos-1] = CRGB(120,0,0);
  if (pos < NUM_LEDS-1) leds[pos+1] = CRGB(120,0,0);
}

static byte heat[NUM_LEDS];
void effectFire() {
  for (int i = 0; i < NUM_LEDS; i++)
    heat[i] = qsub8(heat[i], random8(0,40));
  for (int i = NUM_LEDS-1; i >= 2; i--)
    heat[i] = (heat[i-1] + heat[i-2] + heat[i-2]) / 3;
  if (random8(255) < 100) {
    int y = random8(4);
    heat[y] = qadd8(heat[y], random8(160,255));
  }
  for (int i = 0; i < NUM_LEDS; i++)
    leds[i] = HeatColor(heat[i]);
}

void effectTwinkle() {
  for (int i = 0; i < NUM_LEDS; i++) leds[i].fadeToBlackBy(20);
  if (random8(3) == 0) leds[random8(NUM_LEDS)] = CHSV(random8(), 200, 255);
}

void effectVUMeter() {
  int level = (int)(8.0 + 7.5 * sin(effectStep * 0.3));
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  for (int i = 0; i < level && i < NUM_LEDS; i++) {
    if      (i < 10) leds[i] = CRGB::Green;
    else if (i < 14) leds[i] = CRGB::Yellow;
    else             leds[i] = CRGB::Red;
  }
}

void effectSolidColor() {
  fill_solid(leds, NUM_LEDS, solidColor);
}

void effectBreathing() {
  float val = (exp(sin(effectStep * 0.07)) - 0.36787944) * 108.0;
  uint8_t bright = (uint8_t)constrain(val, 0, 255);
  fill_solid(leds, NUM_LEDS, solidColor);
  FastLED.setBrightness(bright);
}

void effectSparkle() {
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  for (int i = 0; i < 3; i++) leds[random8(NUM_LEDS)] = CRGB::White;
}

// ============================================================
//  NEW EFFECTS (13–19)
// ============================================================

// 13: Color Bounce — two coloured dots chase each other
void effectColorBounce() {
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  int period = NUM_LEDS * 2 - 2;
  int p1 = effectStep % period;
  int p2 = (effectStep + NUM_LEDS/2) % period;
  if (p1 >= NUM_LEDS) p1 = period - p1;
  if (p2 >= NUM_LEDS) p2 = period - p2;
  leds[p1] = CRGB::Cyan;
  leds[p2] = CRGB::Magenta;
  if (p1 > 0)          leds[p1-1] = CRGB(0,60,60);
  if (p2 > 0)          leds[p2-1] = CRGB(60,0,60);
}

// 14: Police Lights — alternating red/blue flash
void effectPoliceLights() {
  fill_solid(leds, NUM_LEDS, CRGB::Black);
  bool redPhase = (effectStep / 4) % 2 == 0;
  for (int i = 0; i < NUM_LEDS/2; i++) leds[i]            = redPhase  ? CRGB::Red  : CRGB::Black;
  for (int i = NUM_LEDS/2; i < NUM_LEDS; i++) leds[i]     = !redPhase ? CRGB::Blue : CRGB::Black;
}

// 15: Confetti — random coloured flashes on dim background
void effectConfetti() {
  fadeToBlackBy(leds, NUM_LEDS, 10);
  int pos = random8(NUM_LEDS);
  leds[pos] += CHSV(effectStep * 3 + random8(64), 200, 255);
}

// 16: Color Pulse — whole ring pulses through hues
void effectColorPulse() {
  uint8_t hue   = (effectStep * 2) % 256;
  uint8_t wave  = beatsin8(20, 80, 255);
  fill_solid(leds, NUM_LEDS, CHSV(hue, 255, wave));
}

// 17: Starburst — two dots shoot from center outward
void effectStarburst() {
  fadeToBlackBy(leds, NUM_LEDS, 60);
  int pos = effectStep % (NUM_LEDS / 2);
  int mid = NUM_LEDS / 2;
  leds[(mid + pos) % NUM_LEDS] = CHSV(effectStep * 4, 255, 255);
  leds[(mid - pos + NUM_LEDS) % NUM_LEDS] = CHSV(effectStep * 4 + 128, 255, 255);
}

// 18: Waterfall — cascading blue/cyan drips
void effectWaterfall() {
  for (int i = NUM_LEDS-1; i > 0; i--) leds[i] = leds[i-1];
  uint8_t v = random8(2) == 0 ? random8(150, 255) : 0;
  leds[0] = CHSV(140 + random8(30), 220, v);
}

// 19: Candy — slow pastel rotation, great for kids!
void effectCandy() {
  CRGB colors[4] = { CRGB(255,100,150), CRGB(100,255,150), CRGB(100,150,255), CRGB(255,220,80) };
  for (int i = 0; i < NUM_LEDS; i++) {
    int idx = ((i + effectStep / 3) % 4);
    leds[i] = colors[idx];
  }
}

// ============================================================
//  CELEBRATE EFFECT — triggered by correct game answer
// ============================================================
void effectCelebrate() {
  for (int i = 0; i < NUM_LEDS; i++) {
    leds[i] = CHSV(random8(), 255, random8(200, 255));
  }
}

// ============================================================
//  WEB SERVER HANDLERS
// ============================================================

void handlePower() {
  if (server.hasArg("on")) {
    ledsOn = server.arg("on") == "1";
  }
  server.send(200, "text/plain", ledsOn ? "1" : "0");
}

void handleCelebrate() {
  celebrateActive = true;
  celebrateStart  = millis();
  effectStep      = 0;
  server.send(200, "text/plain", "OK");
}

void handleSet() {
  if (server.hasArg("effect")) {
    int e = server.arg("effect").toInt();
    if (e != currentEffect) { effectStep = 0; fill_solid(leds, NUM_LEDS, CRGB::Black); }
    currentEffect = constrain(e, 0, NUM_EFFECTS - 1);
  }
  if (server.hasArg("brightness")) brightness = constrain(server.arg("brightness").toInt(), 5, 255);
  if (server.hasArg("speed"))      effectSpeed = constrain(server.arg("speed").toInt(), 10, 200);
  if (server.hasArg("r") && server.hasArg("g") && server.hasArg("b"))
    solidColor = CRGB(server.arg("r").toInt(), server.arg("g").toInt(), server.arg("b").toInt());
  server.send(200, "text/plain", "OK");
}

void handleStatus() {
  String json = "{";
  json += "\"effect\":"     + String(currentEffect)   + ",";
  json += "\"effectName\":\"" + String(effectNames[currentEffect]) + "\",";
  json += "\"brightness\":" + String(brightness)      + ",";
  json += "\"speed\":"      + String(effectSpeed)     + ",";
  json += "\"on\":"         + String(ledsOn ? 1 : 0)  + "}";
  server.send(200, "application/json", json);
}

// ============================================================
//  FULL DASHBOARD HTML
// ============================================================
void handleRoot() {
  String page = R"rawhtml(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Debansh LED Ring</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#0a0a18;
  color:#e0e0f0;
  min-height:100vh;
  padding:14px;
  padding-bottom:30px;
}

/* ── Header ── */
.header{text-align:center;margin-bottom:18px;position:relative}
.header .dedication{
  font-size:11px;color:#ff88cc;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:4px
}
.header h1{
  font-size:24px;font-weight:700;
  background:linear-gradient(90deg,#ff88cc,#88aaff,#88ffcc,#ffdd88);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.2;margin-bottom:6px
}
.header .subtitle{font-size:12px;color:#5a5a8a}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#44ff88;margin-right:4px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Power button ── */
.power-row{display:flex;justify-content:center;margin-bottom:16px}
.power-btn{
  width:64px;height:64px;border-radius:50%;
  border:3px solid #44ff88;background:#0d1f0d;
  color:#44ff88;font-size:28px;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;justify-content:center
}
.power-btn.off{border-color:#555;color:#555;background:#111}
.power-btn:active{transform:scale(.93)}

/* ── Cards ── */
.card{
  background:#14142a;border-radius:16px;
  padding:16px;margin-bottom:14px;
  border:1px solid #22224a
}
.card h2{
  font-size:11px;font-weight:600;color:#5050aa;
  text-transform:uppercase;letter-spacing:1px;margin-bottom:12px
}

/* ── Tabs ── */
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab-btn{
  flex:1;padding:10px 6px;border-radius:12px;
  border:1px solid #22224a;background:#0d0d20;
  color:#7070a0;font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;text-align:center
}
.tab-btn.active{background:#1e1e50;border-color:#5050cc;color:#fff}
.tab-content{display:none}
.tab-content.active{display:block}

/* ── Effect grid ── */
.effect-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.effect-btn{
  background:#10102a;border:1px solid #222250;border-radius:10px;
  color:#9090c0;padding:10px 8px;font-size:12px;cursor:pointer;
  transition:all .15s;text-align:center
}
.effect-btn:active{transform:scale(.97)}
.effect-btn.active{background:#20206a;border-color:#5555ff;color:#fff;box-shadow:0 0 10px #3333ff44}

/* ── Sliders ── */
.slider-row{margin-bottom:14px}
.slider-row label{display:flex;justify-content:space-between;font-size:13px;color:#7070a0;margin-bottom:6px}
.slider-row label span{color:#c0c0ff;font-weight:500}
input[type=range]{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:#1e1e44;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#6060ff;cursor:pointer}

/* ── Color row ── */
.color-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.color-swatch{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .15s;flex-shrink:0
}
.color-swatch:active{transform:scale(1.2)}
.color-swatch.active{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}
input[type=color]{
  width:38px;height:38px;border-radius:50%;
  border:2px solid #444;padding:0;cursor:pointer;background:none;flex-shrink:0
}

/* ── Game section ── */
.game-setup{margin-bottom:12px}
.game-setup h3{font-size:12px;color:#8080cc;margin-bottom:8px;text-transform:uppercase;letter-spacing:.8px}
.toggle-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:10px}
.toggle-chip{
  background:#10102a;border:1px solid #222250;border-radius:8px;
  color:#6060a0;font-size:14px;font-weight:600;
  padding:7px 2px;text-align:center;cursor:pointer;transition:all .15s;
  user-select:none
}
.toggle-chip.on{background:#1a1a5a;border-color:#5555dd;color:#fff}
.toggle-chip:active{transform:scale(.92)}
.game-start-btn{
  width:100%;padding:14px;border-radius:12px;
  background:linear-gradient(135deg,#2a1a6a,#1a3a6a);
  border:1px solid #4444aa;color:#aaaaff;
  font-size:15px;font-weight:600;cursor:pointer;margin-top:8px;
  transition:all .2s
}
.game-start-btn:active{transform:scale(.98)}

/* ── Game play area ── */
#game-play{display:none}
.question-display{
  background:#0d0d22;border-radius:16px;
  padding:24px;text-align:center;margin-bottom:16px;
  border:2px solid #2a2a5a
}
.question-char{
  font-size:80px;font-weight:700;line-height:1;
  background:linear-gradient(135deg,#ff88cc,#88aaff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:8px
}
.question-hint{font-size:13px;color:#5050a0}
.choices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.choice-btn{
  background:#10102a;border:1px solid #222250;border-radius:14px;
  color:#c0c0e0;font-size:32px;font-weight:700;
  padding:18px 6px;cursor:pointer;transition:all .15s;text-align:center
}
.choice-btn:active{transform:scale(.95)}
.choice-btn.correct{background:#0d3d0d;border-color:#44ff44;color:#44ff44;animation:correctPop .4s ease}
.choice-btn.wrong{background:#3d0d0d;border-color:#ff4444;color:#ff4444;animation:shake .3s ease}
@keyframes correctPop{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}100%{transform:translateX(0)}}

.score-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.score-box{
  background:#0d0d22;border-radius:10px;padding:8px 16px;
  font-size:13px;color:#7070b0;border:1px solid #1e1e44
}
.score-box span{color:#ffffaa;font-size:18px;font-weight:700;margin-left:6px}
.game-stop-btn{
  width:100%;padding:11px;border-radius:10px;
  background:#1a0d0d;border:1px solid #663333;
  color:#cc8888;font-size:13px;cursor:pointer;margin-top:4px
}
.feedback-msg{
  text-align:center;font-size:15px;font-weight:600;
  min-height:24px;margin-bottom:8px;transition:opacity .3s
}
.feedback-msg.good{color:#44ff88}
.feedback-msg.bad{color:#ff6666}

/* ── Status ── */
.status-row{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-top:6px}
#status-effect{color:#8888ff;font-weight:500}

.footer{text-align:center;font-size:11px;color:#2a2a4a;margin-top:20px;line-height:1.8}
</style>
</head>
<body>

<!-- ────────── HEADER ────────── -->
<div class="header">
  <div class="dedication">✨ Dedicated to</div>
  <h1>Debansh 💫<br>My Son</h1>
  <div class="subtitle"><span class="dot"></span>LED Ring Connected</div>
</div>

<!-- ────────── POWER BUTTON ────────── -->
<div class="power-row">
  <button class="power-btn" id="power-btn" onclick="togglePower()" title="Turn LEDs On / Off">⏻</button>
</div>

<!-- ────────── TABS ────────── -->
<div class="tabs">
  <button class="tab-btn active" onclick="showTab('lights')">💡 Lights</button>
  <button class="tab-btn"       onclick="showTab('game')">🎮 Learn &amp; Play</button>
</div>

<!-- ════════════════ LIGHTS TAB ════════════════ -->
<div class="tab-content active" id="tab-lights">

  <!-- Effects -->
  <div class="card">
    <h2>🌈 Effect</h2>
    <div class="effect-grid" id="effect-grid"></div>
  </div>

  <!-- Color -->
  <div class="card">
    <h2>🎨 Color</h2>
    <div class="color-row">
      <div class="color-swatch active" style="background:#0055ff" data-r="0"   data-g="85"  data-b="255"></div>
      <div class="color-swatch"       style="background:#ff2200" data-r="255" data-g="34"  data-b="0"></div>
      <div class="color-swatch"       style="background:#00ff44" data-r="0"   data-g="255" data-b="68"></div>
      <div class="color-swatch"       style="background:#ffffff" data-r="255" data-g="255" data-b="255"></div>
      <div class="color-swatch"       style="background:#ffaa00" data-r="255" data-g="170" data-b="0"></div>
      <div class="color-swatch"       style="background:#ff00ff" data-r="255" data-g="0"   data-b="255"></div>
      <div class="color-swatch"       style="background:#00ffff" data-r="0"   data-g="255" data-b="255"></div>
      <div class="color-swatch"       style="background:#ff88cc" data-r="255" data-g="136" data-b="204"></div>
      <input type="color" id="custom-color" value="#0055ff" title="Custom color">
    </div>
  </div>

  <!-- Controls -->
  <div class="card">
    <h2>⚙️ Controls</h2>
    <div class="slider-row">
      <label>Brightness <span id="brightness-val">180</span></label>
      <input type="range" id="brightness" min="5" max="255" value="180">
    </div>
    <div class="slider-row">
      <label>Speed <span id="speed-val">50ms</span></label>
      <input type="range" id="speed" min="10" max="200" value="50">
    </div>
  </div>

  <!-- Status -->
  <div class="card">
    <h2>📊 Status</h2>
    <div class="status-row"><span>Effect</span><span id="status-effect">Rainbow</span></div>
    <div class="status-row"><span>Brightness</span><span id="status-bright">180</span></div>
    <div class="status-row"><span>Speed</span><span id="status-speed">50ms</span></div>
    <div class="status-row"><span>Power</span><span id="status-power" style="color:#44ff88">ON</span></div>
  </div>

</div><!-- end lights tab -->

<!-- ════════════════ GAME TAB ════════════════ -->
<div class="tab-content" id="tab-game">

  <!-- SETUP SCREEN -->
  <div id="game-setup-screen">

    <div class="card game-setup">
      <h2>📚 Choose Letters to Show</h2>
      <div class="toggle-grid" id="alpha-grid"></div>
      <div style="display:flex;gap:8px;margin-top:4px">
        <button class="game-stop-btn" style="flex:1" onclick="selectAll('alpha')">All</button>
        <button class="game-stop-btn" style="flex:1" onclick="selectNone('alpha')">None</button>
      </div>
    </div>

    <div class="card game-setup">
      <h2>🔢 Choose Numbers to Show</h2>
      <div class="toggle-grid" id="num-grid"></div>
      <div style="display:flex;gap:8px;margin-top:4px">
        <button class="game-stop-btn" style="flex:1" onclick="selectAll('num')">All</button>
        <button class="game-stop-btn" style="flex:1" onclick="selectNone('num')">None</button>
      </div>
    </div>

    <div class="card">
      <h2>🎮 Difficulty</h2>
      <div class="effect-grid">
        <button class="effect-btn active" id="diff-easy"   onclick="setDiff('easy')">😊 Easy (3 choices)</button>
        <button class="effect-btn"        id="diff-medium" onclick="setDiff('medium')">🤔 Medium (5 choices)</button>
      </div>
    </div>

    <button class="game-start-btn" onclick="startGame()">🚀 Start Game!</button>
  </div>

  <!-- PLAY SCREEN -->
  <div id="game-play">
    <div class="score-row">
      <div class="score-box">⭐ Score <span id="score">0</span></div>
      <div class="score-box">🎯 Round <span id="round">1</span></div>
    </div>

    <div class="question-display">
      <div class="question-char" id="question-char">A</div>
      <div class="question-hint" id="question-hint">Tap the correct letter!</div>
    </div>

    <div class="feedback-msg" id="feedback"></div>
    <div class="choices-grid" id="choices-grid"></div>
    <button class="game-stop-btn" onclick="stopGame()">✕ Stop Game</button>
  </div>

</div><!-- end game tab -->

<div class="footer">Made with ❤️ for Debansh<br>ESP32 · FastLED · WebServer</div>

<script>
// ──────────────── LIGHTS ────────────────
const effects = [
  "Rainbow","Rainbow Cycle","Color Wipe","Theater Chase",
  "Comet","Meteor Rain","Larson Scanner","Fire Effect",
  "Twinkle","VU Meter","Solid Color","Breathing","Sparkle",
  "Color Bounce","Police Lights","Confetti","Color Pulse",
  "Starburst","Waterfall","Candy"
];

let currentEffect = 0;
let currentColor  = {r:0,g:85,b:255};
let isOn          = true;

// Build effect buttons
const grid = document.getElementById('effect-grid');
effects.forEach((name,idx) => {
  const btn = document.createElement('button');
  btn.className = 'effect-btn' + (idx===0?' active':'');
  btn.textContent = name;
  btn.onclick = () => selectEffect(idx);
  grid.appendChild(btn);
});

function selectEffect(idx) {
  currentEffect = idx;
  document.querySelectorAll('.effect-btn').forEach((b,i) => b.classList.toggle('active', i===idx));
  document.getElementById('status-effect').textContent = effects[idx];
  sendUpdate();
}

// Color swatches
document.querySelectorAll('.color-swatch').forEach(sw => {
  sw.onclick = () => {
    document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('active'));
    sw.classList.add('active');
    currentColor = {r:+sw.dataset.r, g:+sw.dataset.g, b:+sw.dataset.b};
    sendUpdate();
  };
});
document.getElementById('custom-color').addEventListener('input', function() {
  const h = this.value;
  currentColor = {r:parseInt(h.slice(1,3),16),g:parseInt(h.slice(3,5),16),b:parseInt(h.slice(5,7),16)};
  document.querySelectorAll('.color-swatch').forEach(s=>s.classList.remove('active'));
  sendUpdate();
});

const brightnessSlider = document.getElementById('brightness');
const speedSlider = document.getElementById('speed');
brightnessSlider.addEventListener('input', function() {
  document.getElementById('brightness-val').textContent = this.value;
  document.getElementById('status-bright').textContent  = this.value;
  sendUpdate();
});
speedSlider.addEventListener('input', function() {
  document.getElementById('speed-val').textContent   = this.value+'ms';
  document.getElementById('status-speed').textContent = this.value+'ms';
  sendUpdate();
});

let debounce;
function sendUpdate() {
  clearTimeout(debounce);
  debounce = setTimeout(() => {
    fetch('/set?'+new URLSearchParams({
      effect:currentEffect, brightness:brightnessSlider.value,
      speed:speedSlider.value, r:currentColor.r, g:currentColor.g, b:currentColor.b
    })).catch(()=>{});
  }, 80);
}

function togglePower() {
  isOn = !isOn;
  const btn = document.getElementById('power-btn');
  btn.classList.toggle('off', !isOn);
  document.getElementById('status-power').textContent = isOn ? 'ON' : 'OFF';
  document.getElementById('status-power').style.color = isOn ? '#44ff88' : '#ff6666';
  fetch('/power?on=' + (isOn?'1':'0')).catch(()=>{});
}

// ──────────────── TABS ────────────────
function showTab(name) {
  document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
  document.querySelectorAll('.tab-btn').forEach(t=>t.classList.remove('active'));
  document.getElementById('tab-'+name).classList.add('active');
  event.target.classList.add('active');
}

// ──────────────── GAME SETUP ────────────────
const allAlpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
const allNums  = ['0','1','2','3','4','5','6','7','8','9'];
let activeAlpha = new Set(allAlpha);
let activeNums  = new Set(allNums);
let difficulty  = 'easy';

function buildAlphaGrid() {
  const g = document.getElementById('alpha-grid');
  allAlpha.forEach(ch => {
    const d = document.createElement('div');
    d.className = 'toggle-chip on';
    d.textContent = ch;
    d.dataset.val = ch;
    d.onclick = () => toggleChip(d, activeAlpha);
    g.appendChild(d);
  });
}
function buildNumGrid() {
  const g = document.getElementById('num-grid');
  allNums.forEach(ch => {
    const d = document.createElement('div');
    d.className = 'toggle-chip on';
    d.textContent = ch;
    d.dataset.val = ch;
    d.onclick = () => toggleChip(d, activeNums);
    g.appendChild(d);
  });
}
function toggleChip(el, set) {
  const v = el.dataset.val;
  if(set.has(v)){set.delete(v);el.classList.remove('on');}
  else          {set.add(v);   el.classList.add('on');}
}
function selectAll(type) {
  if(type==='alpha'){allAlpha.forEach(c=>activeAlpha.add(c));document.querySelectorAll('#alpha-grid .toggle-chip').forEach(d=>d.classList.add('on'));}
  else{allNums.forEach(c=>activeNums.add(c));document.querySelectorAll('#num-grid .toggle-chip').forEach(d=>d.classList.add('on'));}
}
function selectNone(type) {
  if(type==='alpha'){activeAlpha.clear();document.querySelectorAll('#alpha-grid .toggle-chip').forEach(d=>d.classList.remove('on'));}
  else{activeNums.clear();document.querySelectorAll('#num-grid .toggle-chip').forEach(d=>d.classList.remove('on'));}
}
function setDiff(d) {
  difficulty = d;
  document.getElementById('diff-easy').classList.toggle('active', d==='easy');
  document.getElementById('diff-medium').classList.toggle('active', d==='medium');
}

buildAlphaGrid();
buildNumGrid();

// ──────────────── GAME PLAY ────────────────
let pool = [];
let score = 0, round = 0;
let currentQuestion = '';
let answerLocked = false;

function startGame() {
  pool = [...activeAlpha, ...activeNums];
  if(pool.length < 2) { alert('Please select at least 2 letters or numbers!'); return; }
  score = 0; round = 0;
  document.getElementById('game-setup-screen').style.display = 'none';
  document.getElementById('game-play').style.display = 'block';
  nextQuestion();
}

function stopGame() {
  document.getElementById('game-setup-screen').style.display = 'block';
  document.getElementById('game-play').style.display = 'none';
}

function nextQuestion() {
  answerLocked = false;
  round++;
  document.getElementById('round').textContent  = round;
  document.getElementById('score').textContent  = score;
  document.getElementById('feedback').textContent = '';
  document.getElementById('feedback').className = 'feedback-msg';

  // Pick random question character
  currentQuestion = pool[Math.floor(Math.random() * pool.length)];
  document.getElementById('question-char').textContent = currentQuestion;

  const isLetter = isNaN(parseInt(currentQuestion));
  document.getElementById('question-hint').textContent =
    isLetter ? 'Tap the correct LETTER!' : 'Tap the correct NUMBER!';

  // Build wrong choices
  const numChoices = difficulty === 'easy' ? 3 : 5;
  let choices = [currentQuestion];
  let attempts = 0;
  while(choices.length < numChoices && attempts < 100) {
    const rand = pool[Math.floor(Math.random() * pool.length)];
    if(!choices.includes(rand)) choices.push(rand);
    attempts++;
  }
  // Shuffle
  choices.sort(() => Math.random() - 0.5);

  // Render buttons
  const cg = document.getElementById('choices-grid');
  cg.innerHTML = '';
  cg.style.gridTemplateColumns = numChoices <= 3 ? 'repeat(3,1fr)' : 'repeat(3,1fr)';
  choices.forEach(ch => {
    const btn = document.createElement('button');
    btn.className = 'choice-btn';
    btn.textContent = ch;
    btn.onclick = () => checkAnswer(btn, ch);
    cg.appendChild(btn);
  });
}

function checkAnswer(btn, choice) {
  if(answerLocked) return;
  answerLocked = true;
  const fb = document.getElementById('feedback');

  if(choice === currentQuestion) {
    btn.classList.add('correct');
    score++;
    document.getElementById('score').textContent = score;
    fb.textContent = ['⭐ Correct! Well done!','🎉 Amazing!','✨ Super!','🌟 Brilliant!','🎊 Yay!'][Math.floor(Math.random()*5)];
    fb.className = 'feedback-msg good';
    // Tell ESP32 to sparkle-celebrate on the LED ring
    fetch('/celebrate').catch(()=>{});
    setTimeout(nextQuestion, 2000);
  } else {
    btn.classList.add('wrong');
    fb.textContent = '❌ Try again! The answer is ' + currentQuestion;
    fb.className = 'feedback-msg bad';
    setTimeout(() => {
      btn.classList.remove('wrong');
      answerLocked = false;
    }, 900);
  }
}
</script>
</body>
</html>
)rawhtml";

  server.send(200, "text/html", page);
}

Real Project Experience: Every Error I Hit

This section is the one I wish existed before I started. These are not hypothetical issues — these are the exact errors, in the exact order I hit them.

Error #1 — WiFi Status Code 6 (The Worst One)

Serial Monitor output: ………. [status=6] ………. [status=6]

What it means: The ESP32 can see your network but the router keeps rejecting the connection attempt before authentication completes.

Root cause in my case: My Jio router was set to broadcast 5GHz only. ESP32 is a 2.4GHz-only chip. It could see the network name in a scan but couldn’t connect to it.

Fix applied in the code:

WiFi.mode(WIFI_OFF) → full radio off, then back to STA mode
esp_wifi_set_ps(WIFI_PS_NONE) → disables power-save mode (this alone fixed it for 3 readers who tested the code)
WiFi.persistent(false) → stops old saved credentials from interfering

✅ If you’re still getting status=6 after the code fix: Turn on your phone’s hotspot, connect the ESP32 to that first. Phone hotspots are always 2.4GHz. If it connects to the hotspot but not your router, your router is definitely the problem.

Error #2 — LEDs Light Up Wrong Colours

Red looked green. Green looked red. Blue was correct. Classic.

Cause: Wrong colour order in the FastLED config. WS2812B uses GRB order, not RGB.

The fix is one word in the code: #define COLOR_ORDER GRB. If yours shows wrong colours, change it to RGB and see if that fixes it.

Error #3 — The compile error that stumped me for 40 minutes

Error message: invalid operands of types ‘const char [15]’ and ‘const char*’ to binary ‘operator+’

This happens because in C++, you cannot use the + operator to join a raw string literal with a const char* array. The fix is wrapping the array access in String():

Wrong: json += “\”effectName\”:\”” + effectNames[idx] + “\”,”; Fixed: json += “\”effectName\”:\”” + String(effectNames[idx]) + “\”,”;

Error #4 — DO Pin Causing Bootloop

Symptom: ESP32 keeps restarting. Serial Monitor shows boot messages repeating every 2 seconds.

I had connected the DO (Data Out) pin of the LED ring to GPIO 0 because I thought it needed to be connected somewhere. GPIO 0 is a boot-mode select pin on ESP32. Pulling it LOW during boot puts the board into flash mode — which is exactly what DO was doing.

Fix: Leave DO completely unconnected. It only matters when chaining multiple rings.

Common Mistakes — What I Observed vs What Tutorials Say

Mistake	What Tutorials Say	What Actually Happens
Use 3.3V for LED ring	“It might work”	Dim LEDs, wrong colours, first LED different hue
Skip the 300Ω resistor	“Optional”	Flickering after 20cm+ wire length
Connect DO pin	Not mentioned	Bootloop if DO touches GPIO 0
Use 5GHz WiFi	Not mentioned	Status=6, never connects
Wrong COLOR_ORDER	Use RGB	Red and green swap
Power from laptop USB	Fine for testing	Ring dims when all 16 LEDs are white

Why This Matters: Laptop USB ports are limited to 500mA. All 16 WS2812 LEDs at full white brightness draw ~960mA. The board will throttle or reset. Use a phone charger (5V 1A or above) once you’re done testing.

How the Code Is Structured

The code has three jobs running at the same time:

LED Engine — runs 20 effect functions, picks which one based on the current selection, updates LEDs every X milliseconds
Web Server — listens for incoming HTTP requests from your phone browser, updates settings when you tap something on the dashboard
Game Logic — lives entirely in the HTML/JavaScript inside the web page — the ESP32 just triggers a /celebrate endpoint when the right answer is tapped

Think of it like a restaurant. The LED engine is the kitchen — always cooking. The web server is the waiter — takes orders and passes them to the kitchen. The game is the menu — lives on paper (the HTML page), just calls the waiter when needed.

The 20 Effects — Speed Reference

#	Effect Name	What It Looks Like	Best Speed (ms)
0	Rainbow	All 16 LEDs show a colour wheel, slowly rotating	40
1	Rainbow Cycle	Faster rainbow sweep	20
2	Color Wipe	LEDs turn on one-by-one like dominoes falling	80
3	Theater Chase	Every 3rd LED blinks in sequence, like a cinema sign	100
4	Comet	One bright dot with a fading tail races around	30
5	Meteor Rain	White shooting stars with random fade	40
6	Larson Scanner	Red dot bouncing left-right (Knight Rider)	50
7	Fire Effect	Realistic flame in orange/red/yellow	35
8	Twinkle	Random LEDs sparkle in random colours	60
9	VU Meter	Simulated audio level bar in green/yellow/red	30
10	Solid Color	All LEDs in your chosen colour	200
11	Breathing	Colour slowly fades in and out, like breathing	30
12	Sparkle	Random white flashes on black background	50
13	Color Bounce	Cyan + magenta dots chase each other	40
14	Police Lights	Red/blue alternating halves flash	80
15	Confetti	Rapid random colour flashes, party mode	25
16	Color Pulse	Whole ring breathes through the colour wheel	30
17	Starburst	Two dots shoot outward from opposite sides	35
18	Waterfall	Blue/cyan cascades drip around the ring	40
19	Candy	Slow pastel pink/green/blue rotation — Debansh’s favourite	70

The Learn & Play Game — How I Designed It for a 3-Year-Old

Debansh can’t read yet. He knows his letters visually because we do alphabet flashcards. So the game needed to:

Show one big, unmissable letter or number
Give him 3 choices to tap (not 26 — that’s overwhelming)
Give instant, loud positive feedback when correct
Not punish wrong answers — just shake and let him try again

Here’s how a typical game round works:

A big colourful letter appears — say, the letter G
Three buttons appear below — say, G, R, and T (shuffled randomly)
Debansh taps one
If correct: screen shows “🎊 Yay!” and the LED ring bursts into full rainbow sparkle for 3 seconds
If wrong: button shakes red, “Try again!” appears, and he can keep trying
After 2 seconds, the next question loads automatically

The sparkle is the key. The first time he got one right and the LED ring exploded in colours — he literally gasped. He played for 25 minutes straight that first night.

Parent Setup Controls

Before starting the game, you see a grid of all 26 letters and numbers 0–9. Tap any to deselect it. This means:

If Debansh only knows A–E right now, select only those 5 letters — the game will only quiz from your selection
As he learns more, add more letters
Numbers and letters can be mixed or kept separate
Easy mode = 3 choices on screen. Medium = 5 choices

Reader Success Stories

I shared an early version of this project in a few ESP32 and IoT hobbyist groups. Here’s what came back:

“Status=6 was killing me for two days. The esp_wifi_set_ps(WIFI_PS_NONE) line fixed it in 30 seconds. You have no idea how long I’ve been stuck on this.” — Rohit M., Pune (shared his build in our WhatsApp group)

“My daughter is 4. She loves the Candy effect. I added her name to the dashboard header — she calls it ‘her ring’. Worth every rupee.” — Priya S., Bangalore

“I had the wrong COLOR_ORDER and spent an hour thinking my ring was faulty. The comparison table in your blog saved me from buying a new one.” — Ankit D., Delhi

Step-by-Step Setup (If You’re Starting From Zero)

Step 1 — Install Arduino IDE

Download from arduino.cc. Install it like any normal program.

Step 2 — Add ESP32 board support

Open Arduino IDE → File → Preferences
Paste this URL into “Additional Boards Manager URLs”: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
Go to Tools → Board → Boards Manager, search “esp32”, install it
Select your board: Tools → Board → ESP32 Arduino → ESP32 Dev Module

Step 3 — Install FastLED library

Sketch → Include Library → Manage Libraries → search FastLED → Install

Step 4 — Edit your WiFi credentials

Open the .ino file. Find these two lines and change them:

const char* WIFI_SSID = “YourWiFiName”; const char* WIFI_PASSWORD = “YourWiFiPassword”;

Step 5 — Upload

Plug ESP32 into your PC via USB → select the correct port under Tools → Port
Click the upload button (→ arrow)
Open Tools → Serial Monitor, set baud rate to 115200
Press the RESET button on ESP32 and watch the IP address appear

Step 6 — Open the dashboard

Type the IP address (e.g. http://192.168.1.45) into your phone browser. Make sure your phone is on the same WiFi network.

Troubleshooting at a Glance

Problem	Most Likely Cause	Fix
Status=6 loop	5GHz WiFi or power-save mode	Use 2.4GHz; code now has WIFI_PS_NONE
Status=1	Wrong SSID spelling	Copy-paste from your phone’s WiFi settings
Status=4	Wrong password	Re-type carefully, check capitalisation
LEDs don’t light up	5V not connected to VIN	Check wiring; VIN, not 3.3V
Wrong LED colours	COLOR_ORDER is RGB not GRB	Change to GRB in the code
LEDs flicker	No 300Ω resistor on data line	Add resistor between D2 and DI
ESP32 bootloops	DO pin touching GPIO 0	Leave DO pin unconnected
Dashboard not opening	Phone on different WiFi	Confirm phone and ESP32 on same network
All LEDs dim at full white	USB port can’t supply enough current	Use phone charger (5V 1A or higher)

My Observed Data vs Factory Specs

I actually measured a few things with a USB power meter and compared them to what the datasheet claims:

Measurement	Datasheet / Claimed	My Observed Value
Power draw — all LEDs off	~80mA	74mA measured
Power draw — Rainbow effect	~400mA typical	380–420mA (varies with colours)
Power draw — full white, all 16	960mA max	940mA — kills laptop USB ports
WiFi connection time (2.4GHz)	~5 seconds	8–12 seconds with my fix code
LED ring diameter	44mm outer	44.2mm — matches well
Max brightness before flicker	255 (claimed)	200 on USB power; 255 needs 1A charger

Why This Matters: Setting brightness to 255 on a laptop USB port caused my ring to randomly reset mid-demo during a family dinner. Capped at 200 now. Works perfectly.

What Debansh Thinks of It

He doesn’t know what ESP32 means. He doesn’t know what FastLED is. He doesn’t know I spent three evenings debugging WiFi connection errors.

He just knows that when he taps the right letter, his ring goes crazy with colours. And he knows it has his name on the screen.

That’s enough.

“Dada, make it do the candy one again.” — Debansh, age 3, every single evening

What’s Coming Next

I’m already working on version 2. Here’s what’s planned:

Sound reactions — a small microphone module so the LEDs pulse to music
Animal sounds game — tap the animal that matches the sound playing from the ESP32’s buzzer
Sleep timer — auto-off after 30 minutes so I don’t have to remember to kill it
Over-the-air updates — change the code without plugging in USB (ArduinoOTA)

⚠️ Bold warning for the next build: Do NOT power a buzzer directly from an ESP32 GPIO pin. GPIO pins max out at 40mA. A cheap piezo buzzer pulls 100mA+. You’ll fry the pin — and I almost did exactly that in my first test. Use a transistor. More on that in the next post.

Made with ❤️ for Debansh

ESP32 · WS2812 · FastLED · Web Dashboard · India

I Built a Smart LED Toy for My 3-Year-Old Son Using a $4 Chip — Here’s What Almost Broke Me

The Night I Almost Gave Up

What We’re Actually Building

The Shopping List (And Why Each Part Was Chosen)

Wiring: Three Wires. That’s Literally It.

Tested & Working Code

Real Project Experience: Every Error I Hit

Common Mistakes — What I Observed vs What Tutorials Say

How the Code Is Structured

The Learn & Play Game — How I Designed It for a 3-Year-Old

Reader Success Stories

Step-by-Step Setup (If You’re Starting From Zero)

Troubleshooting at a Glance

My Observed Data vs Factory Specs

What Debansh Thinks of It

What’s Coming Next

I Finally Mastered the DHT11 Temperature and Humidity Sensor

Zero False Positives: Building an Active-Deterrence NodeMCU Door Alarm

The Tale of Two Weather Stations: ESP32 vs. Uno R4

ESP32 Pinout Reference: GPIO, ADC & Safe Pins Guide

How to Build a Life-Saving LPG Gas Leakage Detector Using Arduino (The Ultimate 2026 Guide)

Beyond the Basics: Building a Zero-Lag 4WD Smart Car with Arduino R4 WiFi and ESP32

Leave a Reply Cancel reply

Get Weekly IoT & Tech Tutorials

I Bricked My Arduino UNO Q: The 100% Safe Factory Reset & eMMC Guide

The Complete Microcontroller Development Boards Guide 2026

Water Level Indicator Project: Real-Time Monitoring

Start Learning IoT Today

The Night I Almost Gave Up

What We’re Actually Building

The Shopping List (And Why Each Part Was Chosen)

Wiring: Three Wires. That’s Literally It.

Tested & Working Code

Real Project Experience: Every Error I Hit

Common Mistakes — What I Observed vs What Tutorials Say

How the Code Is Structured

The Learn & Play Game — How I Designed It for a 3-Year-Old

Reader Success Stories

Step-by-Step Setup (If You’re Starting From Zero)

Troubleshooting at a Glance

My Observed Data vs Factory Specs

What Debansh Thinks of It

What’s Coming Next

Similar Posts

Leave a Reply Cancel reply

Start Learning IoT Today