Create NeoPixel Color Changing Light
by using: ESP32 Development Board with Cytron Robo ESP32 Expansion Board
🛠️ Hardware Required
ESP32 NodeMCU
Robo ESP32
2x NeoPixel (WS2812, it is embedded on the Robo ESP32 on Pin D15)
330Ω resistor (recommended, if you are not using the Robo ESP32)
External 5V power supply (if using more LEDs)
🔧 Wiring
NeoPixel DIN → GPIO 15
GND → GND
VCC → 5V
📥 Arduino Libraries
Adafruit_NeoPixel.hESPAsyncWebServerandAsyncTCP(use ESPAsyncWebServer examples to install properly)
Note: For mobile support, we’ll use HTML5 and CSS3 + a JavaScript color picker.
#include <WiFi.h>
#include <Adafruit_NeoPixel.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
const char* ssid = “YOUR_SSID”;
const char* password = “YOUR_PASSWORD”;
#define LED_PIN 15
#define NUMPIXELS 2
Adafruit_NeoPixel pixels(NUMPIXELS, LED_PIN, NEO_GRB + NEO_KHZ800);
AsyncWebServer server(80);
const char index_html[] PROGMEM = R”rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<title>NeoPixel Controller</title>
<style>
body { font-family: Arial; text-align: center; }
input[type=color] { width: 80%; height: 60px; }
</style>
</head>
<body>
<h2>NeoPixel Color Picker</h2>
<input type=”color” id=”colorPicker” value=”#ff0000” />
<script>
const picker = document.getElementById(”colorPicker”);
picker.addEventListener(”input”, function() {
const color = picker.value.substring(1);
fetch(`/set?color=${color}`);
});
</script>
</body>
</html>
)rawliteral”;
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
pixels.begin();
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(”.”);
}
Serial.println(WiFi.localIP());
server.on(”/”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/html”, index_html);
});
server.on(”/set”, HTTP_GET, [](AsyncWebServerRequest *request){
if (request->hasParam(”color”)) {
String color = request->getParam(”color”)->value();
long number = strtol(color.c_str(), NULL, 16);
byte r = (number >> 16) & 0xFF;
byte g = (number >> 8) & 0xFF;
byte b = number & 0xFF;
for (int i = 0; i < NUMPIXELS; i++) {
pixels.setPixelColor(i, pixels.Color(r, g, b));
}
pixels.show();
}
request->send(200, “text/plain”, “OK”);
});
server.begin();
}
void loop() {}