Tutorial ESP32 54/55 - Establecer el color de la tira de LED WS2812 a través de Wifi | Kit de aprendizaje IoT ESP32 de SunFounder
En este tutorial, aprenderemos cómo controlar el color de una tira de LED RGB WS2812 utilizando un microcontrolador ESP32 a través de Wi-Fi. Al utilizar un selector de colores, puedes elegir diferentes colores desde tu dispositivo móvil o de escritorio y enviar esa información a la tira de LED. Este proyecto muestra las capacidades del ESP32, permitiendo una interacción fluida con la iluminación LED a través de una interfaz web.
El microcontrolador ESP32 está equipado con Wi-Fi y Bluetooth, lo que lo convierte en una opción versátil para aplicaciones de IoT. En este proyecto, nos centraremos en la funcionalidad de Wi-Fi para controlar la tira de LED. Los usuarios podrán elegir colores de manera dinámica, creando una experiencia visualmente atractiva. Para mayor claridad sobre este proyecto, asegúrate de ver el video en (en video en 00:00).
Hardware Explicado
Los componentes principales para este proyecto incluyen el microcontrolador ESP32 y la tira de LED WS2812. El ESP32 es un microcontrolador potente con capacidades de Wi-Fi incorporadas, lo que permite la comunicación y el control inalámbricos.
La tira de LED WS2812 consta de LEDs RGB direccionales individualmente, lo que te permite establecer el color de cada LED de forma independiente. Cada LED incorpora un circuito de control y un LED RGB dentro de un solo paquete, lo que simplifica el cableado y control de múltiples LEDs.
Detalles de la hoja de datos
| Fabricante | Worldsemi |
|---|---|
| Número de pieza | WS2812B |
| Voltaje de lógica/IO | 3.5-5.3 V |
| Tensión de alimentación | 5 V |
| Corriente de salida (por canal) | 20 mA |
| Corriente máxima (por canal) | 60 mA |
| Orientación sobre la frecuencia PWM | 400 Hz |
| Umbrales de lógica de entrada | 0.3 × VDD (bajo), 0.7 × VDD (alto) |
| Caída de tensión / RDS(on)saturación | 0.5 V |
| Límites térmicos | -40 a +80 °C |
| Paquete | 5050 SMD |
| Notas / variantes | Disponible en varias longitudes y configuraciones. |
- Asegúrese de proporcionar una fuente de alimentación adecuada para evitar dañar los LEDs.
- Utiliza un punto común entre el ESP32 y la tira de LED.
- Mantenga las líneas de datos cortas para evitar la degradación de la señal.
- Considera añadir un condensador (1000 µF) en paralelo con la fuente de alimentación para estabilidad.
- Utiliza una resistencia (470 Ω) en la línea de datos para la integridad de la señal.
Instrucciones de cableado

