Sélectionner une page

Contrôleur de tension LED RGB basado en ESP8266 IoT

Dans ce projet, nous allons monter un contrôleur de bande LED RGB basé sur le WiFi en utilisant l’ESP8266 et l’IDE Arduino. Nous avons d’abord fabriqué un contrôleur de LED RGB de base en utilisant NodeMCU pour comprendre comment contrôler les couleurs des LED RGB en utilisant PWM. Ensuite, nous fabriquons un petit contrôleur avancé de bandes LED RGB avec une interface utilisateur de sélection de couleurs facile à utiliser, comme illustré ci-dessous.

Avant de passer directement à la programmation, examinons le fonctionnement et les types de LED RGB.

Comment fonctionne la LED RGB ?

RGB LED signifie la combinaison de trois LED rouges, bleues et vertes dans un même boîtier. Les produits LED RGB combinent ces trois couleurs pour produire plus de 16 millions de couleurs de lumière.

Comment mélanger les couleurs dans les LED RGB ?

Une seule puce de LED ne peut émettre qu’une lumière monochromatique qui pourrait être l’une des trois couleurs primaires – rouge, vert et bleu, connue sous le nom de RGB. Pour obtenir plus de couleurs, il faut utiliser trois matrices de LED ensemble pour le mélange des couleurs RVB. En général, 7 couleurs peuvent être produites en contrôlant le changement de canal pour chaque couleur primaire. Pour produire plus de 7 couleurs, chaque canal de couleur doit pouvoir changer de luminosité, et pas seulement s’allumer et s’éteindre. Une méthode de contrôle populaire est le PWM, dont la plage de fonctionnement du cycle détermine les niveaux de luminosité disponibles. Plus il y a de niveaux disponibles, plus on peut produire de couleurs. Outre sa popularité dans des applications telles que l’éclairage urbain extérieur, la conception d’éclairages de scène, l’éclairage de décoration intérieure et la matrice d’affichage LED, la technologie de mélange des couleurs RVB se retrouve aussi depuis peu dans le rétro-éclairage des écrans LCD et des projecteurs.

Controlador de mezcla de colores de LED RGB - Cómo construir un controlador de tiras LED RGB usando ESP8266

Quels sont les types de LED RGB ?

Les LED RGB sont disponibles en différentes tailles, formes et puissances. La bande LED RGB est la plus utilisée.

LED tricolore difuso de 5 mm

La LED diffuse tricolore de 5 mm avec des puces LED séparées rouge, verte et bleue dans un boîtier de 5 mm est utilisée comme indicateur d’état, par exemple, elle peut montrer l’état de la connectivité wifi. Il a un angle de vue de 60 degrés. Les LED RVB diffuses mélangent la couleur dans un seul paquet de LED au lieu d’apparaître comme 3 LED différentes comme indiqué ci-dessous.

5 mm RGB LED - Cómo construir un controlador de tiras LED RGB usando ESP8266 Ils sont disponibles en deux types : noeud commun et cathode commune, ce qui signifie que vous connectez une broche à 5V ou GND et que vous reliez ensuite les trois autres pattes à la terre ou à 5V par l’intermédiaire d’une résistance. Le type le plus couramment utilisé est le type de nœud commun plutôt que le type DC car les puces de commande multi-LED (telles que la TLC5940/TLC5941) sont souvent conçues exclusivement pour le CA et ne peuvent pas être utilisées avec la cathode commune.

Particularités des LED RGB de 5mm

  • 5mm de diamètre
  • Rojo : Longitude de onda de 630 nm, Verde : 525 nm, Azul : 430 nm
  • Rojo : 2,1-2,5V de tensión de avance, a una corriente de 20mA, Verde : 3.8-4.5V, Azul : 3.8-4.5V
  • Rojo : 500 mcd de brillo típico, Verde : 600 mcd, Azul : 300 mcd

Conexiones de clavijas de LEDs RGB de 5mm :

5mm LED pin conexiones - Cómo construir un controlador de tiras LED RGB usando ESP8266

SMD RGB 5050 LED

SMD 5050 RGB LED - Cómo construir un controlador de tiras LED RGB usando ESP8266

Ces LED de surface sont un moyen facile d’ajouter beaucoup de points de couleur à votre projet. Ils sont couramment utilisés dans les bandes LED RGB, de même taille et de même forme. Ils ont un demi-centimètre de côté, ce qui les rend petits mais pas au point qu’il soit difficile de les souder à la main. Il y a trois LEDs à l’intérieur, rouge, verte et bleue, et parce qu’elles sont si proches les unes des autres, elles se mélangent très bien, sans avoir besoin d’un diffuseur. La LED est brillante, 3800mcd.

