Los materiales que usaremos en esta practica son:

1 Arduino UNO.

1 Modulo ESP8266-01.

2 Leds Cualquier color.

Protoboard

Cables para conexión.

Para esta practica vamos a usar 2 sketch’s, uno para el ESP8266 y el otro para Arduino.

Primero vamos a cargar el sketch a Arduino de la manera tradicional, sin tener conectado nada a el.

Este es el código:

//Arduino Center//
//www.facebook.com/ArduinoCenter
 
int led1 = 8; //Inicializamos las variables led 1 y led2 con el valor de el pin a donde estaran conectados
int led2 = 9;
 
void setup() {
  Serial.begin(9600); //Iniciamos la comunicacion Serial
  pinMode(led1, OUTPUT); //Indicamos que seran salidas
  pinMode(led2, OUTPUT);
}
 
void loop() {
  while (Serial.available()) { //Mientras la comunicacion serial este disponible...
    char inChar = Serial.read(); //Guardamos lo que llegue por el puerto serie en la variable inChar
   
    switch (inChar) { //Con este switch comparamos los casos para asi actuar segun sea el caso...
     
      case '1':
        digitalWrite(led1, HIGH);
        break;
 
      case '2':
        digitalWrite(led1, LOW);
        break;
 
      case '3':
        digitalWrite(led2, HIGH);
        break;
 
      case '4':
        digitalWrite(led2, LOW);
        break;
 
      default:
        break;
    }
  }
}

 

Después de hacer lo anterior cargamos el código a el ESP8266.

A continuación les muestro el esquema de conexión para cargar el código a el ESP:

De esta manera estamos usando el Arduino solo como convertidor serial a TTL para cargar el codigo al ESP.

Código:

//Arduino Center//
//www.facebook.com/ArduinoCenter
 
#include <ESP8266WiFi.h> //iNcluimos la libreria correspondiente
 
#define WIFI_SSID "tuSSID" //Reemplaza por tu SSID
#define WIFI_PASSWORD "tu Password" //Reemplaza por tu Password
 
WiFiServer server(80); //Creamos el objeto server.
 
 
void setup() {
  Serial.begin(9600); //Iniciamos la comunicacion serial
  //Intentamos conectarnos a la red WiFi
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }
 
  server.begin(); //Iniciamos el servidor
  Serial.println("Servidor iniciado");
 
  // Imprimimos el IP que nos asigna el moduoo para conectarnos
  Serial.print("Usa esta URL para conectarte: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
 
}
 
void loop() {
  // Checamos si un cliente se ha conectado
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Espere hasta que el cliente envíe algunos datos
  while (!client.available()) {
    delay(1);
  }
  // Leemos la primer linea de la peticion
  String request = client.readStringUntil('\r');
  client.flush();
 
  // Checamos si coincide la solicitud
 
  if (request.indexOf("/LED1=ON") != -1) {
    Serial.print('1');
  }
  if (request.indexOf("/LED1=OFF") != -1) {
    Serial.print('2');
  }
 
  if (request.indexOf("/LED2=ON") != -1) {
    Serial.print('3');
  }
  if (request.indexOf("/LED2=OFF") != -1) {
    Serial.print('4');
  }
 
  // Regresamos una respuesta
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("");
  client.println("<!DOCTYPE HTML>");
  client.println("<html lang='en'>");
 
  client.print("<head>");
  client.print("<meta charset='UTF-8'>");
  client.print("<meta http-equiv='X-UA-Compatible' content='IE=edge'>");
  client.print("<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>");
  client.print("<title>Practica Arduino Center</title>");
  client.print("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>");
  client.print("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp' crossorigin='anonymous'>");
  client.print("<link href='https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css' rel='stylesheet'>");
  client.print("</head>");
  client.print("<body>");
  client.print("<div class='container'>");
  client.print("<div class='header clearfix'><hr><h3 class='text-muted'>Arduino Center</h3><hr></div>");
  client.print("<div class='jumbotron text-center'><h1>Arduino + ESP8266</h1></div>");
  client.print("<div id='controles' >");
  client.print("<table style='margin: 0 auto;'>");
  client.print("<tr><td>");
  client.print("<a href='LED1=ON'><button id='led1On' type='button' class='btn btn-success btn-lg'>Encender LED 1</button></a>&nbsp;");
  client.print("<a href='LED1=OFF'><button id='led1Off' type='button' class='btn btn-danger btn-lg'>Apagar LED 1</button></a>");
  client.print("</td></tr>");
  client.print("<td><br>");
  client.print("<a href='LED2=ON'><button id='led2On' type='button' class='btn btn-success btn-lg'>Encender LED 2</button></a>&nbsp;");
  client.print("<a href='LED2=OFF'><button id='led2Off' type='button' class='btn btn-danger btn-lg'>Apagar LED 2</button></a>");
  client.print("</td></div></table></div>");
  client.print("<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>");
  client.print("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa'crossorigin='anonymous'></script>");
  client.print("</body>");
  client.print("</html>");
  delay(1);
}

 

Después de cargar el código a el ESP y si todo va bien, abran el monitor serial y deberían ver esto:

 

Ahora abrimos un navegador web y copiamos la dirección que nos indico en el monitor serial.

Tendrán que ver esto:

Muy bien!!! Esta es la interfaz que nos permitirá encender los leds conectados a los pines de Arduino.

Ahora solo nos falta modificar la conexión que ya tenemos echa para enviarle los datos a Arduino por el puerto serie. La conexión queda de esta forma:

Si se pudieron dar cuenta, ya no tenemos conectado el pin de Reset de Arduino a tierra, esto por que ahora si vamos a utilizar el Arduino de manera convencional.

Ahora si, a probar nuestra interfaz web!!!

Hasta aquí este aporte, espero les quede claro los pasos a seguir y de no ser así escriban sus dudas en los comentarios y a la brevedad posible estaré resolviéndolas.

 

Aqui pueden ver el resultado final 

Hasta la proxima Arduineros.

 

Por: @Riojas

Únanse a nuestro grupo de Facebook Underc0de.org

y a nuestro canal de Telegram @Underc0denews

Posts Relacionados

Comments

comments

Deja una respuesta

Tu email no será publicado. Los campos requeridos estan marcados con *
Puedes usar tags HTML y los atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>