Control de LEDs mediante interfaz con pagina Web y Arduino

Interfaz pagina web y Arduino para el control de leds

En este tutorial aprenderemos a hacer el control de leds mediante el modulo ESP8266 y Arduino con una interfaz, Aprenderemos un poco de programación HTML  Y como crear una página web con botones y mandar datos para que el arduino los interprete.

Lo que necesitaremos es:

– Un módulo wifi Esp8266

–Un Arduino UNO

Lo primero es reconocer los pines de nuestro módulo ESP8266, aquí se muestra una imagen:

Después de conocer un poco nuestro módulo lo siguiente es conectarlo al Arduino:

-De modo que el pin “URXD” este conectado al pin 2 de Arduino.

-El pin “UTXD” este conectado al pin 3 de Arduino.

-El pin “VCC” y “CH_PD” esten conectados  al pin “3.3v” de Arduino (no es recomendable conectarlo a “5v” por qué podrían dañarse).

-El pin “GND” este conectado al pin “GND” de Arduino.

aquí se muestra una imagen sobre las conexiones:

Nota: el módulo wifi esp8266 necesita una corriente superior a la que el arduino puede dar que es 50mv por lo que podríamos quitar la corriente al módulo y volverlo a conectar para que arranque y después se estabilizara.

ARDUINO

Después de realizar las respectivas conexiones, pasamos a nuestro PC y abrimos un nuevo sketch de arduino, ahora copeamos y pegamos este código al programa de arduino:

#include
SoftwareSerial BT1(3, 2); // RX | TX
char txt;
void setup()
{ Serial.begin(9600);
BT1.begin(115200);
}
void loop()
{if (Serial.available())
{txt = Serial.read();
BT1.print(txt);
}
if (BT1.available())
{txt = BT1.read();
Serial.print(txt);
}
}

config_esp8266

Después de pasar el código, conectamos  y lo cargamos al arduino, luego abrimos el monitor serial y nos aseguramos que en la parte de abajo diga “Ambos NL & CR” y en los baudios ”115200 baud” hecho esto ahora cortamos y volvemos a conectar  la alimentación del módulo wifi para reiniciarlo y después de unos momentos veremos algo como esto y un poco más abajo la palabra “ready”:

Si no apareciera volver a reiniciar el modulo. Si no se entendiera el mensaje verificar que los baudios del módulo ESP8266 sea “115200 baud” y si no bajar los baudios hasta ver algo legible.

Ahora comenzamos a configurar el modulo,  ingresamos  en el monitor serial la palabra “AT”.

Y recibiremos un “OK”:

Ahora cambiamos la configuración de los baudios  con el siguiente comando “AT+CIOBAUD=9600”:

Después de hacer esto cambiar los baudios de 115200 a 9600 en el código para estabilizar la comunicación con arduino por que podría llegar a tener errores en la comunicación a 115200 baud.

Cambiamos esta parte:


void setup()
{Serial.begin(9600);
BT1.begin(115200);
}


Después probamos este comando “AT+CWMODE?” para ver en qué modo está configurado el modulo, nos respondería con un “+CWMODE: 3”  y si no aparece el modo 3  utilizamos el comando “AT+CWMODE=3”:

CONECTANDO A UNA RED WIFI

Después pasamos a revisar nuestras redes WI-FI mediante el comando “AT+CWLAP” y nos mostraría algo como esto:

Ahora nos conectaremos a una red, en mi caso será “FAMILIA TORRES” y claro con su contraseña.

Mediante este comando  AT+CWJAP=”FAMILIA TORRES”,”torres150”.

Nos respondería con algo como esto:

Después vemos que dirección “IP” se nos asignó con el comando “AT+CIFSR”.

Y nuestra dirección será la segunda en aparecer (la dirección puede variar) en mi caso es “192.168.15.19”.

Tenemos que recordar esta “IP” o anotarla porque es la que ingresamos  en  nuestro navegador:

Ahora tenemos que habilitar las conexiones múltiples y habilitar un servidor.

Mediante los comandos “AT+CIPMUX=1” y este otro “AT+CIPSERVER=1,80”:

Después ingresamos la dirección  IP del módulo en nuestro navegador:

