fbpixel
Controla 8 relés mediante ESP32 y una interfaz web

Controla 8 relés mediante ESP32 y una interfaz web

En este tutorial, crearemos una interfaz web para controlar 8 relés individualmente. Este tutorial es una continuación del proyecto Piloto 8 relés utilizando un ESP32 y el monitor de serie.

Este tutorial se puede aplicar a cualquier microcontrolador con conexión Wifi o Ethernet. Tendrá que tener cuidado de modificar el esquema de conexión y el código para que se ajuste a su uso.

Hardware

  • NodeMCU 32S
  • Breadboard
  • Jumper cable
  • Módulo de 8 relés
  • Registro de desplazamiento 74hc595

Principio

En el tutorial anterior, vimos cómo accionar 8 relés de forma independiente utilizando el monitor serie de Arduino IDE. Cuando se dispone de una conexión a Internet, como en el ESP32 NodeMCU, es posible convertir el microcontrolador en un servidor y alojar una página web. Esta página web puede utilizarse como interfaz gráfica de usuario para impulsar su proyecto. Crearemos una página web, accesible a través de la red local, con botones para activar los relés.

Código

Tomaremos el código del tutorial anterior y lo combinaremos con el código para crear una Interfaz Web para el ESP32 NodeMCU. En la página web, crearemos una tabla que contenga 16 botones correspondientes a las acciones “Activar” y “Reiniciar” de los 8 relés. Para visualizar algunas acciones, añadimos un inserto para mostrar los mensajes del microcontrolador.

void webpage(WiFiClient client) { //Send webpage to browser
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<title> AranaCorp </title>");
  client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
  client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
  client.println("<meta charset='UTF-8'>");
  client.println("");
  client.println("");
  client.println("");
  client.println("</head>");
  client.println("<body> ");
  client.println("<div id='page'>");
  client.println("<div id='content'>");
  client.println("<hr/><hr>");
  client.println("<h1><center> AranaCorp - Relay Controller Web Interface </center></h1>");
  client.println("<hr/><hr>");
  client.println("<br><br><div id='m' class='box'><center><table>");
  client.println("<tr><td>Console </td><td><input id='senM1' class='sensor'  value='" + String(console) + "' readonly></input></td></tr> </table>");

  client.println("  <table><tr><td>Relay 0</td>");
  client.println("   <td><a href='/light0on' class='button activate'> Activate </a>");
  client.println("  <a href='/light0off' class='button reset'> </a></td><td>Relay 1</td>");
  client.println("   <td><a href='/light1on' class='button activate'> Activate </a>");
  client.println("  <a href='/light1off' class='button reset'> Reset </a></td><td>Relay 2</td>");
  client.println("   <td><a href='/light2on' class='button activate'> Activate </a>");
  client.println("  <a href='/light2off' class='button reset'> Reset </a></td><td>Relay 3</td>");
  client.println("   <td><a href='/light3on' class='button activate'> Activate </a>");
  client.println("  <a href='/light3off' class='button reset'> Reset </a></td></tr><tr><td>Relay 4</td>");
  client.println("   <td><a href='/light4on' class='button activate'> Activate </a>");
  client.println("  <a href='/light4off' class='button reset'> Reset </a></td><td>Relay 5</td>");
  client.println("   <td><a href='/light5on' class='button activate'> Activate </a>");
  client.println("  <a href='/light5off' class='button reset'> Reset </a></td><td>Relay 6</td>");
  client.println("   <td><a href='/light6on' class='button activate'> Activate </a>");
  client.println("  <a href='/light6off' class='button reset'> Reset </a></td><td>Relay 7</td>");
  client.println("   <td><a href='/light7on' class='button activate'> Activate </a>");
  client.println("  <a href='/light7off' class='button reset'> Reset </a></td></tr>");
  client.println("</table></center></div>");

  client.println("</div><footer><div><p style='text-align:left;float:left;padding:0px;margin:0px;'>&copy; Copyright 2020 AranaCorp. All rights reserved</p><p style='float:right;padding:0px;margin:0px;'><a style='color:#3aaa35;' href='https://www.aranacorp.com/fr/evidence'>www.aranacorp.com</a><p></div></footer></div></body></html>");
  delay(1);
  client.stop();
}

