Botones HTML para el servidor web ESP

Hola y bienvenidos a nuestra contribución de hoy.

Después de ayer se trataba de HTML y corchetes, hoy queremos ver lo que se puede implementar con un poco de HTML y un pequeño script.

Para ello necesitamos los siguientes componentes:

Un microcontrolador con un chip ESP8266 como el Amica V2
Un módulo de relé como nuestro Módulo de 2 relés
Un Módulo de aceleración DC-DC, ya que el Amica sólo entrega 3.3V, pero nuestro relé requiere 5V
Una tabla de pan con cable de puente, como nuestra popular Establecer

Por supuesto, también puede suministrar el módulo de relé directamente con un 5V, y guardar el módulo de paso a paso. Esto tiene más sentido para un proyecto terminado en una vivienda, ya que el Amica también se puede suministrar con la misma fuente de alimentación.

Cómo usar y configurar el módulo de paso a paso que ya tenemos en nuestra entrada de blog "MT3608 Regulador de voltaje DC-DC step-up" descrito.

Conectamos los componentes de la siguiente manera:

El último post discutió cómo conectamos el ESP a una red Wi-Fi existente, y cómo respondemos a una solicitud del navegador, incluida la salida de un pequeño archivo HTML.

Mencioné en algunas etiquetas HTML que estas ya que HTML5 ya no deberían utilizarse. En los sitios web modernos, el diseño se realiza a menudo por medio de hojas de estilo en cascada (CSS).

Antes de que todo el mundo se escape con el temor de que un curso CSS está llegando, cabe mencionar que es posible diseñar hermosos botones, textos, deslizadores y formularios usando CSS.

Si buscas "botones css" en la búsqueda de imágenes de Google, aparecerán algunos ejemplos.

Ahora se trata de la implementación - ¿qué código cargamos a nuestro ESP?

Como base, tomamos el código del tutorial de https://randomnerdtutorials.com/esp8266-web-server/y ajustar el código:

/*********
 Rui Santos
 Detalles completos del proyecto en http://randomnerdtutorials.com  
*********/

Descargamos la biblioteca WiFi ya conocida por nosotros
#include <ESP8266WiFi.H>

Aquí ingresamos el nombre WLAN (SSID) y la clave zugans
Const Char* Ssid     = "MyFritzBox";
Const Char* Contraseña = "MyWIWlanKey";

Establecemos el servidor web en el puerto 80
WiFiServer Servidor(80);

Variable para almacenar la solicitud HTTP
Cadena Rúbrica;

Aquí se registra el estado actual del relé
Cadena output5State = "Muy buena";
Cadena output4State = "Muy buena";

Los pines gPIO utilizados
D1 - GPIO5 y D2 - GPIO4 - sólo tiene que buscar en google "Amica Pinout"  
Const Int output5 = 5;
Const Int output4 = 4;

Vacío Configuración() {   Serial.Comenzar(115200);   Defina los pines GPIO definidos como salida ...   pinMode(output5, Salida);   pinMode(output4, Salida);   // ... y el primer set a LOW   digitalWrite(output5, Bajo);   digitalWrite(output4, Bajo);   Conéctese a la red a través de Wi-Fi   Serial.Impresión("Conectarse a");   Serial.println(Ssid);   Wifi.Comenzar(Ssid, Contraseña);   Mientras (Wifi.Estado() != WL_CONNECTED) {     Retraso(500);     Serial.Impresión(".");   }   Salida de la IP desde el servidor web al monitor serie   Serial.println("");   Serial.println("Wi-Fi conectado.");   Serial.println("Dirección IP: ");   Serial.println(Wifi.localIP());   Servidor.Comenzar();
}