Ahora como pueden ver si vemos el monitor serial podremos observar que veremos nuestra IP. Luego escribimos un “/” después de la IP  luego escriban lo que gusten y en el monitor serial aparecerá lo que escribieron en su navegador por ejemplo “192.168.15.19/abcdefg123” y esto aparecerá en su monitor serial:

CODIGO EN ARDUINO

#include <SoftwareSerial.h>
SoftwareSerial BT1(3, 2); // RX | TX
int x1=0;
void setup()
 { Serial.begin(9600);
 BT1.begin(9600);
 pinMode(13,OUTPUT);
 pinMode(12,OUTPUT);
 pinMode(11,OUTPUT);
 pinMode(10,OUTPUT);
 }
void loop()
 { 
 while (BT1.available() >0 )
 {char c = BT1.read();
 if (c == 71) 
 {Serial.println("peticion web enviada");
 delay(3000);
 servidor();
 }
 }
 while(x1==1){
 if(BT1.find("+IPD,"))
 {delay(1000);
 int connectionId = BT1.read()-48; 
 BT1.find("pin=");
 int pinNumber = (BT1.read()-48)*10;
 pinNumber += (BT1.read()-48);
 digitalWrite(pinNumber, !digitalRead(pinNumber));
 Serial.print("inviertiendo pin ");
 Serial.println(pinNumber);
 }
 }
 }
void servidor()
{ escribir("<!DOCTYPE HTML>");
 escribir("<html>"); //una pagina web necesita esto <HTML> y </HTML> es el inicio y fin del documento
 escribir("<head><title>botones arduino esp8266 html</title>"); //nombre de la pestaña que llevara la pagina
 escribir("<body><h1> <FONT SIZE=\"5\" COLOR=\"red\"> ejemplos </h1>"); //titulo del inicio de la pagina
 escribir(" <BODY BGCOLOR=\"black\"> "); 
 escribir("<a href=\"http://subefotos.com/ver/?bb0d6a271131b84b3a62d6229bcdbd16o.png\" target=\"_blank\"><img src=\"http://thumbs.subefotos.com/bb0d6a271131b84b3a62d6229bcdbd16o.jpg\" WIDTH=300 HEIGHT=300 BORDER=0 /></a><br /><br />");
 //Cargamos una imagen 
 escribir("<input type=\"button\" onclick=\"location.href='http://192.168.5.98/pin=13' \" value=\"invertir pin 13\" name=\"boton1\" style='width:100px; height:50px'/>");
 escribir("<input type=\"button\" onclick=\"location.href='http://192.168.5.98/pin=12' \" value=\"invertir pin 12\" name=\"boton2\" style='width:100px; height:50px'/>");
 escribir("<input type=\"button\" onclick=\"location.href='http://192.168.5.98/pin=11' \" value=\"invertir pin 11\" name=\"boton3\" style='width:100px; height:50px'/>");
 escribir("<input type=\"button\" onclick=\"location.href='http://192.168.5.98/pin=10' \" value=\"invertir pin 10\" name=\"boton4\" style='width:100px; height:50px'/>");
 escribir("<DIV align=\"center\"><A HREF=\"http://www.hetpro.com\" target=\"_blank\">hetpro.com</a><BR></DIV>");
 x1=1;
 }
void escribir(String text)
{BT1.print("AT+CIPSEND=0,"); 
 BT1.println(text.length());
 if (BT1.find(">")) // Si se recibe el mensaje
 {Serial.println(text);
 BT1.println(text); //mandamos el mensaje por el wifi 
 delay(10);
 while ( BT1.available() > 0 ) 
 {if ( BT1.find("SEND OK") ) //buscamos "ok" y luego salimos
 break; 
 }
 }
}

Ahora descargamos este archivo que contiene el programa de Arduino que utilizaremos: botones_ESP8266. copiamos este código en su Arduino (sin desconectar el módulo wifi y recordando la “IP”  sino tendrían que volver a configurar su módulo otra vez).

En el código esta agregado un poco de código HTML lo cual explicaré un poco para saber qué hacen cada línea en el código. Después de cargar el código en el Arduino abrimos en monitor serial e ingresamos la dirección IP y tendríamos una página como esta:

hetpro.com