Una vez que la página web es funcional, todo lo que tenemos que hacer es manejar las peticiones del navegador en la función loop().

void loop() {
  WiFiClient client = server.available();
  if (client) {
    if (client.connected()) {
      String request = "";
      if (client.available()) {
        request = client.readStringUntil('\r');
        if (request != "") {
          client.print( header );
          handleRequest(request);
          webpage(client);//Return webpage
        }
      }
    }
  }
}

void handleRequest(String request) { /* function handleRequest */
  ////Handle web client request
  String pwmCmd;
  //Digital Ouputs
  for (int i = 0; i < 16; i++) {
    if (request.indexOf("/light" + String(i) + "on") > 0) {
      Serial.print("Relay n° "); Serial.print(i); +Serial.println(" ON ");
      setRegisterPin(i, 0);
      writeRegisters();
      console = String("Relay n°" + String(i) + " ON");
    }
    if (request.indexOf("/light" + String(i) + "off") > 0) {
      Serial.print("Relay n° "); Serial.print(i); +Serial.println(" OFF ");
      setRegisterPin(i, 1);
      writeRegisters();
      console = String("Relay n°" + String(i) + " OFF");
    }
  }
}

A continuación encontrará el código completo que integra la gestión de la página web así como el registro de turnos visto en los artículos anteriores. No olvides actualizar las variables ssid y password con los valores de tu red.

//Libraries
#include <WiFi.h>//https://www.arduino.cc/en/Reference/WiFi

//Constants
#define number_of_74hc595s 2
#define numOfRegisterPins number_of_74hc595s * 8
#define SER_Pin 25
#define RCLK_Pin 33
#define SRCLK_Pin 32

//Variables
boolean registers[numOfRegisterPins];

char* ssid  = "*****";
char* password  = "*****";


String nom  = "ESP32";
//Objects
WiFiServer server(80);
WiFiClient client;

String header = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
String console = "System initialized";

void setup() {
  //Init Serial USB
  Serial.begin(115200);
  Serial.println(F("Initialize System"));
  //Init ESP32Wifi
  Serial.print("Connecting to "); Serial.println(ssid);
  WiFi.begin(ssid, password);
  // Connect to Wifi network.
  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500); Serial.print(F("."));
  }
  server.begin();
  Serial.println();
  Serial.println(F("ESP32Wifi initialized"));
  Serial.print(F("IP Address: "));
  Serial.println(WiFi.localIP());

  //Init register
  pinMode(SER_Pin, OUTPUT);
  pinMode(RCLK_Pin, OUTPUT);
  pinMode(SRCLK_Pin, OUTPUT);
  clearRegisters();
  writeRegisters();
  delay(500);
}

void loop() {
  WiFiClient client = server.available();
  if (client) {
    if (client.connected()) {
      String request = "";
      if (client.available()) {
        request = client.readStringUntil('\r');
        if (request != "") {
          client.print( header );
          handleRequest(request);
          webpage(client);//Return webpage
        }
      }
    }
  }
}


void handleRequest(String request) { /* function handleRequest */
  ////Handle web client request
  String pwmCmd;
  //Digital Ouputs
  for (int i = 0; i < 16; i++) {
    if (request.indexOf("/light" + String(i) + "on") > 0) {
      Serial.print("Relay n° "); Serial.print(i); +Serial.println(" ON ");
      setRegisterPin(i, 0);
      writeRegisters();
      console = String("Relay n°" + String(i) + " ON");
    }
    if (request.indexOf("/light" + String(i) + "off") > 0) {
      Serial.print("Relay n° "); Serial.print(i); +Serial.println(" OFF ");
      setRegisterPin(i, 1);
      writeRegisters();
      console = String("Relay n°" + String(i) + " OFF");
    }
  }
}




