Controller module RGB par websocket et ESP32

Module RGB

Pin Description Rang
Pin - Pin ground 0v
B Pin de la couleur Bleu (Blue) , reçoit un signal modulé numérique type PWM tension: 0-5v
valeur :0-255
G Pin de la couleur Vert(Green) , reçoit un signal modulé numérique type PWM tension: 0-5v
valeur :0-255
R Pin de la couleur Rouge(Red) , reçoit un signal modulé numérique type PWM tension: 0-5v
valeur :0-255

 

L'idée principale est de connecter physiquement la carte ESP32 avec le module RGB. La carte EPS32 fera office aussi de point d'accès Wi-Fi et de serveur web. Ce serveur sous est accessible par l'adresse IP par défaut 192.168.4.1 affichée sur le moniteur série. Puis via la web socket la couleur voulue est et communiquée à la carte qu'elle envoi au module RGB en PWM.Il faut savoir que la fonction par défaut analogWrite ne fonctionne pas avec l'ESP32. Il faudrait utilisé plutôt ledcWrite.Sachez aussi qu'il faut utiliser des pins du GPIO comme les pins GPIO 25,26 et 27 dans notre exemple.Aussi il faut pas oublier de créer un dossier data là ou votre code arduino est enregistré, et utiliser la librairie SPIFFS pour uploader le fichier index.html

ESP32-GPIO

Code ESP32

#include <WiFi.h>
#include <SPIFFS.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
const char *ssid = "ESP-RGB";
const char *pswd = "12345678";
const int port_dns = 53;const int port_http = 80;
const int port_ws = 1337;const int pinRouge = 25;
const int pinVert = 26;const int pinBleu = 27;
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(1337);
const int canRouge=0;
const int canVert=1;
const int canBleu=2;
String Rouge, Vert, Bleu;
int rg, vr, bl;
char clr_buf[12];
void onWebSocketEvent(uint8_t num_client, WStype_t type, uint8_t* payload, size_t length)/*s'execute à n'importe quel evenment de la WS*/
{
  rg = 0; vr = 0; bl = 0;
  if (type == WStype_DISCONNECTED)
  {
    Serial.printf("[%u] est  déconnecté", num_client);
  }
  if (type == WStype_CONNECTED)
  {
    IPAddress ip = webSocket.remoteIP(num_client);
    Serial.printf("[%u] est connecté", num_client);
    Serial.println(ip.toString());
  }
  if (type == WStype_TEXT)
  {
    Serial.printf("[%u] Text reçu: %s\n", num_client, payload);
    String msg = (char*)payload;
    if (msg.startsWith("RGB"))
    {
      Rouge = msg.substring(3, 6);
      Vert = msg.substring(6, 9);
      Bleu = msg.substring(9, 12);
      rg = Rouge.toInt();
      vr = Vert.toInt();
      bl = Bleu.toInt();
      ledcWrite(canRouge, rg);
      ledcWrite(canVert, vr);
      ledcWrite(canBleu, bl);
    }
    else{
      Serial.println("[%u] Message non reconnu");
    }
  }
}
void  onIndexRequest(AsyncWebServerRequest *request)/*renvoi la page index.html du odossier data*/
{
  IPAddress ip = request -> client()->remoteIP();
  Serial.println("[" + ip.toString() + "] en  HTTP GET demande " + request->url());
  request->send(SPIFFS, "/index.html", "text/html");
}
void setup()
{
  pinMode(pinRouge, OUTPUT);
  pinMode(pinVert, OUTPUT);
  pinMode(pinBleu, OUTPUT);
  ledcSetup(canRouge, 5000, 8);
  ledcSetup(canVert, 5000, 8);
  ledcSetup(canBleu, 5000, 8);
  ledcAttachPin(pinRouge,canRouge);
  ledcAttachPin(pinVert,canVert);
  ledcAttachPin(pinBleu,canBleu);
  Serial.begin(115200);
  if (!SPIFFS.begin())
  {
    Serial.println("Erreur de SPIFFS");
    while (1);
  }
  WiFi.softAP(ssid, pswd);
  Serial.println("/n L'adresse IP est: ");
  Serial.println(WiFi.softAPIP());
  server.on("/", HTTP_GET, onIndexRequest); /*Renvio l'index.html  par la fonction  onIndexRequest*/
  server.begin();/* lancer le serveur web*/
  webSocket.begin();/*lancer  le serveur socket*/
  webSocket.onEvent(onWebSocketEvent);

}
void loop()
{
  webSocket.loop();
}