SMD 5050 RGB LED PIN connections

conexiones PIN del SMD 5050 RGB LED - Cómo construir un controlador de tiras LED RGB usando ESP8266

 

Module LED RGB Arduino KY-016

Arduino KY 016 RGB LED modulo - Cómo construir un controlador de tiras LED RGB usando ESP8266

Le module LED RGB est composé de résistances RGB et de résistances de limitation de courant de 5 mm. Vous pouvez contrôler ses couleurs en utilisant le PWM.

Le code d’Arduino pour le contrôle des couleurs des LED RGB

Voici un exemple de code pour le contrôle des couleurs d’une LED RGB en utilisant le PWM. Effectuez les connexions du module à Arduino.

Arduino Module LED RGB
9 R
10 G
11 B
+5V
/*
KY016 RGB LED module
Arduino Tutoriels
PWM LED Color Generation */ int redpin = 9; // select the pin for the red LED int greenpin = 10 ;// select the pin for the green LED int bluepin = 11; // select the pin for the blue LED int val; void setup () { pinMode (redpin, OUTPUT); pinMode (bluepin, OUTPUT); pinMode (greenpin, OUTPUT); } void loop () { for (val = 255; val> 0; val --) { analogWrite (11, val); analogWrite (10, 255-val); analogWrite (9, 128-val); delay (15); } for (val = 0; val <255; val ++) { analogWrite (11, val); analogWrite (10, 255-val); analogWrite (9, 128-val); delay (15); } }

 

Bande LED RGB

Ces bandes de LED RVB sont de deux types, l’une avec des LED RVB SMD 5050 et l’autre avec WS2812 est une bande de LED programmable où vous pouvez contrôler chaque couleur de LED. Ils en ont 30, 60, etc. LEDs RGB par mètre.

Bandes de RGB LED 5050

bobina leds - Cómo construir un controlador de tiras LED RGB usando ESP8266

Ces types de barrettes de LED peuvent contrôler l’ensemble de la barrette en une seule fois avec n’importe quel microcontrôleur et trois transistors ou ULN2003. De la façon dont ils sont câblés, vous aurez besoin d’une alimentation de 12VDC et ensuite de mettre à la terre les broches R/G/B pour allumer les trois couleurs. Utilisez les entrées NPN ou MOSFET à canal N et PWM pour le mélange des couleurs.

Il est disponible avec l’option d’être résistant aux intempéries et non recouvert d’une couleur de fond blanche ou noire. Il y a une bande adhésive 3M au dos qui devrait adhérer à la plupart des surfaces lisses.

Vous pouvez couper ces bandes de LED très facilement avec des coupe-fils, il y a des lignes de coupe tous les 10 cm (3 LED chacune), et couper le couvercle étanche avec un couteau. Ils sont livrés en rouleaux de 5 mètres avec un connecteur.

Bandes de LED RGB WS2812 (NeoPixel)

tira de leds neopixels - Cómo construir un controlador de tiras LED RGB usando ESP8266

Ces bandes LED RVB flexibles sont un moyen facile d’ajouter des effets d’éclairage complexes à un projet. Chaque LED possède un contrôleur intégré (WS2812) qui vous permet de contrôler la couleur et la luminosité de chaque LED indépendamment. Le circuit intégré combiné LED/driver de ces bandes est le WS2812B extrêmement compact (essentiellement un driver de LED WS2811 amélioré, intégré directement dans une LED 5050 RGB), qui permet des densités de LED plus élevées. L’image montre les connexions +5V, D0 (données) et GND uniquement.

Ce type de bande LED nécessite un type spécial de contrôleur. Vous pouvez le faire en utilisant Arduino ou ESP8266.

controlador leds - Cómo construir un controlador de tiras LED RGB usando ESP8266

Contrôleur de LED RGB ESP8266

Dans ce simple contrôle des LEDs RGB sur wifi, serveur web. nous comprendrons clairement comment les valeurs des couleurs sont appliquées aux LEDs RGB

Connexions RGB LED avec NodeMCU

La LED RGB est de type cathode commune (GND), sa borne commune est connectée à la broche GND de NodeMCU et les connexions R, G, B sont faites avec NodeMCU en utilisant une résistance de 220 Ohm à D6, D7 et D8.