Para cablear el ESP32 a la tira de LED WS2812, conecta los componentes de la siguiente manera: Primero, conecta el pin de 5V de la tira de LED a la salida de 5V del ESP32. A continuación, conecta el pin de tierra (GND) de la tira de LED a un pin de GND en el ESP32. Finalmente, conecta el pin de datos de la tira de LED (normalmente etiquetado como DI o Data In) al pin GPIO 13 del ESP32. Asegúrate de que todas las conexiones estén seguras para garantizar un funcionamiento adecuado.
En el video, se mencionan brevemente métodos de cableado alternativos, pero la configuración descrita aquí es la configuración recomendada para un rendimiento óptimo (en el video a las 03:00).
Ejemplos de código y guía paso a paso
El código comienza incluyendo las bibliotecas necesarias para controlar la tira de LED WS2812 y configurar el servidor web. El pin de LED se define comoLED_PINy el número de LEDs en la tira se establece conNUM_LEDS.
#define LED_PIN 13 // NeoPixel LED strip
#define NUM_LEDS 8 // Number of LEDs
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);
Este fragmento inicializa la biblioteca NeoPixel y configura la tira de LED en el pin especificado.Adafruit_NeoPixelobjeto,strip, es lo que usarás para controlar los colores del LED.
A continuación, el código inicializa Wi-Fi y configura un servidor web para manejar las solicitudes entrantes. Se definen el SSID y la contraseña de la red, lo que permite que el ESP32 se conecte a Wi-Fi.
const char *ssid = "your_SSID";
const char *password = "your_PASSWORD";
WebServer server(80);
En este extracto, reemplazayour_SSIDyyour_PASSWORDcon tus credenciales de Wi-Fi actuales. Esta conexión permite que el ESP32 se comunique con dispositivos en la misma red, lo que permite el control remoto de la tira de LED.
La función principal para cambiar el color del LED essetColor(), que itera a través de cada LED y establece su color según los valores RGB seleccionados.
void setColor() {
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, valueR, valueG, valueB); // Set the color of the i-th LED
strip.show(); // Update the LED strip with the new colors
delay(10); // Wait for 10 milliseconds
}
}
Esta función garantiza que cada LED en la tira se actualice con el color seleccionado. El retardo permite que los LED cambien de color de manera suave. A medida que interactúas con la interfaz web, se llamará a esta función para reflejar tus elecciones de color.
Demostración / Qué Esperar
Cuando la configuración esté completa, deberías poder acceder a la interfaz web a través de la dirección IP del ESP32. Verás un selector de color que te permitirá elegir cualquier color, que luego se enviará a la tira de LED. Si el ESP32 pierde la conexión Wi-Fi, la tira parpadeará con un color de advertencia, indicando el problema (en el video a las 14:30).
Las trampas comunes incluyen el cableado incorrecto, lo que puede llevar a que los LED no se enciendan, o el uso de combinaciones incorrectas de SSID/contraseña que impiden que el ESP32 se conecte a la red. Siempre verifica tus conexiones y credenciales.
Horarios de video
- 00:00 Comenzar
- 2:01 Introducción al proyecto
- 3:09 Docs
- 3:47 Explicación del color RGB
- 7:47 Cableado
- 8:40 Código de Arduino para WS2812 con WIFI explicado
- 19:35 Seleccionando la placa ESP32 y el puerto COM en Arduino IDE
- 21:17 Demostración de control de tira LED a través de wifi
/*
* Controla el LED RGB a través de wifi utilizando ESP32
*
* instrucciones en video completas https://youtu.be/J_UFHk_T9aE
* 📚⬇️ Descarga y página de recursos https://robojax.com/RJT687
* Escrito por Ahmad Shamshiri el 18 de diciembre de 2023
*
* Mira la instrucción en video para este video:
*
* He combinado la biblioteca DHT de Adafruit con el WebServer ESP8266, ambos enlaces
* Biblioteca DHT de Adafruit en GitHub: https://github.com/adafruit/DHT-sensor-library
* y
* ESP8266 en GitHub: https://github.com/esp8266/Arduino
*
* Derechos de autor (c) 2015, Majenko Technologies
* Todos los derechos reservados.
*
* La redistribución y el uso en formas de código fuente y binario, con o sin modificación,
* están permitidos siempre que se cumplan las siguientes condiciones:
*
* Las redistribuciones del código fuente deben retener el aviso de copyright anterior, esta
* lista de condiciones y el siguiente descargo de responsabilidad.
*
* Las redistribuciones en forma binaria deben reproducir el aviso de copyright anterior, esta
* lista de condiciones y el siguiente descargo de responsabilidad en la documentación y/o
* otros materiales proporcionados con la distribución.
*
* Ni el nombre de Majenko Technologies ni los nombres de sus
* colaboradores pueden ser utilizados para respaldar o promover productos derivados de
* este software sin una autorización previa por escrito específica.
*
* ESTE SOFTWARE SE PROPORCIONA POR LOS TITULARES DE LOS DERECHOS DE AUTOR Y COLABORADORES "TAL CUAL" Y
* CUALQUIER GARANTÍA EXPRESA O IMPLÍCITA, INCLUYENDO, PERO NO LIMITÁNDOSE A, LAS GARANTÍAS IMPLÍCITAS
* DE COMERCIABILIDAD Y ADECUACIÓN PARA UN PROPÓSITO PARTICULAR QUEDAN EXCLUIDAS. EN NINGÚN CASO EL TITULAR DE LOS DERECHOS DE AUTOR O LOS COLABORADORES SERÁN RESPONSABLES DE
* DAÑOS DIRECTOS, INDIRECTOS, INCIDENTALES, ESPECIALES, EJEMPLARES O CONSECUENTES
* (INCLUYENDO, PERO NO LIMITÁNDOSE A, LA OBTENCIÓN DE BIENES O SERVICIOS SUSTITUTIVOS;
* PÉRDIDA DE USO, DATOS O GANANCIAS; O INTERRUPCIÓN DEL NEGOCIO) CAUSADOS DE CUALQUIER MANERA Y EN
* CUALQUIER TEORÍA DE RESPONSABILIDAD, YA SEA EN CONTRATO, RESPONSABILIDAD ESTRICTA O DELITO
* (INCLUYENDO NEGLIGENCIA U OTRA) QUE SURJA DE CUALQUIER MANERA DEL USO DE ESTE
* SOFTWARE, AUNQUE SE HAYA ADVERTIDO DE LA POSIBILIDAD DE TAL DAÑO.
*/
#include <Adafruit_NeoPixel.h> // Incluye la biblioteca Adafruit NeoPixel
#define LED_PIN 13 // Tira de LED NeoPixel
#define NUM_LEDS 8 // Número de LEDs
// Crea una instancia de la clase Adafruit_NeoPixel
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);
// color inicial de la tira LED
int valueR = 178; // de 0 a 255 para Rojo
int valueG = 27; // de 0 a 255 para Verde
int valueB = 84; // de 0 a 255 para Azul
bool showSerialData = false;
String theColorR, theColorG, theColorB;
String theColor ="ff0000";
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
const char *ssid = "dars";
const char *password = "hhhhhhhhhhh";
WebServer server(80);
void showColorPicker() {
String page = "<!DOCTYPE html>\n";
page +="<html>\n";
page +="<body>\n";
page +="<div style=\"zoom: 300%;\">\n";
page +="<h2>Robojax RGB Color picker</h2>\n";
page +="<p id=\"result\"></p>\n";
page +="<form action=\"/color\">\n";
page +=" <label for=\"favcolor\">Select your favorite color:</label>\n";
page +=" <input type=\"color\" id=\"favcolor\" name=\"favcolor\" value=\"#";
page += theColor;
page +="\"><br><br>\n";
page +=" <input type=\"submit\" value=\"Set Color\" />\n";
page +="</form> \n</div>\n";
page +="</body>\n";
page +="</html>\n";
server.send(200, "text/html", page);
}
// from https://stackoverflow.com/questions/44683071/convert-string-as-hex-to-hexadecimal
uint64_t StrToHex(const char* str)
{
return (uint64_t) strtoull(str, 0, 16);
}
void getColor(){
// server.send(200, "text/plain", mensaje);
if(server.argName(0) == "favcolor")
{
String newColor = String(server.arg(0)); // obtén el argumento GET 0 y conviértelo en cadena
theColor = newColor.substring(1); // elimina el símbolo # del principio del color como #B2a48d
theColorR = newColor.substring(1, 3); // extraer B2 de #B2a48d por ejemplo
theColorG = newColor.substring(3, 5); // extraer a4 de #B2a48d, por ejemplo
theColorB = newColor.substring(5, 7); // extraer 8d de #B2a48d por ejemplo
valueR = StrToHex(theColorR.c_str()); // convertir String a HEX para R
valueG = StrToHex(theColorG.c_str()); // convertir String a HEX para G
valueB = StrToHex(theColorB.c_str()); // convertir cadena a HEX para B
if(showSerialData)
{
Serial.print("valueR: ");
Serial.println(valueR);
Serial.print("valueG: ");
Serial.println(valueG);
Serial.print("valueB: ");
Serial.println(valueB );
}
}
showColorPicker(); // asegúrate de que se muestre el selector de color
// server.send(200, "text/plain", mensaje);
}
void setColor()
{
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, valueR, valueG, valueB); // Establece el color del i-ésimo LED a rojo.
strip.show(); // Actualiza la tira LED con los nuevos colores.
delay(10); // Espera 100 milisegundos
}
}
void noConnection()
{
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, 255, 45, 0); // Establece el color del i-ésimo LED a rojo.
strip.show(); // Actualiza la tira LED con los nuevos colores.
delay(50); // Espera 100 milisegundos
}
delay(200);
for (int i = NUM_LEDS-1; i >=0; i--) {
strip.setPixelColor(i, 0, 255, 180); // Establece el color del i-ésimo LED a rojo.
strip.show(); // Actualiza la tira LED con los nuevos colores.
delay(50); // Espera 100 milisegundos
}
}
void handleNotFound() {
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
void setup_wifi() {
delay(10);
// Comenzamos conectándonos a una red WiFi.
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Esperar conexión
while (WiFi.status() != WL_CONNECTED) {
noConnection();
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("Open: http: // ");
Serial.print(WiFi.localIP());
Serial.println(" to read temperature");
if (MDNS.begin("robojaxRGB")) {
Serial.println("MDNS responder started");
}
}
void setup(void) {
Serial.begin(115200);
strip.begin(); // Inicializa la tira de NeoPixel
strip.show(); // Establecer el color inicial en negro
setup_wifi();
server.on("/", showColorPicker); // mostrar la página principal con selector de color
// server.on("/color", setColor);//cambia el color en el LED RGB WS2812
server.on("/color", HTTP_GET, getColor);
server.on("/inline", []() {
server.send(200, "text/plain", "this works as well");
});
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
// Robojax.com
while (WiFi.status() != WL_CONNECTED) {
setup_wifi();
}
server.handleClient();
// showColorPicker();
setColor();
delay(300); // cambia esto a un valor mayor (1000 o más) si no necesitas leer muy a menudo
// Código de Robojax.com para ESP32 y DHT11 DHT22
}
Common Course Links
Common Course Files
Recursos y referencias
Aún no hay recursos.
Archivos📁
No hay archivos disponibles.