Wi-Fi Controlled NeoPixel Ring using ESP8266
Control stunning RGB animations wirelessly from your browser or phone — rainbow, breathing, color wipe and custom effects, all battery-powered.
📋 Project Overview
This project turns an ESP8266 NodeMCU into a wireless RGB lighting controller. The ESP8266 hosts a web server accessible from any browser on your local network — open it on your phone or laptop to control every pixel of the NeoPixel ring in real time. Because it runs on a 5V battery pack, the whole system is completely cable-free.
Each LED is individually addressable — full RGB control per pixel
🌈 Controllable Lighting Effects
Full spectrum colour rotation across all pixels
Smooth fade in/out on a single colour
One pixel at a time fill in chosen colour
Set all pixels to any RGB value instantly
Moving dot sequence animation
Pixel-by-pixel programming via web UI
🛒 Components Required
📌 Pin Connections
| NeoPixel Pin | Connection | Notes |
|---|---|---|
| DIN (Data In) | D4 (GPIO 2) via 330Ω resistor | Always use series resistor to protect data line |
| 5V / VCC | External 5V supply (+) | Do NOT power from NodeMCU pin — use dedicated supply |
| GND | Common GND (NodeMCU + supply) | Shared ground is essential |
🔌 Circuit Diagram
🧪 Try the Simulation
💻 Arduino Code — NeoPixel Web Server
Install Adafruit NeoPixel library and ESP8266WiFi (via ESP8266 board package) before uploading.
/* * Wi-Fi Controlled NeoPixel Ring * MakeMindz.com * * Board : NodeMCU 1.0 (ESP-12E Module) * Ring : WS2812B NeoPixel — 12 or 16 LEDs on D4 * Control : Web server hosted on ESP8266 * Open http://<device-IP>/ in any browser */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <Adafruit_NeoPixel.h> // ── Configuration ── const char* ssid = "YOUR_WIFI_SSID"; const char* password = "YOUR_WIFI_PASSWORD"; #define LED_PIN D4 // NeoPixel data pin (GPIO 2) #define NUM_LEDS 12 // Number of pixels in your ring #define BRIGHTNESS 80 // 0-255 default brightness Adafruit_NeoPixel ring(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800); ESP8266WebServer server(80); uint8_t r = 255, g = 0, b = 128; // Default colour String currentEffect = "solid"; void setup() { Serial.begin(115200); ring.begin(); ring.setBrightness(BRIGHTNESS); ring.show(); // Connect to Wi-Fi Serial.print("Connecting to WiFi"); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("\nConnected! IP: " + WiFi.localIP().toString()); // ── Web server routes ── server.on("/", handleRoot); server.on("/color", handleColor); server.on("/effect", handleEffect); server.on("/brightness", handleBrightness); server.begin(); Serial.println("Web server started"); } void loop() { server.handleClient(); // Run active effect if (currentEffect == "rainbow") rainbowCycle(); else if (currentEffect == "breathe") breathe(); else if (currentEffect == "wipe") colorWipe(ring.Color(r,g,b), 50); else solidColor(r, g, b); } // ── Web page HTML ── void handleRoot() { String html = "<!DOCTYPE html><html><head>" "<meta name='viewport' content='width=device-width,initial-scale=1'>" "<title>NeoPixel Control</title>" "<style>body{font-family:sans-serif;text-align:center;background:#0f0720;color:#c4b5fd}" "button{margin:6px;padding:12px 20px;border:none;border-radius:8px;cursor:pointer;font-size:14px;color:white}" "input[type=range]{width:80%;margin:10px}</style></head><body>" "<h2>💡 NeoPixel Ring Control</h2>" "<button style='background:#dc2626' onclick=\"fetch('/color?r=255&g=0&b=0')\">Red</button>" "<button style='background:#16a34a' onclick=\"fetch('/color?r=0&g=255&b=0')\">Green</button>" "<button style='background:#2563eb' onclick=\"fetch('/color?r=0&g=0&b=255')\">Blue</button>" "<button style='background:#db2777' onclick=\"fetch('/color?r=255&g=0&b=128')\">Pink</button><br>" "<button style='background:#7c3aed' onclick=\"fetch('/effect?name=rainbow')\">Rainbow</button>" "<button style='background:#0891b2' onclick=\"fetch('/effect?name=breathe')\">Breathe</button>" "<button style='background:#d97706' onclick=\"fetch('/effect?name=wipe')\">Color Wipe</button>" "<button style='background:#374151' onclick=\"fetch('/effect?name=solid')\">Solid</button><br>" "<p>Brightness:</p>" "<input type='range' min='0' max='255' value='80' oninput=\"fetch('/brightness?val='+this.value)\">" "</body></html>"; server.send(200, "text/html", html); } void handleColor() { r = server.arg("r").toInt(); g = server.arg("g").toInt(); b = server.arg("b").toInt(); currentEffect = "solid"; server.send(200, "text/plain", "OK"); } void handleEffect() { currentEffect = server.arg("name"); server.send(200, "text/plain", "OK"); } void handleBrightness() { ring.setBrightness(server.arg("val").toInt()); ring.show(); server.send(200, "text/plain", "OK"); } // ── LED Effect Functions ── void solidColor(uint8_t red, uint8_t grn, uint8_t blu) { for (int i = 0; i < NUM_LEDS; i++) ring.setPixelColor(i, ring.Color(red, grn, blu)); ring.show(); } void rainbowCycle() { static uint16_t j = 0; for (int i = 0; i < NUM_LEDS; i++) ring.setPixelColor(i, ring.ColorHSV((i * 65536L / NUM_LEDS + j) & 65535)); ring.show(); j += 256; delay(10); } void breathe() { for (int b = 0; b <= 255; b += 5) { ring.setBrightness(b); solidColor(r,g,b); delay(15); server.handleClient(); } for (int b = 255; b >= 0; b -= 5) { ring.setBrightness(b); solidColor(r,g,b); delay(15); server.handleClient(); } } void colorWipe(uint32_t color, int wait) { for (int i = 0; i < NUM_LEDS; i++) { ring.setPixelColor(i, color); ring.show(); delay(wait); server.handleClient(); } }
🛠️ Step-by-Step Build Instructions
Get your ESP8266 NodeMCU, a 12 or 16 LED WS2812B NeoPixel ring, a 330Ω resistor, 1000µF capacitor, and a 5V power source capable of at least 1–2A.
Connect NodeMCU D4 → 330Ω resistor → NeoPixel DIN. The resistor prevents signal reflections from damaging the first pixel.
Connect external 5V+ to NeoPixel 5V. Connect external GND to NeoPixel GND AND to NodeMCU GND. Shared ground is essential — without it, signals won't work correctly.
Solder or clip the 1000µF electrolytic capacitor across the NeoPixel's power rails (+ to 5V, − to GND). Place it as close to the ring as possible.
In Arduino IDE: Tools → Manage Libraries → install Adafruit NeoPixel and Adafruit Unified Sensor. The ESP8266WiFi library comes with the ESP8266 board package.
In the code, replace YOUR_WIFI_SSID and YOUR_WIFI_PASSWORD with your actual network details.
Select Board → NodeMCU 1.0 (ESP-12E Module), choose the COM port, and click Upload.
Open Serial Monitor at 115200 baud. After connecting, the NodeMCU will print its IP address (e.g., 192.168.1.105).
Open a browser on any device connected to the same Wi-Fi. Navigate to the IP address shown. Use the buttons and slider to change colours, effects and brightness in real time.
☁️ Extend to IoT Platforms
The web server approach works on local Wi-Fi. To control from anywhere in the world, integrate with an IoT platform:
Mobile app control with colour picker and sliders. Add virtual pins in Blynk console.
Publish colour commands to an MQTT broker. Subscribe on NodeMCU and parse JSON.
Official dashboard with built-in ESP8266 support. Add a colour variable widget.
Integrate as an MQTT light entity. Control with voice via Alexa or Google Home.
Comments
Post a Comment