void webpage(WiFiClient client) { //Send webpage to browser
  /* client.println("HTTP/1.1 200 OK");
    client.println("Content-Type: text/html");
    client.println("");*/
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<title> AranaCorp </title>");
  client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
  client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
  client.println("<meta charset='UTF-8'>");
  //client.println("<meta http-equiv='refresh' content='1'>");
  client.println("");
  client.println("<style>");
  client.println("");
  client.println("   body {");
  client.println("   font-size:100%;");
  client.println("   color:white;");
  client.println("   background-color: #111111;");
  client.println("   margin:0px;");
  client.println("   } ");
  client.println("  ");
  client.println("  #page {");
  client.println("width:100%;");
  client.println("  position: relative;");
  client.println("  min-height: 99vh;");
  client.println("}");
  client.println("");
  client.println("#content {");
  client.println("  padding-bottom: 2.5rem;    /* Footer height */");
  client.println("}");
  client.println("");
  client.println("footer {");
  client.println("  background-color:black;");
  client.println("  position: absolute;");
  client.println("  bottom: 0;");
  client.println("  width: 100%;");
  client.println("  height: 2.5rem;            /* Footer height */");
  client.println("}");
  client.println("   ");
  client.println("   h1 {color: #3AAA35;}");
  client.println("   p { text-align:center; }");
  client.println("");
  client.println("   table {");
  client.println("   width=80%;");
  client.println("margin: 40px 40px 40px 40px;");
  client.println("   }");
  client.println("   tr{");
  client.println("border: 1px solid black;");
  client.println("padding: 20px 20px 20px 20px;");
  client.println("   }");
  client.println("   td{");
  client.println("padding: 10px 10px 10px 10px;");
  client.println("   }");
  client.println("   .wrapper {");
  client.println("display: grid;");
  client.println("/*grid-template-columns: 1fr 1fr 1fr;*/");
  client.println("");
  client.println("margin: 60px 20px 60px 20px;");
  client.println("}");
  client.println(".box {");
  client.println("  border-radius: 10px;");
  client.println("  border: 2px solid white;");
  client.println("  font-size: 150%;");
  client.println("  /*height: 120px;*/");
  client.println("  margin: 5px 5px 5px 5px;");
  client.println("}");
  client.println("");
  client.println(".button {");
  client.println("  background-color: #111111; /* Green */");
  client.println("  border: none;");
  client.println("  color: white;");
  client.println("  padding: 16px 32px;");
  client.println("  text-align: center;");
  client.println("  text-decoration: none;");
  client.println("  display: inline-block;");
  client.println("  font-size: 16px;");
  client.println("  margin: 4px 2px;");
  client.println("  transition-duration: 0.4s;");
  client.println("  cursor: pointer;");
  client.println("  border-radius: 12px;");
  client.println("}");
  client.println("");
  client.println(".activate {");
  client.println("  color: white; ");
  client.println("  border: 2px solid #3AAA35;");
  client.println("}");
  client.println("");
  client.println(".activate:hover {");
  client.println("  background-color: #3AAA35;");
  client.println("  color: white;");
  client.println("}");
  client.println("");
  client.println(".reset { ");
  client.println("  color: white; ");
  client.println("  border: 2px solid #f44336;");
  client.println("}");
  client.println("");
  client.println(".reset:hover {");
  client.println("  background-color: #f44336;");
  client.println("  color: white;");
  client.println("}");
  client.println("");
  client.println("    .sensor {");
  client.println("  background-color: #ffffff;");
  client.println("  border: none;");
  client.println("  color: black;");
  client.println("  padding: 16px 32px;");
  client.println("  text-align: center;");
  client.println("  text-decoration: none;");
  client.println("  display: inline-block;");
  client.println("  font-size: 16px;");
  client.println("  margin: 4px 2px;");
  client.println("  transition-duration: 0.4s;");
  client.println("  cursor: pointer;");
  client.println("  border-radius: 2px;");
  client.println("}");
  client.println("");
  client.println(".status {");
  client.println("  color: white; ");
  client.println("  border: 5px solid #3AAA35;");
  client.println("  border-radius: 12px;");
  client.println("}");
  client.println("");
  client.println("");
  client.println("@media (min-width: 1050px){ /*screen and*/");
  client.println("  .wrapper {");
  client.println("grid-template-columns: repeat(2, 1fr);");
  client.println("  }");
  client.println("  ");
  client.println("@media (min-width: 1500px){");
  client.println("  .wrapper {");
  client.println("grid-template-columns: repeat(3, 1fr);");
  client.println("  }");
  client.println("}");
  client.println("");
  client.println(" </style>");
  client.println("");
  client.println("");
  client.println("</head>");
  client.println("<body> ");
  client.println("<div id='page'>");
  client.println("<div id='content'>");
  client.println("<hr/><hr>");
  client.println("<h1><center> AranaCorp - Relay Controller Web Interface </center></h1>");
  client.println("<hr/><hr>");
  client.println("<br><br><div id='m' class='box'><center><table>");
  client.println("<tr><td>Console </td><td><input id='senM1' class='sensor'  value='" + String(console) + "' readonly></input></td></tr> </table>");

  client.println("  <table><tr><td>Relay 0</td>");
  client.println("   <td><a href='/light0on' class='button activate'> Activate </a>");
  client.println("  <a href='/light0off' class='button reset'> Reset </a></td><td>Relay 1</td>");
  client.println("   <td><a href='/light1on' class='button activate'> Activate </a>");
  client.println("  <a href='/light1off' class='button reset'> Reset </a></td><td>Relay 2</td>");
  client.println("   <td><a href='/light2on' class='button activate'> Activate </a>");
  client.println("  <a href='/light2off' class='button reset'> Reset </a></td><td>Relay 3</td>");
  client.println("   <td><a href='/light3on' class='button activate'> Activate </a>");
  client.println("  <a href='/light3off' class='button reset'> Reset </a></td></tr><tr><td>Relay 4</td>");
  client.println("   <td><a href='/light4on' class='button activate'> Activate </a>");
  client.println("  <a href='/light4off' class='button reset'> Reset </a></td><td>Relay 5</td>");
  client.println("   <td><a href='/light5on' class='button activate'> Activate </a>");
  client.println("  <a href='/light5off' class='button reset'> Reset </a></td><td>Relay 6</td>");
  client.println("   <td><a href='/light6on' class='button activate'> Activate </a>");
  client.println("  <a href='/light6off' class='button reset'> Reset </a></td><td>Relay 7</td>");
  client.println("   <td><a href='/light7on' class='button activate'> Activate </a>");
  client.println("  <a href='/light7off' class='button reset'> Reset </a></td></tr>");
  client.println("</table></center></div>");

  client.println("</div><footer><div><p style='text-align:left;float:left;padding:0px;margin:0px;'>&copy; Copyright 2020 AranaCorp. All rights reserved</p><p style='float:right;padding:0px;margin:0px;'><a style='color:#3aaa35;' href='https://www.aranacorp.com/fr/evidence'>www.aranacorp.com</a><p></div></footer></div></body></html>");
  delay(1);
  client.stop();
}

