06-03-2021, 13:11
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
![[Imagen: nodemcu.jpg]](http://chujalt.com/1/imagenes/nodemcu.jpg)
![[Imagen: led_rgb.jpg]](http://chujalt.com/1/imagenes/led_rgb.jpg)
Código página Web:
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]](http://chujalt.com/1/imagenes/tabla_colores.png)
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
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
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.
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