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:

Amica V2

MT3608

Relais

3V3

IN+

 

Gnd

IN-

 

 

OUT+

Vcc

 

OUT-

Gnd

D1

 

IN1

D2

 

IN2

 

 

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.

 

Precipitador electrostático - 8266Projekte für fortgeschrittene

8 comentarios

Phil Phras

Phil Phras

Ich bin bei der IdeenSuche für eins meiner Projekte auf diesen Blog gestoßen und bin begeistert!
Ich habe auch in anderen Blogs hier gestöbert und möchte ein großes Lob aussprechen.

Hier werde ich StammLeser :-) Und wenn ich mal wieder eins meiner Projekte veröffentliche geb ich auf jeden Fall diese Seite hier an als Ideen- und CodeQuelle an.

Vielen Dank

georg

georg

hallo,
das thema ist inzwischen recht alt :-( , für mich aber noch aktuell…
habe versucht den code mit einem asyncwebserver zu kombinieren (die verwendung dieser art des webservers lässt sich aus anderen gründen nicht mehr ändern) – beim compileren wurde die kombination unter anderem mit – ‘class AsyncWebServer’ has no member named ‘available’ – quitiert…
Was kann ich da machen?
gruss

Thmas Nimpsch

Thmas Nimpsch

Hallo ,
Vielen Dank für dieses Beispiel, genau danach hab ich gesucht.
Gruß
Thomas Nimpsch

N1d45

N1d45

Schalter die sich automatisch aktualisieren währen nicht schlecht.

Sprich wenn ich von mehreren Geräten auf die Webseite zugreife. Zum Beispiel schalte ich mit dem Smartphone Kanal 1 ein, wird auf dem PC automatisch angezeigt das der Schalter 1 auch ein ist.

Oder das wenn ich per Taster Kanal 1 ein schalte, das auch auf der Webseite automatisch angezeigt wird das der Kanal 1 eingeschaltet ist.

Bisher muss man immer die Webseite neuladen, z.B. mit F5 um das aktuelle Ergebniss zu sehen.

Tobî

Tobî

an Herbert.

Versuche doch den Taster mal mit einem Interrupt aus.
Ich hoffe ich darf hier einen Link posten, wenn nicht:
Herbert suche mal auf deiner Suchmaschine deines Vertrauens nach: ESP8266 External Interrupt.

https://techtutorialsx.com/2016/12/11/esp8266-external-interrupts/

Herbert

Herbert

Toller Beitrag, soweit funktioniert auch alles.
Mein Problem ist das ich zusätzlich noch einen Hardware Taster einbauen wollte.
Der aber nicht funktioniert wenn der Client mit dem ESP8266 verbunden ist.
Ich vermute das Problem ist die while (client.connected() funktion. Die verhindert das auf die Tastereingabe parrallel zur Verbindung eines Client funktioniert.

Gibt es dafür eine Lösung? Und warum benötigt man eigentlich die while?

Chris

Chris

Hallo Markus,
wäre es möglich noch einen Slider zu integrieren, mit Bsp. Sketch?
LG

K. Dobler

K. Dobler

Hallo Markus,
dein Beispiel hat mir sehr geholfen.
Mit ihm habe ich des geschafft mein Garagentor vom Handy aus zu steuern.
Jetzt geht es nur noch um kleine Anpassungen und Verschönerungen.

Vielen Dank
Kurt Dobler

Deja un comentario

Todos los comentarios son moderados antes de ser publicados

Artículos de blog

  1. Ahora instalamos el esp32 a través de la administración.
  2. Lüftersteuerung Raspberry Pi
  3. Arduino IDE - Programmieren für Einsteiger - Teil 1
  4. ESP32 - das Multitalent
  5. Transporte Aéreo - programación de ESP mediante redes locales inalámbricas