Tutoriel ESP32 54/55 - Définir la couleur de la bande LED WS2812 via Wifi | Kit d'apprentissage IoT ESP32 de SunFounder
Dans ce tutoriel, nous allons apprendre à contrôler la couleur d'une bande LED RGB WS2812 à l'aide d'un microcontrôleur ESP32 via Wi-Fi. En utilisant un sélecteur de couleurs, vous pouvez choisir différentes couleurs depuis votre appareil mobile ou votre bureau et envoyer cette information à la bande LED. Ce projet met en avant les capacités de l'ESP32, permettant une interaction fluide avec l'éclairage LED à travers une interface web.
Le microcontrôleur ESP32 est équipé à la fois de Wi-Fi et de Bluetooth, ce qui en fait un choix polyvalent pour les applications IoT. Dans ce projet, nous nous concentrerons sur la fonctionnalité Wi-Fi pour contrôler la bande LED. Les utilisateurs pourront choisir les couleurs de manière dynamique, créant ainsi une expérience visuellement engageante. Pour plus de clarté sur ce projet, n'hésitez pas à consulter la vidéo (dans la vidéo à :00).
Matériel expliqué
Les composants principaux de ce projet incluent le microcontrôleur ESP32 et la bande LED WS2812. L'ESP32 est un microcontrôleur puissant avec des capacités Wi-Fi intégrées, permettant la communication et le contrôle sans fil.
La bande LED WS2812 se compose de LED RGB adressables individuellement, vous permettant de définir la couleur de chaque LED indépendamment. Chaque LED intègre un circuit de contrôle et une LED RGB dans un seul boîtier, ce qui simplifie le câblage et le contrôle de plusieurs LED.
Détails de la fiche technique
| Fabricant | Worldsemi |
|---|---|
| Numéro de pièce | WS2812B |
| Tension logique/IO | 3,5-5,3 V |
| Tension d'alimentation | 5 V |
| Courant de sortie (par canal) | 20 mA |
| Courant de crête (par canal) | 60 mA |
| Directives sur la fréquence PWM | 400 Hz |
| Seuils logiques d'entrée | 0,3 × VDD (faible), 0,7 × VDD (élevé) |
| Chute de tension / RDS(on)/ saturation | 0,5 V |
| Limites thermiques | -40 à +80 °C |
| Paquet | 5050 SMD |
| Remarques / variantes | Disponible en différentes longueurs et configurations. |
- Assurez un approvisionnement en énergie adéquat pour éviter d'endommager les LEDs.
- Utilisez une masse commune entre l'ESP32 et la bande LED.
- Maintenez les lignes de données courtes pour éviter la dégradation du signal.
- Envisagez d'ajouter un condensateur (1000 µF) en parallèle avec l'alimentation pour la stabilité.
- Utilisez une résistance (470 Ω) sur la ligne de données pour l'intégrité du signal.
Instructions de câblage