diagrama conexiones leds a Nodemcu - Cómo construir un controlador de tiras LED RGB usando ESP8266

Código del controlador NodoMCU RGB LED para Arduino IDE

Avant de télécharger le code, entrez le SSID et le mot de passe.

/*
 * IoT ESP8266 Based Mood Lamp (RGB LED) Controller Program
 * https://arduinotutoriels.com
 */
 
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

//SSID and Password of your WiFi router
const char* ssid = "Your SSID";
const char* password = "Your Password";

ESP8266WebServer server(80);

//LED Connections
const int RedLED=15;     //D8  GPIO15
const int GreenLED=12;  //D6  GPIO12
const int BlueLED=13;    //D7  GPIO13

String setcolor="#ff00ff"; //Set color for HTML

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Mood Lamp (RGB LED Color) Controller</title>
</head>
<body style="background:@@[email protected]@;">

<center>
    Mood Lamp (RGB LED Color) Controller<br><br><br>
  <form method="post" action="/form">
      Color:
      <input type="color" name="color" value="@@[email protected]@">
      <button type="submit" name="state" value="stop">SET</button>
  </form>
<br><br><br>
<a href="https://arduinotutoriels.com">arduinotutoriels.com</a><br>
</center>
</body>
</html>
)=====";

//=======================================================================
//                    handles main page
//=======================================================================
void handleRoot() {
  String p = MAIN_page;  
  p.replace("@@[email protected]@",setcolor);    //Set page background color and selected color
  server.send(200, "text/html", p);    
}

//=======================================================================
//                    Handle Set Color
//=======================================================================
void handleForm() {
  String color = server.arg("color");
  //form?color=%23ff0000
  setcolor = color; //Store actual color set for updating in HTML
  Serial.println(color);

  //See what we have recived
  //We get #RRGGBB in hex string

  // Get rid of '#' and convert it to integer, Long as we have three 8-bit i.e. 24-bit values
  long number = (int) strtol( &color[1], NULL, 16);

  //Split them up into r, g, b values
  long r = number >> 16;
  long g = (number >> 8) & 0xFF;
  long b = number & 0xFF;
  
  //PWM Correction
  r = r * 4; 
  g = g * 4;
  b = b * 4;
//for ULN2003 or Common Cathode RGB LED not needed
/*
  r = 1024 - r;
  g = 1024 - g;
  b = 1024 - b;
*/
  //ESP supports analogWrite All IOs are PWM
  analogWrite(RedLED,r);
  analogWrite(GreenLED,g);
  analogWrite(BlueLED,b);

  server.sendHeader("Location", "/");
  server.send(302, "text/plain", "Updated-- Press Back Button");
 
  delay(500);  
}
//=======================================================================
//                    SETUP
//=======================================================================
void setup(){
  Serial.begin(115200);   //Start serial connection  
  
  pinMode(RedLED,OUTPUT);
  pinMode(GreenLED,OUTPUT);
  pinMode(BlueLED,OUTPUT);
  
    WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP
  
  server.on("/", handleRoot);  //Associate handler function to path
  server.on("/form",handleForm);
    
  server.begin();                           //Start server
  Serial.println("HTTP server started");
}
//=======================================================================
//                    LOOP
//=======================================================================
void loop(){
  server.handleClient();
}

 

Résultats et tests

Après avoir téléchargé le code, ouvrez le moniteur de série et obtenez l’adresse IP.

serial monitor datos - Cómo construir un controlador de tiras LED RGB usando ESP8266

Après avoir obtenu l’adresse IP, ouvrez-la dans le navigateur web

controlador lampara de colores - Cómo construir un controlador de tiras LED RGB usando ESP8266

Sélectionnez la couleur et appuyez sur le bouton de réglage. Vous verrez que la LED RGB change également de couleur en fonction de la sélection.

Contrôleur de lampe coloré avec bande LED RGB et NodeMCU

Nous fabriquons ainsi un contrôleur complet de bandes LED RGB avec une interface utilisateur sympa comme une lampe colorée.

elección de colores led - Cómo construir un controlador de tiras LED RGB usando ESP8266

Connexions de bandes LED RGB avec NodeMCU

Pour le pilote, vous pouvez utiliser des MOSFET, des transistors, ULN2003 ou L293D.

conexiones leds a Nodemcu - Cómo construir un controlador de tiras LED RGB usando ESP8266

Code pour l’IDE Arduino du contrôleur de bande de LED RGB NodeMCU