//SR
void clearRegisters() { /* function clearRegisters */
  //// Clear registers variables
  for (int i = numOfRegisterPins - 1; i >=  0; i--) {
    registers[i] = HIGH;
  }
}

void writeRegisters() { /* function writeRegisters */
  //// Write register after being set
  digitalWrite(RCLK_Pin, LOW);
  for (int i = numOfRegisterPins - 1; i >=  0; i--) {
    digitalWrite(SRCLK_Pin, LOW);
    digitalWrite(SER_Pin, registers[i]);
    digitalWrite(SRCLK_Pin, HIGH);
  }
  digitalWrite(RCLK_Pin, HIGH);
}

void setRegisterPin(int index, int value) { /* function setRegisterPin */
  ////Set register variable to HIGH or LOW
  registers[index] = value;
}

void printRegisters() { /* function clearRegisters */
  //// Clear registers variables
  for (int i = 0; i < numOfRegisterPins; i++) {
    Serial.print(registers[i]); Serial.print(F(" ,"));
  }
  Serial.println();
}

Resultado

Una vez cargado el código en el microcontrolador, introduzca la dirección IP que aparece en el monitor serie (aquí 192.168.1.64) en su navegador web. Debería aparecer la siguiente página.

A continuación, puede cerrar los relés con los botones “Activar” y abrirlos con los correspondientes botones “Reiniciar”.

