Icono del sitio AranaCorp

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

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:

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.

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

Fuentes

Salir de la versión móvil