Récupérer la valeur d’un input « color » d’une page web sur l’esp32
Description :
Projet permettant de récupérer la valeur d’un champ input de type “color” depuis une page Web hébergée sur un ESP32, pour contrôler des LEDs ou interfaces RGB.
L’utilisateur choisit une couleur dans le navigateur, et l’ESP32 reçoit la valeur hexadécimale correspondante via son serveur Web intégré. Cette valeur peut ensuite être utilisée pour changer la couleur d’une LED RGB, d’un anneau de LED, ou tout dispositif lumineux dans des projets interactifs ou domotiques.
Cette configuration offre un contrôle intuitif et en temps réel des couleurs depuis une interface Web, sans connexion filaire directe.
Prérequis :
- 1 x Carte ESP32
- 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)
Vidéo de démonstration :
Schéma de câblage :
Code :
Code Arduino :
#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);
int ValeurR = 219;
int ValeurG = 51;
int ValeurB = 51;
String ValeurHex = "#db3333";
char msg[20];
void setup() {
Serial.begin(115200);
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: ");
// Imprimer l'adresse IP locale ESP
Serial.println(WiFi.localIP());
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("/write_ValeurR", HTTP_POST, [](AsyncWebServerRequest *request) {
if (request->hasParam("ValeurR", true)) {
String message;
message = request->getParam("ValeurR", true)->value();
ValeurR = message.toInt();
}
if (request->hasParam("ValeurG", true)) {
String message;
message = request->getParam("ValeurG", true)->value();
ValeurG = message.toInt();
}
if (request->hasParam("ValeurB", true)) {
String message;
message = request->getParam("ValeurB", true)->value();
ValeurB = message.toInt();
}
if (request->hasParam("ValeurHex", true)) {
String message;
message = request->getParam("ValeurHex", true)->value();
ValeurHex = message;
}
request->send(204);
});
server.on("/read_ValeurHex", HTTP_GET, [](AsyncWebServerRequest *request) {
String message = String(ValeurHex);
request->send(200, "text/plain", message);
});
// Démarrer le serveur
server.begin();
}
void loop() {
Serial.print("Valeur INPUT Color : RGB(");
Serial.print(ValeurR);
Serial.print(",");
Serial.print(ValeurG);
Serial.print(",");
Serial.print(ValeurB);
Serial.print(") ,");
Serial.println(ValeurHex);
delay(500);
}
Code HTML :
( index.html )
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Color Picker avec bouton</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>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
}
.picker-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
input[type="color"] {
width: 120px;
height: 60px;
border: none;
background: none;
cursor: pointer;
}
#colorInfo {
font-size: 18px;
line-height: 1.6;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 6px;
background-color: #3498db;
color: #fff;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h2>Sélecteur de couleur ESP32</h2>
<div class="picker-wrapper">
<input type="color" id="colorPicker">
<button id="validateBtn">Valider</button>
<div id="colorInfo">
<div><strong>HEX :</strong> <span id="hexValue"></span></div>
<div><strong>RGB :</strong> <span id="rgbValue"></span></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Code Javascript :
( script.js )
const colorInput = document.getElementById("colorPicker");
const hexValue = document.getElementById("hexValue");
const rgbValue = document.getElementById("rgbValue");
const validateBtn = document.getElementById("validateBtn");
var ValeurR;
var ValeurG;
var ValeurB;
var ValeurHex;
function hexToRgb(hex) {
const r = parseInt(hex.substr(1, 2), 16);
const g = parseInt(hex.substr(3, 2), 16);
const b = parseInt(hex.substr(5, 2), 16);
ValeurR = r;
ValeurG = g;
ValeurB = b;
return `rgb(${r}, ${g}, ${b})`;
}
function updateColorDisplay(color) {
const rgb = hexToRgb(color);
hexValue.textContent = color;
rgbValue.textContent = rgb;
}
// Initial display
updateColorDisplay(colorInput.value);
$(document).ready(function () {
$("#validateBtn").click(function () {
updateColorDisplay(colorInput.value);
ValeurHex = colorInput.value;
$.post("write_ValeurR", {
ValeurR: ValeurR,
ValeurG: ValeurG,
ValeurB: ValeurB,
ValeurHex: ValeurHex
});
});
});
function getDataValeurHex() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("colorPicker").value = this.responseText;
}
updateColorDisplay(colorInput.value);
};
xhttp.open("GET", "read_ValeurHex", true);
xhttp.send();
};
getDataValeurHex();