No dudes en dejarnos un comentario para darnos tu opinión, comentarios e ideas para mejorar este tutorial.

Fuentes

Crear una interfaz web para controlar su ESP32 NodeMCU

Crear una interfaz web para controlar su ESP32 NodeMCU

El NodeMCU ESP32 es un microcontrolador con módulos integrados de Wifi y Bluetooth. Es muy fácil de usar, es ligero y tiene una capacidad de memoria y de cálculo mayor que el Arduino. Esto lo convierte en un tablero ideal para aprender a programar, desarrollar objetos conectados o un servidor.

La forma básica de crear objetos conectados es conectarlos a una red como WiFi. El transmisor WiFi y la antena incorporada en el microcontrolador permite la conexión a Internet. Gracias a esto, es posible crear un servidor que aloja una interfaz web para controlar el microcontrolador ESP32 de forma remota.

Requisitos: Programación de un NodoMCU con el IDE de Arduino

Hardware

  • Computador
  • NodeMCU ESP32
  • Cable USB A macho a micro B macho

Principio de funcionamiento

La tarjeta ESP32 NodeMCU utiliza el módulo ESP-WROOM-32 que contiene un microprocesador de doble núcleo que funciona a 32 bits. Integra un transceptor WiFi que le permite conectarse a las redes existentes o crear su propia red.

Schéma NodeMCU ESP32

El microcontrolador NodeMCU ESP32 tiene 48 GPIOs de las cuales 25 están disponibles en los pines. En estos 25 alfileres:

  • 15 pueden utilizarse para las entradas analógicas
  • 25 pueden ser usados como salidas PWM
  • 9 como sensores capacitivos
  • Algunos están reservados para los protocolos de comunicación en serie (SPI, I2C, Serial).

La tarjeta NodeMCU ESP32 tiene una interfaz WiFi. Por lo tanto, no requiere ningún componente adicional para conectarse a Internet.

N.B.: Hay varias versiones de NodeMCU. Antes de conectar los componentes a su placa o programar el microcontrolador, asegúrese de comprobar la versión y el pinout.

Code

Para usar la tarjeta NodeMCU ESP32, primero tenemos que instalar el gestor de tarjetas añadiendo la dirección https://dl.espressif.com/dl/package_esp32_index.json en las preferencias del IDE de arduino. Entonces, para comunicarnos en la red, necesitamos usar un protocolo especial. Este protocolo está integrado en todas las bibliotecas relacionadas con la comunicación WiFi.

  • Tienes que conectar el módulo WiFi a la red
  • definir un servidor server
  • definir un cliente client

En el IDE de Arduino, la biblioteca que nos permite gestionar el transceptor de WiFi es la biblioteca WiFi.h.

//Libraries
#include <WiFi.h>//https://www.arduino.cc/en/Reference/WiFi

//Constants
#define LED 2

//Parameters
String request ;
char* ssid  = "********";
char* password  = "********";
String nom  = "ESP32";

//Objects
WiFiServer server(80);
WiFiClient client;

void setup(){
//Init Serial USB
Serial.begin(9600);
Serial.println(F("Initialize System"));
//Init ESP32Wifi
  Serial.print("Connecting to ");Serial.println(ssid);
WiFi.begin(ssid, password);
  // Connect to Wifi network.
while (WiFi.status() != WL_CONNECTED)
{
  delay(500);Serial.print(F("."));
}
  server.begin();
  Serial.println();
  Serial.println(F("ESP32Wifi initialized"));
  Serial.print(F("IP Address: "));
  Serial.println(WiFi.localIP());
pinMode(LED,OUTPUT);
}

void loop(){
WiFiClient client = server.available();
  if (client) {
    while(client.connected()){
      if (client.available()) {
        String request = client.readStringUntil('\r');
        Serial.println(request);
        handleRequest(request);
      }
      webpage(client);//Return webpage
      break;
    }
    client.stop()
  }
 }