Pour connecter l'ESP32 à la bande LED WS2812, connectez les composants comme suit : Tout d'abord, connectez la broche 5V de la bande LED à la sortie 5V de l'ESP32. Ensuite, connectez la broche de masse (GND) de la bande LED à une broche GND de l'ESP32. Enfin, connectez la broche de données de la bande LED (généralement étiquetée comme DI ou Data In) à la broche GPIO 13 de l'ESP32. Assurez-vous que toutes les connexions sont sécurisées pour garantir un bon fonctionnement.
Dans la vidéo, des méthodes de câblage alternatives sont brièvement mentionnées, mais la configuration décrite ici est la configuration recommandée pour des performances optimales (dans la vidéo à 03:00).
Exemples de code et guide étape par étape
Le code commence par inclure les bibliothèques nécessaires pour contrôler la bande LED WS2812 et configurer le serveur web. Le pin LED est défini commeLED_PINet le nombre de LEDs dans la bande est réglé avecNUM_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);
Ce snippet initialise la bibliothèque NeoPixel et configure la bande LED sur la broche spécifiée.Adafruit_NeoPixelobjet,stripest ce que vous utiliserez pour contrôler les couleurs des LED.
Ensuite, le code initialise le Wi-Fi et met en place un serveur web pour gérer les demandes entrantes. Le SSID et le mot de passe du réseau sont définis, permettant à l'ESP32 de se connecter au Wi-Fi.
const char *ssid = "your_SSID";
const char *password = "your_PASSWORD";
WebServer server(80);
Dans cet extrait, remplacezyour_SSIDetyour_PASSWORDavec vos identifiants Wi-Fi actuels. Cette connexion permet à l'ESP32 de communiquer avec des appareils sur le même réseau, permettant ainsi le contrôle à distance de la bande LED.
La fonction principale pour changer la couleur du LED estsetColor(), qui parcourt chaque LED et définit sa couleur en fonction des valeurs RGB sélectionnées.
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
}
}
Cette fonction permet de s'assurer que chaque LED dans la bande est mise à jour avec la couleur sélectionnée. Le délai permet aux LEDs de changer de couleur en douceur. Au fur et à mesure que vous interagissez avec l'interface web, cette fonction sera appelée pour refléter vos choix de couleur.
Démonstration / Ce à quoi s'attendre
Une fois la configuration terminée, vous devriez pouvoir accéder à l'interface web via l'adresse IP de l'ESP32. Vous verrez un sélecteur de couleurs qui vous permettra de choisir n'importe quelle couleur, qui sera ensuite envoyée à la bande LED. Si l'ESP32 perd la connexion Wi-Fi, la bande clignotera d'une couleur d'avertissement, indiquant le problème (dans la vidéo à 14:30).
Parmi les pièges courants, on trouve un câblage incorrect, ce qui peut entraîner le non-allumage des LED, ou l'utilisation de combinaisons SSID/mot de passe incorrectes qui empêchent l'ESP32 de se connecter au réseau. Vérifiez toujours vos connexions et vos identifiants.
Horodatages vidéo
- 00:00 Début
- 2:01 Introduction au projet
- 3:09 Docs
- 3:47 Explication des couleurs RGB
- 7:47 Câblage
- 8:40 Code Arduino pour WS2812 avec explication WIFI
- 19:35 Sélection de la carte ESP32 et du port COM dans Arduino IDE
- 21:17 Démonstration de contrôle de bande LED via wifi
/*
* Contrôler une LED RGB via wifi en utilisant l'ESP32
*
* instructions vidéo complètes https://youtu.be/J_UFHk_T9aE
* 📚⬇️ Téléchargez et la page des ressources https://robojax.com/RJT687
* Écrit par Ahmad Shamshiri le 18 décembre 2023
*
* Regardez les instructions vidéo pour cette vidéo :
*
* J'ai combiné la bibliothèque DHT d'Adafruit avec ESP8266 WebServer, les deux liens
* Bibliothèque DHT d'Adafruit sur GitHub : https://github.com/adafruit/DHT-sensor-library
* et
* ESP8266 sur GitHub : https://github.com/esp8266/Arduino
*
* Droits d'auteur (c) 2015, Majenko Technologies
* Tous droits réservés.
*
* La redistribution et l'utilisation sous forme source et binaire, avec ou sans modification, sont autorisées sous réserve que les conditions suivantes soient respectées :
*
* Les redistributions du code source doivent conserver l'avis de droit d'auteur ci-dessus, cette liste de conditions et le disclaimer suivant.
*
* Les redistributions sous forme binaire doivent reproduire l'avis de droit d'auteur ci-dessus, cette liste de conditions et le disclaimer suivant dans la documentation et/ou d'autres matériaux fournis avec la distribution.
*
* Ni le nom de Majenko Technologies ni les noms de ses contributeurs ne peuvent être utilisés pour endosser ou promouvoir des produits dérivés de ce logiciel sans autorisation écrite préalable spécifique.
*
* CE LOGICIEL EST FOURNI PAR LES DÉTENTEURS DE DROITS D'AUTEUR ET LES CONTRIBUTEURS "EN L'ÉTAT" ET TOUTES GARANTIES EXPRESSES OU IMPLICITES, Y COMPRIS, MAIS SANS S'Y LIMITER, LES GARANTIES IMPLICITES DE COMMERCIALISATION ET D'APTITUDE À UN USAGE PARTICULIER SONT DÉCLINÉES. EN AUCUN CAS, LE DÉTENTEUR DES DROITS D'AUTEUR OU LES CONTRIBUTEURS NE POURRONT ÊTRE TENUS POUR RESPONSABLES DE TOUT DOMMAGE DIRECT, INDIRECT, ACCESSOIRE, SPÉCIAL, EXEMPLAIRE OU CONSÉCUTIF (Y COMPRIS, MAIS SANS S'Y LIMITER, L'ACQUISITION DE BIENS OU DE SERVICES DE SUBSTITUTION ; PERTE D'UTILISATION, DE DONNÉES OU DE PROFITS ; OU INTERRUPTION D'ACTIVITÉ) QUELLE QUE SOIT L'ORIGINE ET À QUELQUE THÉORIE DE RESPONSABILITÉ QUE CE SOIT, QUE CE SOIT EN VERTU D'UN CONTRAT, DE LA RESPONSABILITÉ STRICTE, OU DÉLICTUELLE (Y COMPRIS LA NÉGLIGENCE OU AUTRE) DÉCOULANT EN QUELQUE MANIÈRE DE L'UTILISATION DE CE LOGICIEL, MÊME SI AVISÉ DE LA POSSIBILITÉ D'UN TEL DOMMAGE.
*/
#include <Adafruit_NeoPixel.h> // Inclure la bibliothèque Adafruit NeoPixel
#define LED_PIN 13 // Ruban LED NeoPixel
#define NUM_LEDS 8 // Nombre de LED
// Créez une instance de la classe Adafruit_NeoPixel.
Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);
// couleur initiale de la bande LED
int valueR = 178; // de 0 à 255 pour le Rouge
int valueG = 27; // de 0 à 255 pour le Vert
int valueB = 84; // de 0 à 255 pour le bleu
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", message);
if(server.argName(0) == "favcolor")
{
String newColor = String(server.arg(0)); // obtenez l'argument GET 0 et convertissez-le en chaîne de caractères
theColor = newColor.substring(1); // retirez le symbole # du début de la couleur comme #B2a48d
theColorR = newColor.substring(1, 3); // extraire B2 de #B2a48d par exemple
theColorG = newColor.substring(3, 5); // extraire a4 de #B2a48d par exemple
theColorB = newColor.substring(5, 7); // extraire 8d de #B2a48d par exemple
valueR = StrToHex(theColorR.c_str()); // convertir la chaîne en HEX pour R
valueG = StrToHex(theColorG.c_str()); // convertir une chaîne en HEX pour G
valueB = StrToHex(theColorB.c_str()); // convertir String en HEX pour B
if(showSerialData)
{
Serial.print("valueR: ");
Serial.println(valueR);
Serial.print("valueG: ");
Serial.println(valueG);
Serial.print("valueB: ");
Serial.println(valueB );
}
}
showColorPicker(); // assurez-vous que le sélecteur de couleur est affiché
// server.send(200, "text/plain", message);
}
void setColor()
{
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, valueR, valueG, valueB); // Réglez la couleur du i-ème LED sur rouge.
strip.show(); // Mettez à jour la bande LED avec les nouvelles couleurs.
delay(10); // Attendez 100 millisecondes
}
}
void noConnection()
{
for (int i = 0; i < NUM_LEDS; i++) {
strip.setPixelColor(i, 255, 45, 0); // Réglez la couleur du i-ème LED sur rouge.
strip.show(); // Mettez à jour la bande LED avec les nouvelles couleurs.
delay(50); // Attendez 100 millisecondes
}
delay(200);
for (int i = NUM_LEDS-1; i >=0; i--) {
strip.setPixelColor(i, 0, 255, 180); // Réglez la couleur du i-ème LED sur rouge.
strip.show(); // Mettez à jour la bande LED avec les nouvelles couleurs.
delay(50); // Attendez 100 millisecondes
}
}
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);
// Nous commençons par nous connecter à un réseau WiFi.
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Attendre la connexion
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(); // Initialisez la bande NeoPixel
strip.show(); // Définir la couleur initiale sur noir
setup_wifi();
server.on("/", showColorPicker); // afficher la page principale avec le sélecteur de couleurs
// server.on("/color", setColor);//change la couleur sur WS2812 LED RGB
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); // changez cela à une valeur plus grande (1000 ou plus) si vous n'avez pas besoin de lire très souvent
// Code Robojax.com pour ESP32 et DHT11 DHT22
}
Common Course Links
Common Course Files
Ressources et références
Aucune ressource pour le moment.
Fichiers📁
Aucun fichier disponible.