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

Retrouvez nos tutoriels et d’autres exemples dans notre générateur automatique de code
La Programmerie