void handleRequest(String request){/* function handleRequest */ 
////Handle web client request
String pwmCmd;
//Digital Ouputs
if (request.indexOf("/dig0on") > 0){
                digitalWrite(LED, HIGH);
          }
          if (request.indexOf("/dig0off") >0) {
                digitalWrite(LED, LOW);
          }
}

void webpage(WiFiClient client){/* function webpage */ 
////Send webpage to client
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<title> AranaCorp </title>");
client.println("<meta http-equiv='content-type' content='text/html; charset=UTF-8'>");
client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
client.println("<meta http-equiv='refresh' content='5'>");
client.println("</head>");
client.println("<body bgcolor = '#70706F'> ");
client.println("<hr/><hr>");
client.println("<h1 style='color : #3AAA35;'><center> AranaCorp - "+nom+" Web Controller </center></h1>");
client.println("<hr/><hr>");
client.println("<br><br>");
client.println("<br><br><h2> Analog Inputs/Ouputs </h2><center>");
client.println("  Pin G0");
client.println("  <input value="+String(analogRead(0))+" readonly></input>");
client.println("  </center><h2> Digital Pin states </h2><center><center>");
client.println("  LED Pin");
client.println("  <input value="+String(digitalRead(LED))+" readonly></input>");
client.println("  <a href='/dig0on'><button>Turn On </button></a>");
client.println("  <a href='/dig0off'><button>Turn Off </button></a><br /> ");
client.println("  </center><center>");
client.println("<table>");
client.println("<tr>");
if (digitalRead(LED)){
client.println("   <td>LED pin is HIGH</td>");
                 }else{
client.println("<td>LED pin is LOW</td>    ");
                }
client.println("</tr>");
client.println("</table></center></body></html>");
client.println();
}

Una vez cargado el código en el ESP32, debería ver aparecer la interfaz web después de introducir la dirección IP que se muestra en el monitor de serie.

La siguiente línea de código permite que la página se actualice cada 5 segundos. Esto permite que los datos de la página web se actualicen automáticamente.

client.println("<meta http-equiv='refresh' content='5'>");

N.B.: Si esta línea causa problemas o si no la necesitas, puedes comentarla. Hay otro método más eficiente que utiliza peticiones Ajax

Solicitudes

  • Internet of Things
  • Utilice una interfaz web para manejar su microcontrolador y guardar las mediciones en una base de datos.

Fuentes

Crear una interfaz web con NodeMCU ESP8266

Crear una interfaz web con NodeMCU ESP8266

El NodeMCU ESP8266 es un microcontrolador con un módulo Wifi integrado. Es muy fácil de usar, es ligero y tiene una memoria y capacidad de cálculo mayor que el Arduino. Ideal para sus proyectos conectados.
Lo básico de la IoT es conectar los objetos a una red como la WiFi. El transmisor y la antena WiFi integrados en el microcontrolador permiten la conexión a Internet. Gracias a esto, es posible crear un servidor que aloja una página web que permite controlar el microcontrolador de forma remota. Esta página puede ser utilizada para mostrar los valores medidos por el NodeMCU o para controlar las entradas/salidas del microcontrolador.

Requisitos: Programación de un NodeMCU con el IDE de Arduino

Hardware

  • Computadora
  • NodeMCU ESP8266 (or Wemos)
  • Cable USB A macho a micro B macho

Principio de funcionamiento

La placa NodeMCU ESP8266 contiene un módulo ESP-12E que contiene un microprocesador de 32 bits. Integra un transceptor WiFi que le permite conectarse a las redes existentes o crear su propia red.
La red WiFi es una red de radio que funciona en las frecuencias de 2,45 GHz y 5 GHz.

Esquema

El microcontrolador tiene una entrada analógica y 16 GPIO (11 E/S digitales) disponibles en los pines de la placa de desarrollo. En los 25 pines:

  • 1 entrada analógica
  • 4 salidas PWM
  • Algunos están reservados para los protocolos de comunicación en serie (SPI, I2C, Serial).