Montage

Esp32 webSocket  RGB

index.html

<style>
#couleur{display:block;border:1px solid gray; border-radius:5px; width:50px;height:50px;}
.slidecontainer {width: 90%;}
.slider {-webkit-appearance: none;width: 100%;height: 25px;background: #d3d3d3;outline: none;opacity: 0.7;-webkit-transition: .2s;transition: opacity .2s;}
#myRed:hover,#myGreen:hover,#myBlue:hover {opacity: 1;}
#myRed::-webkit-slider-thumb,#myGreen::-webkit-slider-thumb,#myBlue::-webkit-slider-thumb{
-webkit-appearance: none;appearance: none;width: 25px;height: 30px;cursor: pointer;}
#myRed::-moz-range-thumb,#myGreen::-moz-slider-thumb,#myBlue::-moz-slider-thumb{width: 25px;height: 25px;background: #4CAF50;cursor: point}
#myRed::-webkit-slider-thumb{background:red;}#myGreen::-webkit-slider-thumb{background:green;}#myBlue::-webkit-slider-thumb{background:blue;}
#myRed::-moz-slider-thumb{background:red;}#myGreen::-moz-slider-thumb{background:green;}#myBlue::-moz-slider-thumb{background:blue;}
</style>

<script type="text/javascript">
    var  url="ws://192.168.4.1:1337/";
    var output;var button;
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
    function init()
    {
        wsConnect(url);
    }
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
    function wsConnect(url) 
    {// Connect to WebSocket server
        websocket = new WebSocket(url);
    // Assign callbacks
        websocket.onopen = function(evt) { onOpen(evt) };
        websocket.onclose = function(evt) { onClose(evt) };
        websocket.onmessage = function(evt) { onMessage(evt) };
        websocket.onerror = function(evt) { onError(evt) };
    }
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
    function   onOpen(evt){ console.log("Socket connectée!  "); }
    function  onClose(evt){ console.log("Socket déconnecté! "); }
    function  onError(evt){ console.log("ERROR: " + evt.data ); }
    function onMesage(evt){ console.log("Message:"+ evt.data ); }
     
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
    function sendMsg()
    {
        rouge = document.getElementById('myRed').value;
        vert = document.getElementById('myGreen').value;
        bleu = document.getElementById('myBlue').value;
        var msg = "RGB"+format_couleur(rouge)+format_couleur(vert)+format_couleur(bleu);
        console.log(msg);
        websocket.send(msg);
    }
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
    function format_couleur(x)
    {
        var xs=x.toString();
        n =3-xs.length;
        for(i=0;i&lt;3;i++)
        {
            xs="0"+xs;
        }
        return xs.substring(xs.length-3, xs.length);;
    }
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
    function colorer()
    {
        rouge = document.getElementById('myRed').value;
        vert = document.getElementById('myGreen').value;
        bleu = document.getElementById('myBlue').value;
        document.getElementById('couleur').style="background:rgb("+rouge.toString()+","+vert.toString()+","+bleu.toString()+");";
        //document.getElementById('lienCouleur').href='Couleur/'+rouge.toString()+'/'+vert.toString()+'/'+bleu.toString();
    }
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    init();
 
</script>

<div class="slidecontainer">

Composante Rouge:

<input id="myRed" class="slider" max="255" min="0" type="range" value="50" />

Composante Verte:

<input id="myGreen" class="slider" max="255" min="0" type="range" value="50" />

Composante Bleue:

<input id="myBlue" class="slider" max="255" min="0" type="range" value="50" />

</div>


<form action="#" method="GET">
<div id="couleur"></div> <button onclick="sendMsg()"> Choisir</button>
</form>

Interface HTML

Les frais de transport ne sont pas inclus

Composant Quantité Prix(DTN TTC)
ESP32 -WROOM 1 43
Cable connexion femelle femelle (10) 1 1.5
Module RGB Led 1 2
Cable Usb 1 7
Totale 53.5 DTN TTC

Smart Innovation