ChuJALT
Aporte: Controlar color de led rgb vía wifi con Nodemcu. - Versión para impresión

+- ChuJALT (https://chujalt.com)
+-- Foro: PLACAS DE PROTOTIPOS Y MINI PC'S (https://chujalt.com/forum-22.html)
+--- Foro: Anduino, Nodemcu, Wemos (https://chujalt.com/forum-23.html)
+--- Tema: Aporte: Controlar color de led rgb vía wifi con Nodemcu. (/thread-17.html)

Controlar color de led rgb vía wifi con Nodemcu. - chujalt - 06-03-2021

Saludos....

En esta ocasión vamos a realizar un sistema para controlar desde una página web el color que mostrará un led rgb. Para ello necesitaremos dos tipos de código, el de la página web y el del Nodemcu (que al estar hecho para cargar con la Arduino IDE también sirve para Arduino).


Materiales utilizados
  • Una placa Nodemcu (yo he utilizado la V2).
  • 4 Cables dupont.
  • Un led rgb Keyes

[Imagen: nodemcu.jpg]


[Imagen: led_rgb.jpg]



Conexiones
  • Pin GND del Nodemcu al pin V/G del led rgb.
  • Pin D1 del Nodemcu al pin R del led rgb.
  • Pin D2 del Nodemcu al pin G del led rgb.
  • Pin D3 del Nodemcu al pin B del led rgb.


Código página Web:
Código:
<!DOCTYPE html>
<html lang="es"><head>

<meta charset="utf-8">
<title>Tabla colores</title>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table {
   width: 50%;
   height: 200px;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
}
.link a{
display:block;
height:100%;
}
</style>
</head><body><br>
<div style="text-align: center;">
<h4><big><big>TABLA DE COLORES</big></big></h4>
<br>
</div>

<table border="1" cellpadding="0" cellspacing="0">

<tbody>
  <tr>
    <td style="vertical-align: top; background-color: rgb(255,255,255);" class="link"><a href="http://192.168.1.222/color=255255255"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(153,153,153);" class="link"><a href="http://192.168.1.222/color=153153153"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(0,0,0);" class="link"><a href="http://192.168.1.222/color=000000000"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(255,0,0);" class="link"><a href="http://192.168.1.222/color=255000000"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(102,0,0);" class="link"><a href="http://192.168.1.222/color=102000000"> </a><br>
    </td>
  </tr>
  <tr>
    <td style="vertical-align: top; background-color: rgb(255,153,0);" class="link"><a href="http://192.168.1.222/color=255153000"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(153,51,0);" class="link"><a href="http://192.168.1.222/color=153051000"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(255,204,102);" class="link"><a href="http://192.168.1.222/color=255204102"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(153,102,51);" class="link"><a href="http://192.168.1.222/color=153102051"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(255,255,0);" class="link"><a href="http://192.168.1.222/color=255255000"> </a><br>
    </td>
  </tr>
  <tr>
    <td style="vertical-align: top; background-color: rgb(102,102,0);" class="link"><a href="http://192.168.1.222/color=102102000"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(51,255,51);" class="link"><a href="http://192.168.1.222/color=051255051"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(0,102,0);" class="link"><a href="http://192.168.1.222/color=000102000"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(102,204,204);" class="link"><a href="http://192.168.1.222/color=102204204"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(51,102,102);" class="link"><a href="http://192.168.1.222/color=051102102"> </a><br>
    </td>
  </tr>
  <tr>
    <td style="vertical-align: top; background-color: rgb(51,102,255);" class="link"><a href="http://192.168.1.222/color=051102255"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(0,0,153);" class="link"><a href="http://192.168.1.222/color=000000153"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(255,153,255);" class="link"><a href="http://192.168.1.222/color=255153255"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(204,51,204);" class="link"><a href="http://192.168.1.222/color=204051204"> </a><br>
    </td>
    <td style="vertical-align: top; background-color: rgb(102,51,102);" class="link"><a href="http://192.168.1.222/color=102051102"> </a><br>
    </td>
  </tr>
</tbody>
</table>

<br>

<br>
</body></html>


Este código lo que nos muestra es una página web sencilla con una tabla de unos cuantos colores, que enlaza con la dirección ip que le daremos al Nodemcu.


[Imagen: tabla_colores.png]



Código Arduino:
Código:
#include <ESP8266WiFi.h>

const char* ssid = "Tu_red";
const char* password = "Tu_Contraseña";
IPAddress ip(192,168,1,222);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
       int pinLedR = D1;  
       int pinLedV = D2;  
       int pinLedA = D3;  
WiFiServer server(80);

void setup() {
Serial.begin(115200);
delay(10);

         pinMode(pinLedR, OUTPUT);    
         pinMode(pinLedV, OUTPUT);  
         pinMode(pinLedA, OUTPUT);  

WiFi.begin(ssid, password);
WiFi.config(ip, gateway, subnet);

server.begin();
}
String f = "";
void loop() {

WiFiClient client = server.available();
if (!client) {
  return;
}


Serial.println("new client");
while(!client.available()){
  delay(1);
}

String request = client.readStringUntil('\r');
client.flush();


 char i1 = request.indexOf("GET /color="), i2;
 if (i1 != -1)
   i2 = request.indexOf(" ", i1+11);
   f = request.substring(i1+11, i2);

String pepe = f.substring(0,2);
 String juan = f.substring(3,5);
 String pedro = f.substring(6,8);


 
analogWrite(pinLedR, pepe.toInt());
analogWrite(pinLedV, juan.toInt());
analogWrite(pinLedA, pedro.toInt());  


client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.print("<body onload='history.back();'>\n");
client.println("</body>");
client.println("</html>");

delay(1);

 }



El código lo que hace en primer lugar es recibir todos los datos de red y asignarle una ip fija al Nodemcu (en este caso la 192.168.1.222).

 
Luego le asignamos los pines al led y los iniciamos como salida.
 
Luego inicia la comunicación wifi y recibe los datos del enlace que pulsemos en la página, esos datos son los valores para que muestre un color u otro.
 
Por último desde el Nodemcu enviamos una pequeña página con un javascript para que el navegador vuelva a mostrar la tabla de colores.
 
 
Bueno... espero que le sirva a alguien..... Saludos