Le code est divisé en deux parties : le code HTML et le code NodeMCU

main.ino

/*
 * IoT ESP8266 Based Mood Lamp (RGB LED) Controller Program
 * https://arduinotutoriels.com
 */
 
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

#include "index.h"

//SSID and Password of your WiFi router
const char* ssid = "Your SSID";
const char* password = "Your Password";

ESP8266WebServer server(80);

//LED Connections
const int BlueLED = 16; // D0
const int RedLED = 5;    // D1 
const int GreenLED = 4; // D2

//=======================================================================
//                    handles main page
//=======================================================================
void handleRoot() {
  Serial.println("Root Page Requested");
  server.send(200, "text/html", MAIN_page);
}

//=======================================================================
//                    Handle Set Color
//=======================================================================
void handleForm() {
  //Saperate Colors are sent through javascript
  String red = server.arg("r");
  String green = server.arg("g");
  String blue = server.arg("b");
  int r = red.toInt();
  int g = green.toInt();
  int b = blue.toInt();

  Serial.print("Red:");Serial.println(r);
  Serial.print("Green:");Serial.println(g);
  Serial.print("Blue:");Serial.println(b);
  
  //PWM Correction 8-bit to 10-bit
  r = r * 4; 
  g = g * 4;
  b = b * 4;

  //for ULN2003 or Common Cathode RGB Led not needed
  /*
  r = 1024 - r;
  g = 1024 - g;
  b = 1024 - b;
  */
  //ESP supports analogWrite All IOs are PWM
  analogWrite(RedLED,r);
  analogWrite(GreenLED,g);
  analogWrite(BlueLED,b);

  server.sendHeader("Location", "/");
  server.send(302, "text/plain", "Updated-- Press Back Button");
 
  delay(500);  
}
//=======================================================================
//                    SETUP
//=======================================================================
void setup(){
  Serial.begin(115200);   //Start serial connection  
  
  pinMode(RedLED,OUTPUT);
  pinMode(GreenLED,OUTPUT);
  pinMode(BlueLED,OUTPUT);
  
  WiFi.mode(WIFI_STA);
  
  WiFi.begin(ssid, password);     //Connect to your WiFi router
  Serial.println("");
  
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");  
  Serial.println("WiFi");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP
  
  server.on("/", handleRoot);  //Associate handler function to path
  server.on("/setRGB",handleForm);
    
  server.begin();                           //Start server
  Serial.println("HTTP server started");
}
//=======================================================================
//                    LOOP
//=======================================================================
void loop(){
  server.handleClient();
}

 

index.h

Ce fichier est un peu plus gros à cause du javascript. Enregistrez-le sous forme de fichier d’en-tête au même endroit que le fichier ino.

Il est important de supprimer cette balise « -Keep only script tag » pour des raisons de sécurité, wordpress ne permettant pas la balise script

