Módulo WIFI ESP8266-201 como Servidor WEB y Arduino Due.

Módulo WIFI ESP8266-201 como servidor web y Arduino Due.

  
 En este proyecto quiero mostrar cómo funciona  el módulo wifi 8266 ESP201 como servidor web con Arduino Due, lo que voy hacer es conectar este módulo a la red wifi del PC y mediante una página WEB le pasare las ordenes a Arduino a través del módulo wifi  ESP 8266, las instrucciones serán sencillas como encender o apagar unos leds, no hay que complicarlo mucho para empezar, pero piensa hasta donde podrías llegar, activar motores, conectar una alarma desde el exterior, bajar persianas…… eso ya depende de ti.



Si antes quieres ver el vídeo pincha AQUÍ.

Para empezar que se necesita:

	Una fuente de Alimentación externa, hay que recordar que el módulo ESP 8266 201 necesitan una intensidad media de unos 75mA y pueden llegar a tener hasta picos de 350mA.
	Una Protoboard para facilitar la conexión.
	Arduino Due o Mega, estas placas en sus puertos serie trabajan bien a una velocidad de 115200 Bauds, Arduino Due tiene tres puertos Serie. También se puede hacer con Arduino Uno pero la comunicación no es tan fluida entre placa y módulo.
	El módulo ESP8266 – 201, este módulo tiene incorporada su propia antena además de varias puertas GPIO
	Necesitamos  pequeño material como cablecillo, tres resistencias de 220 ohms para conectar los tres leds, y un pulsador para hacer el Reset del módulo manual, el sketch IDE de Arduino que subo le hace el Reset al módulo al reiniciar la placa.

Proceso;

El primer paso es conectar todo, el módulo ESP8266- 201, Arduino Due, los Leds, las Resistencias y el pulsador utilizando la Protoboard, no olvidar la fuente de alimentación, debería quedar como en la imagen siguiente:

Esquema:

Ahora hay que cargar el siguiente código en placa Arduino DUE:

