Controle um NodeMCU ESP8266 com uma interface web

Etiquetas: ESP8266, WebUI

O NodeMCU ESP8266 é um microcontrolador com um módulo Wifi integrado. Muito fácil de usar, é leve e tem uma memória e capacidade computacional superior à do Arduino. Ideal para os seus projectos ligados. A base para a criação de objectos ligados é ligá-los a uma rede como WiFi. O transmissor e a antena WiFi integrados no microcontrolador permitem a ligação à Internet. Graças a isto, é possível criar um servidor que aloja uma página web permitindo controlar o microcontrolador remotamente. Esta página pode ser utilizada para exibir valores medidos pelo NodeMCU ou para controlar as entradas/saídas do microcontrolador.

Pré-requisito: Programar um NodeMCU com a IDE Arduino

Material

• Computador
• ESP8266
• Cabo USB A Macho/Micro B Macho

Princípio funcional

A placa ESP8266 NodeMCU contém um módulo ESP-12E com um microprocessador de 32 bits. Integra um transreceptor WiFi que lhe permite ligar-se a redes existentes ou criar a sua própria rede. A rede WiFi é uma rede de rádio que funciona nas frequências de 2,45 GHz e 5 GHz.

Esquema

O microcontrolador tem uma entrada analógica e 16 GPIOs (11 Digital I/O)disponíveis nos pinos da placa de desenvolvimento. Nos 25 pinos:

• 1 entrada analógica
• 4 saídas PWM
• Alguns são reservados para protocolos de comunicação em série (SPI, I2C, Serial).

É necessário ter um componente Ethernet ou Wifi integrado ou adicionado ao microcontrolador para ter a capacidade de comunicar na rede. O módulo ESP-12E tem uma interface Wifi. Não requer um componente adicional para se ligar à Internet.

Código

Para utilizar a placa NodeMCU, devemos primeiro instalar o gestor da placa depois de adicionar o endereço http://arduino.esp8266.com/stable/package_esp8266com_index.json nas preferências da IDE Arduino. Para comunicar na rede, devemos utilizar um protocolo específico.

Este protocolo está integrado em todas as bibliotecas relacionadas com a comunicação Wifi.

• O módulo WiFi deve ser ligado à rede
• definir um servidor
• definir um cliente

A biblioteca que nos permitirá gerir o transceptor Wifi é a biblioteca ESP8266WiFi.h. Para carregar o código Arduino no quadro, é necessário seleccionar o quadro certo e o porto certo. No nosso caso, a placa é NodeMCU 1.0 (Módulo ESP-12E). Em seguida, criaremos a interface web do ESP8266 na função da página web em HTML.

N.B.: Não se esqueça de modificar o ssid e a password correspondentes à rede Wifi utilizada no código a seguir.

//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);
}

Aplicações

• Use uma interface web para conduzir motores ou gerir sensores ligados ao seu microcontrolador ESP8266

Fontes

• https://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/readme.html
• https://github.com/esp8266/Arduino/blob/master/libraries/ESP8266WiFi/src/ESP8266WiFi.h
• Tutoriais HTML W3School
• Tutoriais HTML de Mozilla