Sélectionner une couleur d’ animation RING LED RGB d’une page serveur Web ESP32
Description :
Projet permettant de contrôler un anneau de LED RGB (Ring LED) connecté à un ESP32 via une interface Web.
L’utilisateur peut accéder à une page Web hébergée par l’ESP32 et sélectionner la couleur ou l’animation souhaitée pour le Ring LED en temps réel. Le microcontrôleur reçoit les commandes depuis le navigateur et met à jour instantanément les LED, permettant de créer des effets lumineux personnalisés.
Cette configuration est idéale pour des projets IoT interactifs, de décoration lumineuse, ou toute application nécessitant un contrôle à distance des couleurs et animations d’un ensemble de LED RGB, tout en offrant une interface simple et intuitive.
Prérequis :
- 1 x Carte ESP32
- 1 x 12 LED RVB WS2812b en cercle
- 1 x Résistance 470Ω
- 1 x Breadboard
- Fils de connexion
Version IDE :
- Arduino IDE 2.3.5
Bibliothèque :
- LittleFS.h (Tuto dispo)
- ESPAsyncWebServer.h (version: 3.7.10 par ESP32Async)
- AsyncTCP.h (version 3.4.7 par ESP32Async)
- Adafruit_NeoPixel.h (version 1.15.1 par Adafruit)
Vidéo de démonstration :
Schéma de câblage :
Code :
Code Arduino :
int ColorAnimationSlt = 0;
#include "LittleFS.h"
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WiFi.h>
const char *ssid = "......"; //"Votre Nom_du_routeur"
const char *password = "......"; //"Votre Mot_de_passe_du_routeur"
AsyncWebServer server(80);
#include <Adafruit_NeoPixel.h>
#define LED_PIN 23
#define LED_COUNT 12
int cptpixel1;
int cptpixel2;
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
void setup() {
Serial.begin(115200);
strip.begin();
strip.clear();
strip.show();
strip.setBrightness(50);
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
if (!LittleFS.begin()) {
Serial.println("An Error has occurred while mounting LittleFS");
return;
}
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/script.js", "text/javascript");
});
server.on("/Poste_ColorAnimationSlt", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("ColorAnimationSlt", true)) {
String message;
message = request->getParam("ColorAnimationSlt", true)->value();
ColorAnimationSlt = message.toInt();
}
request->send(204);
});
server.on("/Obtenir_ColorAnimationSlt", HTTP_GET, [](AsyncWebServerRequest *request) {
String SColorAnimationSlt = String(ColorAnimationSlt);
request->send(200, "text/plain", SColorAnimationSlt);
});
delay(10);
}
void loop() {
if (ColorAnimationSlt == 1) {
colorWipe(strip.Color(255, 0, 0), 50); // Red
} else if (ColorAnimationSlt == 2) {
colorWipe(strip.Color( 0, 255, 0), 50); // Green
} else if (ColorAnimationSlt == 3) {
colorWipe(strip.Color( 0, 0, 255), 50); // Blue
}
}
void colorWipe(uint32_t color, int wait) {
if (cptpixel1 < strip.numPixels()) {
strip.setPixelColor(cptpixel1, color);
strip.show();
cptpixel1++;
delay(wait);
}
if (cptpixel1 == strip.numPixels() && cptpixel2 < strip.numPixels()) {
strip.setPixelColor(cptpixel2, strip.Color(0, 0, 0));
strip.show();
cptpixel2++;
delay(wait);
}
if (cptpixel1 == strip.numPixels() && cptpixel2 == strip.numPixels()) {
cptpixel1 = 0;
cptpixel2 = 0;
}
}
Code HTML :
( index.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<title>ESP</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8" />
<script type="text/javascript" src="https://webapps1.chicago.gov/cdn/jQuery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<center>
<div>
<br>
<h2>Bienvenue sur votre serveur Web ESP32</div></h2>
</div>
<div>
<br>
<h4>Couleur d'animation sélectionnée : <span id="InfosColorAnimationSlt"></span></h4><br>
<br>
</div>
<div>
<i>Selectioner une couleur :</i><br>
<select id="ColorAnimationSlt" class="" style="width:200px;">
<option value="" disabled selected>Choisir une couleur</option>
<option value="1">Couleur Rouge</option>
<option value="2">Couleur Verte</option>
<option value="3">Couleur Bleue</option>
</select>
<button id="Poste_ColorAnimationSlt" class="">Appliquer</button>
</div>
</center>
</body>
</html>
Code Javascript :
( script.js )
$(document).ready(function(){
$("#Poste_ColorAnimationSlt").click(function(){
var valeur = $("#ColorAnimationSlt").val();
$.post("Poste_ColorAnimationSlt",{
ColorAnimationSlt: valeur
});
getColorAnimationSlt();
});
});
function getColorAnimationSlt() {
var xhttp = new XMLHttpRequest();
var StringColorAnimationSlt;
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
StringColorAnimationSlt = this.responseText;
if(StringColorAnimationSlt == 0){
document.getElementById("InfosColorAnimationSlt").textContent = "OFF";
}
else if(StringColorAnimationSlt == 1){
document.getElementById("InfosColorAnimationSlt").textContent = "Rouge";
}
else if(StringColorAnimationSlt == 2){
document.getElementById("InfosColorAnimationSlt").textContent = "Verte";
}
else if(StringColorAnimationSlt == 3) {
document.getElementById("InfosColorAnimationSlt").textContent = "Bleue";
}
}
};
xhttp.open("GET", "Obtenir_ColorAnimationSlt", true);
xhttp.send();
};
function functioninterval() {
getColorAnimationSlt();
}
setInterval( functioninterval, 500 );
