|
Tutorial del Internet de las Cosas y Bluetooth con el ESP32
Juan Antonio Villalpando
Volver al índice del tutorial
____________________________
108.- Wemos D1 R32 ESP32. Servidor web. Página web. Botón y LED. Reconexión.
_________________________________
5.- Servidor Web. Enciende/apaga un LED mediante un Botón.
- Se muestra una página web con dos Botones, con uno encendemos el LED2 y con el otro lo apagamos.
- También nos mostrará el estado del LED2.
webserver_botones_led.ino |
// Juan A. Villalpando.
// KIO4.COM
// Enciende y apaga LED. Botones.
#include <WiFi.h>
const char* ssid = "Nombre_de_tu_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
WiFiServer server(80);
#define LED2 2 // LED en terminal 2
String estado = "";
void setup() {
Serial.begin(115200);
pinMode(LED2, OUTPUT);
// Conecta a la red wifi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("Conectado con WiFi.");
// Inicio del Servidor web.
server.begin();
Serial.println("Servidor web iniciado.");
// Esta es la IP
Serial.print("Esta es la IP para conectar: ");
Serial.print("http://");
Serial.println(WiFi.localIP());
}
void loop() {
// Consulta si se ha conectado algún cliente.
WiFiClient client = server.available();
if (!client) {
return;
}
Serial.print("Nuevo cliente: ");
Serial.println(client.remoteIP());
// Espera hasta que el cliente envíe datos.
// while(!client.available()){ delay(1); }
/////////////////////////////////////////////////////
// Lee la información enviada por el cliente.
String req = client.readStringUntil('\r');
Serial.println(req);
// Realiza la petición del cliente.
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
//////////////////////////////////////////////
// Página WEB. ////////////////////////////
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // Importante.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><meta charset=utf-8></head>");
client.println("<body><center><font face='Arial'>");
client.println("<h1>Servidor web con ESP32.</h1>");
client.println("<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>");
client.println("<h3>Página web.</h3>");
client.println("<br><br>");
// client.println("<img src='http://iesromerovargas.com/kio42.png'><br>");
client.println("<a href='on2'><button>Enciende LED2</button></a>");
client.println("<a href='off2'><button>Apaga LED2</button></a>");
client.println("<br><br>");
client.println(estado);
client.println("</font></center></body></html>");
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
- Si no te funciona el código anterior, prueba anular las dos últimas líneas de flush() y stop()
- Poner una imagen en hot-linking puede dificultar la conexión.
_____________________________________
_____________________________________
_____________________________________
_____________________________________
_____________________________________
- Modificación del código.
- He puesto el código HTML en una variable llamada pagina_web
- Fíjate que cambio cada línea con \
- Esta línea debe estar así: \r\n\r\n \
- El estado lo he puesto fuera del código web.
webserver_botones_led_2.ino |
// Juan A. Villalpando.
// KIO4.COM
// Enciende y apaga LED. Botones.
#include <WiFi.h>
const char* ssid = "Nombre_de_tu_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
String pagina_web ="\
HTTP/1.1 200 OK \
Content-Type: text/html \
\r\n\r\n \
<!DOCTYPE HTML> \
<html> \
<head><meta charset=utf-8></head>\
<body><center><font face='Arial'>\
<h1>Servidor web con ESP32.</h1>\
<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>\
<h3>Página web.</h3>\
<br><br>\
<img src='http://iesromerovargas.com/kio42.png'><br>\
<a href='on2'><button>Enciende LED2</button></a>\
<a href='off2'><button>Apaga LED2</button></a> \
<br><br>";
WiFiServer server(80);
#define LED2 2 // LED en terminal 2
String estado = "";
void setup() {
Serial.begin(115200);
pinMode(LED2, OUTPUT);
// Conecta a la red wifi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("Conectado con WiFi.");
// Inicio del Servidor web.
server.begin();
Serial.println("Servidor web iniciado.");
// Esta es la IP
Serial.print("Esta es la IP para conectar: ");
Serial.print("http://");
Serial.println(WiFi.localIP());
}
void loop() {
// Consulta si se ha conectado algún cliente.
WiFiClient client = server.available();
if (!client) {
return;
}
Serial.print("Nuevo cliente: ");
Serial.println(client.remoteIP());
// Espera hasta que el cliente envíe datos.
// while(!client.available()){ delay(1); }
/////////////////////////////////////////////////////
// Lee la información enviada por el cliente.
String req = client.readStringUntil('\r');
Serial.println(req);
// Realiza la petición del cliente.
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
//////////////////////////////////////////////
// Página WEB. ////////////////////////////
client.println(pagina_web);
client.println(estado);
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
_________________________________
_________________________________
_________________________________
_________________________________
2.- Añadimos otro Botón para consultar el estado del LED.
- Vamos a crear un tercer Botón llamado "Ver estado", que cuando lo pulsemos obtengamos el estado del LED sin modificarlo.
- Para poner otro Botón:
client.println("<a href='on2'><button>Enciende LED2</button></a>");
client.println("<a href='off2'><button>Apaga LED2</button></a>");
client.println("<a href='consulta'><button>Ver estado</button></a>");
- Y luego...
// Realiza la petición del cliente.
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
if (req.indexOf("consulta") != -1){
if (digitalRead(LED2)){estado = "Encendido";}
else {estado = "Apagado";}
}
webserver_botones_led_consulta.ino |
// Juan A. Villalpando.
// KIO4.COM
// Enciende y apaga LED. Botones.
#include <WiFi.h>
const char* ssid = "Nombre_de_tu_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
WiFiServer server(80);
#define LED2 2 // LED en terminal 2
String estado = "";
void setup() {
Serial.begin(115200);
pinMode(LED2, OUTPUT);
// Conecta a la red wifi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("Conectado con WiFi.");
// Inicio del Servidor web.
server.begin();
Serial.println("Servidor web iniciado.");
// Esta es la IP
Serial.print("Esta es la IP para conectar: ");
Serial.print("http://");
Serial.println(WiFi.localIP());
}
void loop() {
// Consulta si se ha conectado algún cliente.
WiFiClient client = server.available();
if (!client) {
return;
}
Serial.print("Nuevo cliente: ");
Serial.println(client.remoteIP());
// Espera hasta que el cliente envíe datos.
// while(!client.available()){ delay(1); }
/////////////////////////////////////////////////////
// Lee la información enviada por el cliente.
String req = client.readStringUntil('\r');
Serial.println(req);
// Realiza la petición del cliente.
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
if (req.indexOf("consulta") != -1){
if (digitalRead(LED2)){estado = "Ahora Encendido";}
else {estado = "Ahora Apagado";}
}
//////////////////////////////////////////////
// Página WEB. ////////////////////////////
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // Importante.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><meta charset=utf-8></head>");
client.println("<body><center><font face='Arial'>");
client.println("<h1>Servidor web con ESP8266.</h1>");
client.println("<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>");
client.println("<h3>Página web.</h3>");
client.println("<br><br>");
client.println("<a href='on2'><button>Enciende LED2</button></a>");
client.println("<a href='off2'><button>Apaga LED2</button></a>");
client.println("<a href='consulta'><button>Ver estado</button></a>");
client.println("<br><br>");
client.println(estado);
client.println("</font></center></body></html>");
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
- Si no te funciona el código anterior, prueba anular las dos últimas líneas de flush() y stop()
_________________________________
- Propuestas.
1.- Comenta mediante doble barra //, las líneas indicadas.
- Observa que la página carga algo más rápida y sigue funcionando.
comenta estas líneas |
// Espera hasta que el cliente envíe datos.
// while(!client.available()){ delay(1); }
//////////////////////////////////////////////
// Página WEB. ////////////////////////////
// client.println("HTTP/1.1 200 OK");
// client.println("Content-Type: text/html");
// client.println(""); // Importante.
// client.println("<!DOCTYPE HTML>");
// client.println("<html>");
// client.println("<head><meta charset=utf-8></head>");
// client.println("<body><center><font face='Arial'>");
// client.println("<h1>Servidor web con ESP32.</h1>");
// client.println("<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>");
// client.println("<h3>Página web.</h3>");
// client.println("<br><br>");
client.println("<a href='on2'><button>Enciende LED2</button></a>");
client.println("<a href='off2'><button>Apaga LED2</button></a>");
client.println("<br><br>");
client.println(estado);
// client.println("</font></center></body></html>");
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
2.- Crea un tercer Botón llamado "Ver estado", que cuando lo pulses obtenga el estado del LED sin modificarlo.
- Debes poner otro Botón:
client.println("<a href='on2'><button>Enciende LED2</button></a>");
client.println("<a href='off2'><button>Apaga LED2</button></a>");
client.println("<a href='consulta'><button>Ver estado</button></a>");
- Y luego...
// Realiza la petición del cliente.
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
if (req.indexOf("consulta") != -1){
if (digitalRead(LED2)){estado = "Encendido";}
else {estado = "Apagado";}
}
- Para hacer la comprobarción del "Ver estado" es conveniente utilizar dos navegadores. En un navegador pones un estado y en otro lo consulta.
3.- Conecta otro LED en otro terminal y cuando pulse los Botones se enciendan y apagen los dos.
4.- Conecta dos LED y pon cuatro Botones, dos botones encienden y apagan un LED y los otros dos el otro LED.
___________________________________________
- Comentarios.
- Cuidado al poner dos LED, imagina que ponemos el LED2 y el LED23, cuando realices esta orden dará problemas...
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
if (req.indexOf("on23") != -1) {digitalWrite(LED23, HIGH); estado = "Encendido";}
if (req.indexOf("off23") != -1){digitalWrite(LED23, LOW); estado = "Apagado";}
Por que tanto la línea del LED2 como la del LED23 contienen el texto "on2", por lo cual encenderá los dos LEDs (lo mismo ocurre con off2). Podrías poner esto por ejemplo:
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
if (req.indexOf("on-23") != -1) {digitalWrite(LED23, HIGH); estado = "Encendido";}
if (req.indexOf("off-23") != -1){digitalWrite(LED23, LOW); estado = "Apagado";}
En este caso el LED23 no contiene "on2" y funcionará correctamente.
- Otra forma de corregirlo es declararlos así:
#define LED02 2 // LED en terminal 02
#define LED23 23 // LED en terminal 23
if (req.indexOf("on02") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off02") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
if (req.indexOf("on23") != -1) {digitalWrite(LED23, HIGH); estado = "Encendido";}
if (req.indexOf("off23") != -1){digitalWrite(LED23, LOW); estado = "Apagado";}
___________________________________________
- Reconexión.
- Un problema que tiene el ESP32 y sus librerías es el de la reconexión, es decir si por algún motivo se corta la conexión WiFi es complicado que vuelva a reconectar automáticamente.
- Se suele utilizar códigos como el que indico.
unsigned long check_wifi = 30000;
void loop {
// Si se desconecta el wifi, intenta reconectar cada 30 segundos.
if ((WiFi.status() != WL_CONNECTED) && (millis() > check_wifi)) {
Serial.println("Intentando reconectar el WiFi...");
WiFi.disconnect();
WiFi.begin(ssid, password);
check_wifi = millis() + 30000;
}
webserver_botones_led_consulta.ino |
// Juan A. Villalpando.
// KIO4.COM
// Enciende y apaga LED. Botones.
#include <WiFi.h>
const char* ssid = "Nombre_de_tu_red_wifi";
const char* password = "La_clave_de_tu_red_wifi";
WiFiServer server(80);
#define LED2 2 // LED en terminal 2
String estado = "";
int wait30 = 30000;
void setup() {
Serial.begin(115200);
pinMode(LED2, OUTPUT);
// Conecta a la red wifi.
Serial.println();
Serial.print("Conectando con ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("Conectado con WiFi.");
// Inicio del Servidor web.
server.begin();
Serial.println("Servidor web iniciado.");
// Esta es la IP
Serial.print("Esta es la IP para conectar: ");
Serial.print("http://");
Serial.println(WiFi.localIP());
}
void loop() {
// Si se desconecta el wifi, intenta reconectar cada 30 segundos.
if ((WiFi.status() != WL_CONNECTED) && (millis() > wait30)) {
Serial.println("Intentando reconectar el WiFi...");
WiFi.disconnect();
WiFi.begin(ssid, password);
wait30 = millis() + 30000;
}
// Consulta si se ha conectado algún cliente.
WiFiClient client = server.available();
if (!client) {
return;
}
Serial.print("Nuevo cliente: ");
Serial.println(client.remoteIP());
// Espera hasta que el cliente envíe datos.
// while(!client.available()){ delay(1); }
/////////////////////////////////////////////////////
// Lee la información enviada por el cliente.
String req = client.readStringUntil('\r');
Serial.println(req);
// Realiza la petición del cliente.
if (req.indexOf("on2") != -1) {digitalWrite(LED2, HIGH); estado = "Encendido";}
if (req.indexOf("off2") != -1){digitalWrite(LED2, LOW); estado = "Apagado";}
if (req.indexOf("consulta") != -1){
if (digitalRead(LED2)){estado = "Ahora Encendido";}
else {estado = "Ahora Apagado";}
}
//////////////////////////////////////////////
// Página WEB. ////////////////////////////
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // Importante.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head><meta charset=utf-8></head>");
client.println("<body><center><font face='Arial'>");
client.println("<h1>Servidor web con ESP32.</h1>");
client.println("<h2><font color='#009900'>KIO4.COM - Juan A. Villalpando</font></h2>");
client.println("<h3>Página web.</h3>");
client.println("<br><br>");
client.println("<a href='on2'><button>Enciende LED2</button></a>");
client.println("<a href='off2'><button>Apaga LED2</button></a>");
client.println("<a href='consulta'><button>Ver estado</button></a>");
client.println("<br><br>");
client.println(estado);
client.println("</font></center></body></html>");
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
- Aquí tenemos otro código de reconexión
reconexión.ino |
int UpCount = 0;
loop()
{
if ( WiFi.status() == WL_CONNECTED )
{
// WiFi is UP, do what ever
AQUI PONEMOS TODO EL CÓDIGO DEL LOOP DEL EJEMPLO ANTERIOR
} else
{
// wifi down, reconnect here
WiFi.begin( );
int WLcount = 0;
while (WiFi.status() != WL_CONNECTED && WLcount < 200 )
{
delay( 100 );
Serial.printf(".");
if (UpCount >= 60) // just keep terminal from scrolling sideways
{
UpCount = 0;
Serial.printf("\n");
}
++UpCount;
++WLcount;
}
}
} // END loop()
|
_______________________________
|
