Récupérer la valeur d’un input « color » d’une page web sur l’esp32
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();
