Conéctate para seguir esto  
chujalt

Controlar color de led rgb vía wifi con Nodemcu

2 posts en este tema

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

Editado por chujalt

Compartir este post


Enlace al post
Compartir en otros sitios

Registra una cuenta o conéctate para comentar

Debes ser un miembro de la comunidad para dejar un comentario

Crear una cuenta

Regístrate en nuestra comunidad. ¡Es fácil!

Registrar una cuenta nueva

Iniciar Sesión

¿Ya tienes cuenta? Conéctate aquí.

Iniciar Sesión
Conéctate para seguir esto