domingo, 30 de diciembre de 2018

Servidor web con ESP8266

Hoy les traigo la continuación del servidor simple, la idea es poder interactuar con el micro a través de una interfaz web. En este ejemplo vamos a encender y apagar el led del ESP8266 de forma remota, también se pueden agregar hojas de estilo y me imagino que también se puede agregar código en javaScript (después de todo lo que hay que hacer es mandar texto al navegador para que lo interprete), el único cuidado que hay que tener es escribir el html, el css y lo que necesiten uno a continuación del otro.

Para recuperar variables de la página web hay que hacerlo de la siguiente forma:

  servidorweb.on("/", []()
  {
    String estado = servidorweb.arg("estado");
    if(estado == "ON")
    {
      digitalWrite(2, LOW);
    }
    else if(estado == "OFF")
    {
      digitalWrite(2, HIGH);
    }
    servidorweb.send(200, "text/html", HTMLpage);
  });

con el ".arg()" recuperamos el valor de la variable que pongamos entre paréntesis, luego podremos trabajar en función de eso.

El código total quedaría de la siguente forma:


#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>

ESP8266WebServer servidorweb(80);

const char* red = "red"/*ingrese aquí el nombre de id*/;
const char* contra = "contra"/*ingrese aquí la contraseña*/;
String HTMLpage =

  "<!DOCTYPEhtml>"
  "<html>"
    "<head>"
      "<title>"
        "Tutorial de servidor web"
      "</title>"
    "</head>"
    "<h3>"
      "Esto es un servidor web (de ejemplo)<br>"
      " con el micro ESP8266 para controlar<br>"
      " el led integrado en la placa."
    "</h3>"
    "<form action=\"/\" method=\"post\">"
      "<td><button name=\"estado\" type=\"submit\" class = \"button\" value=\"ON\">ON</button></td>"
      "<td><button name=\"estado\" type=\"submit\" class = \"button\" value=\"OFF\">OFF</button></td>"
    "</form>"
  "<html>";

void setup() {

  Serial.begin(115200);
  pinMode(2, OUTPUT);

  WiFi.begin(red, contra);

  while (WiFi.status() != WL_CONNECTED)
  {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.print("Conectado a");
  Serial.println(red);
  Serial.print("Dirección IP:");
  Serial.println(WiFi.localIP());
  
  servidorweb.on("/", []()
  {
    String estado = servidorweb.arg("estado");
    if(estado == "ON")
    {
      digitalWrite(2, LOW);
    }
    else if(estado == "OFF")
    {
      digitalWrite(2, HIGH);
    }
    servidorweb.send(200, "text/html", HTMLpage);
  });

  servidorweb.begin();
}

void loop() {
  
  servidorweb.handleClient();
  
}

Recordemos que la página va a estar montada sobre la dirección ip 192.168.4.1, por lo que hay que ingresar ahí para ver la página. Si bien la página y el código son muy sencillos, como mencioné antes, se puede agregar javaScript y css para que la página sea más interesante, pero hay que tener en cuenta que si queremos agregar librerías o frameworks de JS la memoria del microcontrolador va a empezar a escasear. En teoría se podría agregar una memoria externa (ej. una microSD) para almacenar la página web con todas las librerías y demás. A continuación les dejo cómo luce la página que acabamos de hacer.


Básicamente cuando presionamos los botones se "manda" al argumento "estado" el valor "ON" u "OFF" el cuál el servidor va a procesar para prender o apagar el led. Como los estados del ESP8266 están negados el estado low va a encender el led y el high lo va a apagar.

No hay comentarios.:

Publicar un comentario