const char MAIN_page[] PROGMEM = R »======(

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head><title>arduinotutoriels.com | RGB LED Color Control</title>
<style>
.color-picker-container {
display: inline-block;
background: #00A8A9 none repeat scroll 0% 0%;
border-radius: 4px;
border: 2px solid #f8fafb;
}
.color-picker-container .picker-container .canvas-container {
margin: 20px;
position: relative;
float: left;
width: 200px;
display: inline-block;
background: #00A8A9;
}
.color-picker-container .picker-container .canvas-container.active {
display: block;
}
.color-picker-container .picker-container .canvas-container canvas {
cursor: crosshair;
border-radius: 50%;
box-shadow: 0 0 0 4px #E8E8E8;
background: #E6D3D3;
}
.color-picker-container .picker-container .canvas-container .pointer {
width: 15px;
height: 15px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
pointer-events: none;
background: rgba(0, 0, 0, 0.1);
}
.color-picker-container .picker-container .canvas-container input {
margin-top: 10px;
width: 100%;
height: 30px;
text-align: center;
background: #353738;
border: 0;
color: #fff;
}
.color-picker-container .picker-container .slider-container {
width: 15px;
float: right;
position: relative;
margin: 15px;
}
.color-picker-container .picker-container .slider-container .slider {
width: 15px;
height: 249px;
background: #000;
}
.color-picker-container .picker-container .slider-container .pointer {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
left: -8px;
}
.color-picker-container .palletes-container {
float: right;
width: 275px;
}
.color-picker-container .palletes-container .palette {
width: 35px;
height: 35px;
float: right;
border-radius: 4px;
margin: 5px;
box-shadow: inset 0px 2px 1px rgba(0, 0, 0, 0.28);
cursor: pointer;
}
.color-picker-container .palletes-container .palette.active {
box-shadow: 0 0 0 3px #3F3F40;
}
.color-picker-container .palletes-container .palette.add {
border: 2px dashed #bababa;
box-shadow: inherit;
position: relative;
}
.color-picker-container .palletes-container .palette.add:after {
content: '+';
font-size: 24px;
color: #bababa;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
line-height: 30px;
}

</style>
</head>
<body>
<div id="picker"></div>
<script---Keep only script tag>
var ColorPicker;

(function() {

function insertBefore(element, before) {
parent = before.parentNode;
parent.insertBefore(element, before);
}

function extend(defaults, options) {
var extended = {};
var prop;
for (prop in defaults) {
if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
extended[prop] = defaults[prop];
}
}
for (prop in options) {
if (Object.prototype.hasOwnProperty.call(options, prop)) {
extended[prop] = options[prop];
}
}
return extended;
};

function hasClass(element, classname) {
var className = " " + classname + " ";
if ((" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" " + classname + " ") > -1) {
return true;
}
return false;
}

function removeClass(node, className) {
node.className = node.className.replace(
new RegExp('(^|\s+)' + className + '(\s+|$)', 'g'),
'$1'
).replace(/ +(?= )/g, '').trim();
}

function addClass(element, className) {
if (!hasClass(element, className)) {
element.className += ' ' + className;
element.className = element.className.replace(/ +(?= )/g, '').trim()
}
}

ColorPicker = function(element, options) {

this.options = extend({
color: '#e7e7e7',
palettes: ['#646fff', '#fffa1d', '#ffa21f', '#ff391d'],
onUpdate: function() {}
}, options);

this.options.palettes.unshift(this.options.color);

this.hex = this.options.color;
this.rgb = this.HEXtoRGB(this.hex);
this.hsv = this.RGBtoHSV(this.rgb[0], this.rgb[1], this.rgb[2]);
this.dom = {};
this.dom.container = document.createElement('div');
this.dom.container.className = 'color-picker-container';

element.appendChild(this.dom.container);

this.initPicker();

this.initPalettes();
}

ColorPicker.prototype.initPicker = function() {

this.dom.picker = {};
this.dom.picker.container = document.createElement('div');
this.dom.picker.container.className = 'picker-container';

this.dom.container.appendChild(this.dom.picker.container);

this.dom.picker.canvas = {};

this.dom.picker.canvas.container = document.createElement('div');
this.dom.picker.canvas.container.className = 'canvas-container';
this.dom.picker.container.appendChild(this.dom.picker.canvas.container);

this.dom.picker.canvas.canvas = document.createElement('canvas');
this.dom.picker.canvas.canvas.className = 'canvas';

this.dom.picker.canvas.pointer = document.createElement('div');
this.dom.picker.canvas.pointer.className = 'pointer';

var ctx = this.dom.picker.canvas.canvas.getContext('2d'),
image = new Image,
$this = this,
dragging = false;

this.dom.picker.canvas.canvas.setAttribute('width', 200);
this.dom.picker.canvas.canvas.setAttribute('height', 200);
this.dom.picker.canvas.container.appendChild(this.dom.picker.canvas.canvas);
this.dom.picker.canvas.container.appendChild(this.dom.picker.canvas.pointer);

// image.src = 'images/wheel copy.png';
image.src = 'data:image/png;base64';

image.onload = function() {
$this.updateCanvasBounds();
ctx.drawImage(image, 0, 0, 200, 200);
$this.updateCoordinates($this.dom.picker.canvas.canvas.bounds.centerX, $this.dom.picker.canvas.canvas.bounds.centerY);
coordinates = $this.getPositionFromColor($this.hex);
if (coordinates != null) {
$this.x = coordinates.x;
$this.y = coordinates.y;
$this.updateColor($this.HEXtoRGB($this.hex));
$this.updateAll();
}
$this.options.onUpdate($this.rgb);
};

this.dom.picker.canvas.canvas.addEventListener('mousedown', function(e) {
e.preventDefault();
dragging = true;
$this.updateCoordinates(e.clientX, e.clientY);
imageData = ctx.getImageData($this.x, $this.y, 1, 1);
$this.updateColor(imageData.data);
$this.hsv[2] = 1;
$this.updateAll();
});

document.addEventListener('mousemove', function(e) { // mouse move handler
if (dragging) {
$this.updateCoordinates(e.pageX, e.pageY);
imageData = ctx.getImageData($this.x, $this.y, 1, 1);
$this.updateColor(imageData.data);
$this.hsv[2] = 1;
$this.updateAll();
}
});

document.addEventListener('mouseup', function(e) { // click event handler
dragging = false;
});

this.dom.picker.canvas.input = document.createElement('input'),

this.dom.picker.canvas.container.appendChild(this.dom.picker.canvas.input);

this.dom.picker.canvas.input.addEventListener('keyup', function() {
if(this.value == $this.hex || '#' + this.value == $this.hex){
return;
}
coordinates = $this.getPositionFromColor(this.value);
if (coordinates != null) {
$this.x = coordinates.x;
$this.y = coordinates.y;
$this.updateColor($this.HEXtoRGB(this.value));
$this.updateAll();
}
});

this.initSlider();

}

ColorPicker.prototype.initSlider = function() {

this.dom.slider = {};
this.dom.slider.container = document.createElement('div');
this.dom.slider.container.className = 'slider-container';

this.dom.slider.slider = document.createElement('div');
this.dom.slider.slider.className = 'slider';

this.dom.slider.pointer = document.createElement('div');
this.dom.slider.pointer.className = 'pointer';

this.dom.slider.container.appendChild(this.dom.slider.pointer);
this.dom.slider.container.appendChild(this.dom.slider.slider);
this.dom.picker.container.appendChild(this.dom.slider.container);

this.dom.slider.slider.bounds = this.dom.slider.slider.getBoundingClientRect();
this.dom.slider.pointer.bounds = this.dom.slider.pointer.getBoundingClientRect();

this.redrawSlider();

var dragging = false,
$this = this;

this.dom.slider.slider.addEventListener('mousedown', function(e) {
e.preventDefault();
dragging = true;
total = $this.updateSliderCursor(e.clientY);
$this.updateColor($this.HSVtoRGB($this.hsv[0], $this.hsv[1], 1 - total));
$this.updateAll();
});

this.dom.slider.pointer.addEventListener('mousedown', function(e) {
e.preventDefault();
dragging = true;
total = $this.updateSliderCursor(e.clientY);
$this.updateColor($this.HSVtoRGB($this.hsv[0], $this.hsv[1], 1 - total));
$this.updateAll();
});

document.addEventListener('mousemove', function(e) {
if (!dragging) {
return;
}
total = $this.updateSliderCursor(e.clientY);
$this.updateColor($this.HSVtoRGB($this.hsv[0], $this.hsv[1], 1 - total));
$this.updateAll();
});

document.addEventListener('mouseup', function() {
dragging = false;
});
};

ColorPicker.prototype.updateColor = function(pixel) {
this.hex = hex = this.RGBtoHEX(pixel[0], pixel[1], pixel[2]);
this.hsv = this.RGBtoHSV(pixel[0], pixel[1], pixel[2]);
this.rgb = [
pixel[0],
pixel[1],
pixel[2]
];
}

ColorPicker.prototype.updateCoordinates = function(x, y) {
var angle = Math.atan2((y - this.dom.picker.canvas.canvas.bounds.centerY), (x - this.dom.picker.canvas.canvas.bounds.centerX));
radius = Math.sqrt(Math.pow(x - this.dom.picker.canvas.canvas.bounds.centerX, 2) + Math.pow(y - this.dom.picker.canvas.canvas.bounds.centerY, 2));
if (radius > this.dom.picker.canvas.canvas.bounds.radius - (this.dom.picker.canvas.pointer.bounds.width / 2)) {
cos = Math.cos(angle);
sin = Math.sin(angle);
x = cos * (this.dom.picker.canvas.canvas.bounds.radius - (this.dom.picker.canvas.pointer.bounds.width / 2)) + this.dom.picker.canvas.canvas.bounds.centerX;
y = sin * (this.dom.picker.canvas.canvas.bounds.radius - (this.dom.picker.canvas.pointer.bounds.width / 2)) + this.dom.picker.canvas.canvas.bounds.centerY;
}
this.x = Math.floor(x - this.dom.picker.canvas.canvas.bounds.left);
this.y = Math.floor(y - this.dom.picker.canvas.canvas.bounds.top);
}

ColorPicker.prototype.initPalettes = function() {
this.dom.palettes = {};
this.dom.palettes.list = [];
this.dom.palettes.container = document.createElement('div');
addClass(this.dom.palettes.container, 'palletes-container');
this.dom.container.appendChild(this.dom.palettes.container);
this.dom.palettes.add = document.createElement('div');
addClass(this.dom.palettes.add, 'palette add');
this.dom.palettes.container.appendChild(this.dom.palettes.add);
var $this = this;
this.dom.palettes.add.addEventListener('click', function() {
addClass($this.dom.picker.canvas.container, 'active');
$this.updateCanvasBounds();
palette = $this.addPalette($this.RGBtoHEX($this.rgb[0], $this.rgb[1], $this.rgb[2]));
for (var i = 0; i < $this.dom.palettes.list.length; i++) {
removeClass($this.dom.palettes.list[i], 'active');
}
addClass(palette, 'active');
$this.selectedPalette = palette;
});
for (var i = 0; i < this.options.palettes.length; i++) {
this.addPalette(this.options.palettes[i]);
}
}

ColorPicker.prototype.addPalette = function(color) {
var palette = document.createElement('div');
palette.style.background = color;
palette.color = color;
var $this = this;
palette.addEventListener('click', function() {
for (var i = 0; i < $this.dom.palettes.list.length; i++) {
removeClass($this.dom.palettes.list[i], 'active');
}
addClass(this, 'active');
$this.selectedPalette = this;
rgb = $this.HEXtoRGB(this.color);
coordinates = $this.getPositionFromColor(color);
$this.x = coordinates.x;
$this.y = coordinates.y;
$this.updateColor(rgb);
$this.updateAll();
});
addClass(palette, 'palette');
insertBefore(palette, this.dom.palettes.add);
this.dom.palettes.list.push(palette);
return palette;
}

ColorPicker.prototype.updateAll = function() {
this.redrawSlider();
this.updatePointers();
this.dom.picker.canvas.input.value = this.hex;
this.options.onUpdate(this.rgb);
if (this.selectedPalette) {
this.selectedPalette.style.background = this.hex;
}
}
ColorPicker.prototype.getPositionFromColor = function(color) {
color = this.HEXtoRGB(color);
if (color == null) {
return null;
}
this.hsv = this.RGBtoHSV(color[0], color[1], color[2]);
return this.getSVGPositionFromHS(this.hsv[0], this.hsv[1]);
}

ColorPicker.prototype.updateSliderCursor = function(y) {
total = y - this.dom.slider.slider.bounds.top - 6;
total = this.dom.slider.slider.bounds.height - total;
total = total / this.dom.slider.slider.bounds.height;
total = total.toFixed(2);
if (total < 0) {
total = 0;
} else if (total > 1) {
total = 1;
}
total = 1 - total;
this.dom.slider.pointer.style.top = this.dom.slider.slider.bounds.height * total - (this.dom.slider.pointer.bounds.height / 2) + 'px';
return total;
}

ColorPicker.prototype.redrawSlider = function() {
rgb = this.HSVtoRGB(this.hsv[0], this.hsv[1], 1);
hex = this.RGBtoHEX(rgb[0], rgb[1], rgb[2]);
gradient = this.makeGradient(hex, '#000');
this.dom.slider.slider.setAttribute('style', gradient);
this.updatePointers();
};

ColorPicker.prototype.updatePointers = function() {
if (this.dom.picker.canvas.pointer.bounds) {
this.dom.picker.canvas.pointer.style.left = this.x - (this.dom.picker.canvas.pointer.bounds.width / 2) + 'px';
this.dom.picker.canvas.pointer.style.top = this.y - (this.dom.picker.canvas.pointer.bounds.height / 2) + 'px';
}
if (this.dom.slider.slider.bounds) {
position = this.dom.slider.slider.bounds.height * (1 - this.hsv[2]) - (this.dom.slider.pointer.bounds.height / 2);
this.dom.slider.pointer.style.top = position + 'px';
}
}

ColorPicker.prototype.updateCanvasBounds = function() {
this.dom.picker.canvas.canvas.bounds = this.dom.picker.canvas.canvas.getBoundingClientRect();
this.dom.picker.canvas.pointer.bounds = this.dom.picker.canvas.pointer.getBoundingClientRect();
this.dom.picker.canvas.canvas.bounds.centerX = this.dom.picker.canvas.canvas.bounds.left + (this.dom.picker.canvas.canvas.bounds.width / 2);
this.dom.picker.canvas.canvas.bounds.centerY = this.dom.picker.canvas.canvas.bounds.top + (this.dom.picker.canvas.canvas.bounds.height / 2);
this.dom.picker.canvas.canvas.bounds.radius = this.dom.picker.canvas.canvas.bounds.width / 2;
}
// https://codepen.io/benknight/pen/nADpy
// Get a coordinate pair from hue and saturation components.
ColorPicker.prototype.getSVGPositionFromHS = function(h, s) {
var hue = this.scientificToArtisticSmooth(h * 360);
var theta = hue * (Math.PI / 180);
var y = Math.sin(theta) * this.dom.picker.canvas.canvas.bounds.radius * s;
var x = Math.cos(theta) * this.dom.picker.canvas.canvas.bounds.radius * s;
return {
x: x + this.dom.picker.canvas.canvas.bounds.radius,
y: this.dom.picker.canvas.canvas.bounds.radius - y
}

};

//https://codepen.io/benknight/pen/nADpy
ColorPicker.prototype.scientificToArtisticSmooth = function(hue) {
return (
hue < 35 ? hue * (60 / 35) :
hue < 60 ? this.mapRange(hue, 35, 60, 60, 122) :
hue < 120 ? this.mapRange(hue, 60, 120, 122, 165) :
hue < 180 ? this.mapRange(hue, 120, 180, 165, 218) :
hue < 240 ? this.mapRange(hue, 180, 240, 218, 275) :
hue < 300 ? this.mapRange(hue, 240, 300, 275, 330) :
this.mapRange(hue, 300, 360, 330, 360));
}

//https://codepen.io/benknight/pen/nADpy
ColorPicker.prototype.mapRange = function(value, fromLower, fromUpper, toLower, toUpper) {
return (toLower + (value - fromLower) * ((toUpper - toLower) / (fromUpper - fromLower)));
}

//https://gist.github.com/Arahnoid/9923989
ColorPicker.prototype.HEXtoRGB = function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
}

//http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
ColorPicker.prototype.RGBtoHSV = function(r, g, b) {
r = r / 255, g = g / 255, b = b / 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, v = max;

var d = max - min;
s = max == 0 ? 0 : d / max;

if (max == min) {
h = 0; // achromatic
} else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [h, s, v];
}

//http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
ColorPicker.prototype.HSVtoRGB = function(h, s, v) {
var r, g, b;
var i = Math.floor(h * 6);
var f = h * 6 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0:
r = v, g = t, b = p;
break;
case 1:
r = q, g = v, b = p;
break;
case 2:
r = p, g = v, b = t;
break;
case 3:
r = p, g = q, b = v;
break;
case 4:
r = t, g = p, b = v;
break;
case 5:
r = v, g = p, b = q;
break;
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

//https://gist.github.com/Arahnoid/9923989
ColorPicker.prototype.RGBtoHEX = function(r, g, b) {
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

//http://jsfiddle.net/barney/D9W4v/
ColorPicker.prototype.makeGradient = function(colour1, colour2) {
var gradientString = '\
/* Mozilla Firefox */ \
background-image: -moz-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
/* Opera */ \
background-image: -o-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
/* Webkit (Safari/Chrome 10) */ \
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, {colour1}), color-stop(1, {colour2}));\
/* Webkit (Chrome 11+) */ \
background-image: -webkit-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
/* IE10+ */\
background: -ms-linear-gradient(top, {colour1} 0%,{colour2} 100%);\
/* W3C */\
background: linear-gradient(top, {colour1} 0%,{colour2} 100%);\
';

return gradientString.replace(/\{colour1\}/g, colour1).replace(/\{colour2\}/g, colour2)
};
}());

var picker = new ColorPicker(document.getElementById('picker'), {
onUpdate: function(rgb) {
document.body.style.background = "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
changeColor(rgb[0],rgb[1],rgb[2]);
}
});

//setInterval(changeColor, 2000);

function changeColor(red, green, blue){
//Set RGB LED Color
console.log(red,green,blue);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var txt = this.responseText;
}
};
xhttp.open("GET", "setRGB?r="+red+"&g="+green+"&b="+blue, true); //Handle readADC server on ESP8266
xhttp.send();
}
</script---Keep only script tag>
</body>
</html>
)=====";

 

Résultats et tests

Ouvrez le moniteur série, récupérez l’adresse IP et saisissez-la dans le navigateur web.

Faites-le fonctionner et vous verrez les changements de couleur. Vous trouverez ci-dessous la configuration d’un test avec le NodeMCU et la bande LED RGB.

prueba leds y nodemcu - Cómo construir un controlador de tiras LED RGB usando ESP8266