Es necesario tener un componente Ethernet o Wifi integrado o añadido al microcontrolador para tener la capacidad de comunicarse en la red. El módulo ESP-12E tiene una interfaz Wifi. Por lo tanto no requiere ningún componente adicional para conectarse a Internet.

Code

Para usar la tarjeta NodeMCU, primero tenemos que instalar el gestor de tarjetas después de añadir la dirección https://arduino.esp8266.com/stable/package_esp8266com_index.json en las preferencias del IDE de Arduino.
Para comunicarnos en la red, necesitamos usar un protocolo especial. Este protocolo está integrado en todas las bibliotecas relacionadas con la comunicación Wifi.

  • conectar el módulo WiFi a la red
  • definir un servidor
  • definir un cliente

La biblioteca que nos permitirá gestionar el transceptor Wifi es la biblioteca ESP8266WiFi.h. Para cargar el código de Arduino en la tarjeta, debes seleccionar la tarjeta y el puerto correctos. En nuestro caso, la tarjeta es NodeMCU 1.0 (Módulo ESP-12E).

N.B.: No olvides cambiar las variables ssid y password para que coincidan con la red Wifi utilizada

//Libraries
#include <ESP8266WiFi.h>//https://github.com/esp8266/Arduino/blob/master/libraries/ESP8266WiFi/src/ESP8266WiFi.h

//Constants
#define LED D4

//Parameters
String request;
char* ssid = "********";
char* password = "********";
String nom = "ESP8266";

//Objects
WiFiServer server(80);

void setup(){
//Init Serial USB
Serial.begin(115200);
Serial.println(F("Initialize System"));
//Init ESPBrowser
  Serial.print(F("Connecting to "));Serial.println(ssid);
WiFi.begin(ssid, password);
  // Connect to Wifi network.
while (WiFi.status() != WL_CONNECTED)
{
  delay(500);Serial.print(F("."));
}
  server.begin();
  Serial.println();
  Serial.println(F("ESPBrowser initialized"));
  Serial.print(F("IP Address: "));
  Serial.println(WiFi.localIP());
//Init WiFi server
  server.begin();
  pinMode(LED, OUTPUT);
  pinMode(A0,INPUT);
}

void loop(){
WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wait until the client sends some data
  Serial.println("new client");
  while(!client.available()){
    delay(1);
  }
 
  // Read the first line of the request
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();
  handleRequest(request);
  webpage(client);//Return webpage
}

void handleRequest(String request){/* function handleRequest */ 
////Handle web client request
 if (request.indexOf("/light1on") > 0)  {
    digitalWrite(LED, LOW);
  }
  if (request.indexOf("/light1off") >0)  {
    digitalWrite(LED, HIGH);
  }
}

void webpage(WiFiClient client){/* function webpage */ 
////Send wbepage to client
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); //  do not forget this one
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
  client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
  client.println("</head>");
  client.println("<body bgcolor = '#70706F'>"); 
  client.println("<hr/><hr>");
  client.println("<h1 style='color : #3AAA35;'><center> "+nom+" Device Control </center></h1>");
  client.println("<hr/><hr>");
  client.println("<br><br>");
  client.println("<br><br>");
  client.println("<center>");
  client.println("  Pin A0");
  client.println("  <input value="+String(analogRead(A0))+" readonly></input>");
  client.println("  </center>");
  client.println("<center>");
  client.println("Built-in LED");
  client.println("<a href='/light1on'><button>Turn On </button></a>");
  client.println("<a href='/light1off'><button>Turn Off </button></a><br />");  
  client.println("</center>");   
  client.println("<br><br>");
  client.println("<br><br>");
  client.println("<center>");
  client.println("<table border='5'>");
  client.println("<tr>");
  client.print("<td>LED is </td>");
  if (digitalRead(LED))
  { 
    client.print("<td> OFF</td>");
  }else{
    client.print("<td> ON</td>");
  } 
   client.println("</tr>");
   client.println("</table>");
   client.println("</center>");
   client.println("</body></html>"); 
   client.println();
   delay(1);
}

Aplicaciones

  • Utiliza una interfaz web para controlar los motores o manejar los sensores conectados a tu microcontrolador ESP8266.

Fuentes