|
Tutorial del Internet de las Cosas y Bluetooth con el ESP8266
Juan Antonio Villalpando
Volver al índice del tutorial
____________________________
308.- ESP8266 D1 R32 ESP32. Servidor web. Enciende/apaga un LED mediante un Botón.
- Se muestra una página web con dos Botones, con uno encendemos el LED5 y con el otro lo apagamos.
- También nos mostrará el estado del LED5.
NOTA: En caso que la carga de la página sea lenta, borra la parte del código HTML dejando solo las líneas marcadas como: // NECESARIA
webserver_botones_led.ino |
// Juan A. Villalpando.
// KIO4.COM
// Enciende y apaga LED. Botones.
#include <ESP8266WiFi.h>
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
WiFiServer server(80);
#define LED5 D5 // LED en terminal D5
String estado = "";
void setup() {
Serial.begin(115200);
pinMode(LED5, 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("on5") != -1) {digitalWrite(LED5, HIGH); estado = "Encendido";}
if (req.indexOf("off5") != -1){digitalWrite(LED5, 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 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("<img src='http://iesromerovargas.com/kio42.png'><br>");
client.println("<a href='on5'><button>Enciende LED5</button></a>"); // NECESARIA
client.println("<a href='off5'><button>Apaga LED5</button></a>"); // NECESARIA
client.println("<br><br>"); // NECESARIA
client.println(estado); // NECESARIA
client.println("</font></center></body></html>");
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
_________________________________
- Comentarios.
- Si no te funciona el código anterior, prueba anular las dos últimas líneas de flush() y stop()
// client.flush();
// client.stop();
- El Chrome pide el favicon dos veces, por eso salen dos conexiones. El FireFox solo lo pide una vez.
_________________________________
_________________________________
_________________________________
_________________________________
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='on5'><button>Enciende LED5</button></a>");
client.println("<a href='off5'><button>Apaga LED5</button></a>");
client.println("<a href='consulta'><button>Ver estado</button></a>");
- Y luego...
// Realiza la petición del cliente.
if (req.indexOf("on5") != -1) {digitalWrite(LED5, HIGH); estado = "Encendido";}
if (req.indexOf("off5") != -1){digitalWrite(LED5, LOW); estado = "Apagado";}
if (req.indexOf("consulta") != -1){
if (digitalRead(LED5)){estado = "Encendido";}
else {estado = "Apagado";}
}
webserver_botones_led_consulta.ino |
// Juan A. Villalpando.
// KIO4.COM
// Enciende y apaga LED. Botones.
#include <ESP8266WiFi.h>
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
WiFiServer server(80);
#define LED5 D5 // LED en terminal D5
String estado = "";
void setup() {
Serial.begin(115200);
pinMode(LED5, 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("on5") != -1) {digitalWrite(LED5, HIGH); estado = "Encendido";}
if (req.indexOf("off5") != -1){digitalWrite(LED5, LOW); estado = "Apagado";}
if (req.indexOf("consulta") != -1){
if (digitalRead(LED5)){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("<img src='http://iesromerovargas.com/kio42.png'><br>");
client.println("<a href='on5'><button>Enciende LED5</button></a>");
client.println("<a href='off5'><button>Apaga LED5</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()
_________________________________
3.- Reducción del código.
1.- Reducir el código HTML para que la página cargue más rápidamente:
webserver_botones_led_consulta_2.ino |
// Juan A. Villalpando.
// KIO4.COM
// Enciende y apaga LED. Botones.
#include <ESP8266WiFi.h>
const char* ssid = "Nombre_de_tu_Red_WiFi";
const char* password = "Clave_WiFi";
WiFiServer server(80);
#define LED5 D5 // LED en terminal D5
String estado = "";
void setup() {
Serial.begin(115200);
pinMode(LED5, 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("on5") != -1) {digitalWrite(LED5, HIGH); estado = "Encendido";}
if (req.indexOf("off5") != -1){digitalWrite(LED5, LOW); estado = "Apagado";}
if (req.indexOf("consulta") != -1){
if (digitalRead(LED5)){estado = "Ahora Encendido";}
else {estado = "Ahora Apagado";}
}
//////////////////////////////////////////////
// Página WEB. ////////////////////////////
client.println("<a href='on5'><button>Enciende LED5</button></a>");
client.println("<a href='off5'><button>Apaga LED5</button></a>");
client.println("<a href='consulta'><button>Ver estado</button></a>");
client.println("<br><br>");
client.println(estado);
Serial.print("Cliente desconectado: ");
Serial.println(client.remoteIP());
client.flush();
client.stop();
}
|
____________________________________
- Propuestas.
1.- Conecta otro LED en otro terminal y cuando pulse los Botones se enciendan y apagen los dos.
2.- Conecta dos LED y pon cuatro Botones, dos botones encienden y apagan un LED y los otros dos el otro LED.
_______________________________
|
