Jump to content

Controlar color de led rgb vía wifi con Nodemcu


chujalt
 Share

Recommended Posts

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

 

 

nodemcu.jpg

 

 

 

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:

<!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.

 

tabla_colores.png

 

 

Código Arduino:

#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

Edited by chujalt
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...