int bluePin = 7; int greenPin = 8; int yellowPin = 10; int reset = 5; int tiempo = 500; char caracter; String comando; int temp = 100; int num = 0, num1,num2, valor =0; String B = "" ; String comandos[]= { "AT", //"AT+RST", "AT+CWMODE=3", "AT+CIPMUX=1", "AT+CIPSERVER=1,80" }; void setup() { Serial.begin(115200); Serial3.begin(115200); pinMode( bluePin, OUTPUT); pinMode( greenPin, OUTPUT); pinMode( yellowPin, OUTPUT); pinMode( reset, OUTPUT); digitalWrite(bluePin ,LOW); digitalWrite(greenPin, LOW); digitalWrite(yellowPin, LOW); delay(1500); SetUpINI() ; digitalWrite(bluePin,HIGH); delay(tiempo); digitalWrite(bluePin,LOW); delay(tiempo); digitalWrite(greenPin,HIGH); delay(tiempo); digitalWrite(greenPin,LOW); delay(tiempo); digitalWrite(yellowPin,HIGH); delay(tiempo); digitalWrite(yellowPin,LOW); } void loop() { while ( Serial3.available()>0){ caracter=Serial3.read(); comando.concat(caracter); num=comando.indexOf("p12"); num1=comando.indexOf("p13"); num2=comando.indexOf("p14"); Serial.print("num :"); Serial.println(comando[num+4]); Serial.print("num1 :"); Serial.println(comando[num1+4]); Serial.print("num2 :"); Serial.println(comando[num2+4]); delay(10); } if (comando[num+4]=='1'){ digitalWrite(bluePin,HIGH); digitalWrite(greenPin,LOW); digitalWrite(yellowPin,LOW); comando= " "; } if (comando[num1+4]=='1'){ digitalWrite(greenPin,HIGH); digitalWrite(bluePin,LOW); digitalWrite(yellowPin,LOW); comando= " "; } if (comando[num2+4]=='1'){ digitalWrite(greenPin,LOW); digitalWrite(bluePin,LOW); digitalWrite(yellowPin,HIGH); comando= " "; } if (comando[num+4]=='0'&& comando[num1+4]=='0' && comando[num2+4]=='0'){ digitalWrite(greenPin,LOW); digitalWrite(bluePin,LOW); digitalWrite(yellowPin,LOW); comando= " "; } } // void loop //----------------------------------------------------------------- void SetUpINI() { while (num <= 20){ String C = "" ; char c =' ' ; if(num == 0){ Serial3.println(comandos[num]); } if( num == 1) {Serial3.println(comandos[num]); } if( num == 2) { Serial3.println(comandos[num]); } if( num == 3) { Serial3.println(comandos[num]); } delay(temp); if (Serial3.available()){ while ( c != '\n' ){ c = Serial3.read() ; Serial.print(c); C.concat(c); B = C ; } num = num +1; } if ( C.startsWith("OK" ) || C.startsWith("no change")){ Serial.println(""); Serial.println(".................."); c = ' '; } /* if (C.startsWith("no change")){ Serial.println("SI AT+CIPSERVER=1,80 == no change "); Serial.println("RESETEA El MODULO ESP8266 Y"); Serial.println("VUELVE ABRIR EL MONITOR SERIE"); Serial.println(".................."); num1 = 0; }*/ if (C.startsWith("AT+CIPSERVER=1,80")){ num1 = 1;} if( num1 == 1 && C.startsWith("no change")){ digitalWrite( reset, LOW); delay(25); digitalWrite(reset, HIGH); delay(25); digitalWrite( reset, LOW); delay(500); } if( num1 == 1 && C.startsWith("OK")){ num = 21; num1 = 0; } } // While END }

Una vez cargado el código en el  IDE de Arduino y subido esté a la placa, podemos ver el resultado en el Monitor Serie, si todo ha ido bien debería  responder así:

Nota; El Serial Monitor deber estar configurado como se muestra en la imagen. AT+CMODE=3 , la respuesta es "no change" porque ya esta cargado el modo 3 en el módulo. Con AT+CIPMUX=1 y AT+CIPSERVER=1,80, hemos configurado TCP/UDP conexiones múltiple y configurado el módulo como server en el puerto 80.

  Una vez terminada la carga del programa en la placa, los tres leds de la protoboard deberían hacer una secuencia de encendido y apagado para indicar que la carga a terminado, si es así solo queda conectar la red Wifi del PC con el módulo ESP8266-201.

Nota; Cada módulo tiene un SSID programado de serie, en mi caso el SSID es ESP201 porque se lo he cambiado previamente. El estado es conectado y sin acceso a Internet.

Ahora solo queda ejecutar la página web creada para el proyecto.

  Este es el código html de la página PGCArduinO, basta con abrir una hoja del bloc de notas, copiar el código y guardarlo con el nombre que querías y la extensión html (en mi caso PGCArduinO.html).  

Página Web

Código html.

<html> <head> <title> PGCArduinO</title> </head> <body bgcolor="#00FFFF" text="#0000FF"> <h1> Pantalla con Botones para Arduino y el módulo ESP 8266 ESP 201 <br> <br> <table> <tr> <td> <form method="get" action="http://192.168.4.1/p12=1,p13=0;p14=0,x"> <input name="boton1" type="image" src="Imagenes/azul.gif"BORDER=1> </form> </TD> <td> <form method="get" action="http://192.168.4.1/p12=0,p13=1;p14=0,x"> <input name="boton1" type="image" src="Imagenes/verde.gif"BORDER=1> </form> </TD> <td> <form method="get" action="http://192.168.4.1/p12=0,p13=0;p14=1,x"> <input name="boton1" type="image" src="Imagenes/amarillo.gif"BORDER=1> </form> </TD> <td> <img src="Imagenes/PGCArduino_bb.png"> </TD> </TR> <tr> <td> <font SIZE="6"> RESET </FONT> </TD> <td> <form method="get" action="http://192.168.4.1/p12=0,p13=0;p14=0,x"> <input name="boton1" type="image" src="Imagenes/rojo.gif"BORDER=1> </form> </TD> </TR> </TABLE> </body> </html>

Hay que recordar que las imágenes de esta página no se mostrarán y aparecerá un signo de enlace roto, como en la imagen inferior. Esto sucede porque las imágenes se alojan en una carpeta dentro de mi Pc, podéis descargar unas imágenes de botones, guardarlas en una carpeta dentro de vuestro Pc y sustituir la ruta de las imágenes del código html por la ruta donde se alojen vuestras imágenes descargadas.

Imagen con enlace roto.

Estas son las rutas de las imágenes de los botones que tenéis que sustituir;

-- "Imagenes/azul.gif"
-- "Imagenes/verde.gif"
-- "Imagenes/amarillo.gif"
-- "Imagenes/rojo.gif"

Lo que yo he hecho ha sido guardar la página web PGCArduinO.html dentro de un carpeta llamada WEB y dentro de esta carpeta he creado otra carpeta con el nombre Imágenes, en está he guardado las imágenes de botones que he descargado, de este modo solo hay que seleccionar en la ruta la "Imágenes/(el nombre de imagen del botón descargada)".

Si quieres ver el vídeo pincha AQUÍ.