Vacío Bucle(){   WiFiClient Cliente = Servidor.Disponible();   Escucha las solicitudes de los clientes   Si (Cliente) {                             Si un nuevo cliente se conecta,     Serial.println("Nuevo cliente.");          Salida al monitor serie     Cadena currentLine = "";                crear una cadena con los datos entrantes del cliente     Mientras (Cliente.Conectado()) {            repetir mientras el cliente esté conectado       Si (Cliente.Disponible()) {             Caso un byte para la lectura está ahí,         Char C = Cliente.Leer();             leer el byte, y luego         Serial.Escribir(C);                    en el monitor serie.         Rúbrica += C;         Si (C == 'n') {                    si el byte es una nueva línea Char           si la línea actual está vacía, 2 entraron en secuencia.           este es el final de la solicitud HTTP del cliente, por lo que enviaremos una respuesta:           Si (currentLine.Longitud() == 0) {             Los encabezados HTTP siempre comienzan con un código de respuesta (por ejemplo, HTTP/1.1 200 OK)             seguido del tipo de contenido para que el cliente sepa lo que sigue, seguido de una línea en blanco:             Cliente.println("HTTP/1.1 200 OK");             Cliente.println("Content-type:text/html");             Cliente.println("Conexión: cerrar");             Cliente.println();                          Aquí los pines GPIO están encendidos o apagados             Si (Rúbrica.Indexof("GET /5/on") >= 0) {               Serial.println("GPIO 5 encendido");               output5State = "en";               digitalWrite(output5, Alto);             } Más Si (Rúbrica.Indexof("GET /5/off") >= 0) {               Serial.println("GPIO 5 apagado");               output5State = "Muy buena";               digitalWrite(output5, Bajo);             } Más Si (Rúbrica.Indexof("GET /4/on") >= 0) {               Serial.println("GPIO 4 en");               output4State = "en";               digitalWrite(output4, Alto);             } Más Si (Rúbrica.Indexof("GET /4/off") >= 0) {               Serial.println("GPIO 4 apagado");               output4State = "Muy buena";               digitalWrite(output4, Bajo);             }                          La página HTML ahora se muestra aquí:             Cliente.println("<! DOCTYPE html><html>");             Cliente.println("<head><meta name>"viewport"" content-"width-device-width, initial-scale-1">");             Cliente.println("<link rel-"icon"" href-"data:,">");             Siga el código CSS para diseñar los botones de encendido/apagado             Aquí puede ajustar el color de fondo (color de fondo) y el tamaño de fuente (tamaño de fuente)             Cliente.println("<style>html - font-family: Helvetica; pantalla: bloque en línea; margen: 0px auto; alineación de texto: centro;");             Cliente.println(".button - color de fondo: #333344; frontera: ninguno; color: blanco; acolchado: 16px 40px;");             Cliente.println("decoración de texto: ninguno; tamaño de fuente: 30px; margen: 2px; cursor: puntero;");             Cliente.println(".button2 "color de fondo: #888899; </estilo></head>");                          Encabezado del sitio web             Cliente.println("<body><h1>ESP8266 Web Server</h1>");                          Mostrar el estado actual y los botones AN/OFF para GPIO 5               Cliente.println("<p>GPIO 5 - Estado" + output5State + "</p>");             si output5State a apagado, muestre el botón ON                    Si (output5State=="Muy buena") {               Cliente.println("<p><a href-"/5/on"><button class>"on</button></a></p>");             } Más {               Cliente.println("<p><a href-"/5/off"><botón de la clase""botón 2">OFF</button></a></p>");             }                              Lo mismo para GPIO 4             Cliente.println("<p>GPIO 4 - Estado" + output4State + "</p>");             Si output4State está desactivado, muestre el botón ON                    Si (output4State=="Muy buena") {               Cliente.println("<p><a href-"/4/on"><button class>"on</button></a></p>");             } Más {               Cliente.println("<p><a href-"/4/off"><botón de la clase""botón 2">OFF</button></a></p>");             }             Cliente.println("</body></html>");                          La respuesta HTTP termina con una línea en blanco             Cliente.println();             y dejamos el bucle con un descanso             Romper;           } Más { si llega una nueva fila, elimine la fila actual             currentLine = "";           }         } Más Si (C != 'A'r') {  si viene algo que no es un salto de línea,           currentLine += C;      adjuntarlo al final de currentLine         }       }     }     Elimine la variable de encabezado para el siguiente paso     Rúbrica = "";     Cierre de la conexión     Cliente.Parada();     Serial.println("Cliente desconectado.");     Serial.println("");   }
}

Cargamos el código en nuestra Amica y abrimos el Monitor serie en el IDE de Arduino:

A continuación, ingresamos la dirección IP del servidor en el navegador, por ejemplo, en el teléfono móvil. (Atención, el PC o smartphone debe estar conectado a la misma red que el ESP).

Ahora podemos cambiar fácilmente los relés desde el smartphone (o PC).

Y si miras alrededor de Internet, también puedes encontrar botones más bonitos, como estos:

El código HTML y el código CSS para estos botones están disponibles en http://jsfiddle.net/tovic/ve8mU/light/

Espero que este artículo le haya dado una idea de las posibilidades del servidor web ESP.

Si te gustó este post, me complacería recibir una breve retroalimentación. Simplemente escríbanos si estaría interesado en el tema SVG para mostrar barras y pequeños gráficos vectoriales con el servidor web ESP.

Les deseo mucha diversión recreando y decir adiós al siguiente artículo.