Interruptores más hermosos para nuestro ESP relé de servidor de Web el proyecto

Hallo y de todo corazón bienvenido a nuestra Blog contribución de hoy en la cual continuamos el tema Servidor de Web en ESP.

Algunos lectores aplicados han anunciado las insignias del nuestro a se a nosotros que han intentado contribución precedente integrar al servidor de Web ESP en su código. Por desgracia sin éxito.

Para alguien él ha precisamente empezado a ocuparse de la programación de microcontrolleres, y pocos hasta ninguna experiencia con el HTML tiene, y luego es colmado además todavía del CSS código, todo es también muy turbador.

Si luego todavía todos son combinados tres en un documento textual, esto se pone también muy rápidamente complejo.

No atierre ello sin embargo. Hoy le señalo como el código que funciona con las insignias hermosas tiene aspecto. Con esto he renunciado conscientemente a mantener el código por compacto, para que él deba ser leído un poco mejor.

Sin embargo ellos mirarán rápidamente como demasiado caro el código de manantial puede hacerse, aunque queramos cambiar sólo el aspecto de 2 insignias en el resultado final.

Hoy nuestra meta es el cambio siguiente:

Aquí en la comparación ambos los sketches:

Cómo usted puede reconocer fácilmente, sólo la organización de las insignias mediante CSS toma una gran parte en la chapa. Los máximos lectores habían dominado sin embargo esta parte.

Luego como difícil la parte a las insignias se mostraba la funcionalidad da. Éste no era implementado, o sea, en el código de HTML en el lado de ejemplo para las insignias.
Esto es probable en las máximas presentaciones y los ejemplos usted a las insignias y los otros elementos por la red encontrarán. Por eso, pueden cambiar de sitio una explicación corta como usted ello mediante nuestro código original. Hay que a la meta como siempre muchas soluciones llevan, y de mí mostrara no corresponde con seguridad de los más elegantes más fáciles o.

Las insignias hemos usado hasta ahora miran si reduce sólo a la insignia, como HTML el código como sigue de:

<a href="/es/5 / on "><button class = "la insignia" >EIN</button></a>

En el ejemplo enhttp://jsfiddle.net/tovic/ve8mU/light/si el código está como HTML para una insignia:

<span class = "toggle" >
 <input type = "el box de cheque" > 
 <label data-off = "la parada" data-on = "Play" ></label>
</span>

No hay la posibilidad mediante <a> el día definir un enlace porque lo todo es un box de cheque, y éste en un clic, si bien, él correspondía cambia, pero con el servidor no comunica. Esto está en ello que estos campos de selección por lo general para formularios son usados en los cuales uno llena un formulario, y al fin por un clic en una insignia (p. ej., "Submit") envía al servidor.

Para que enseguida haciendo clic algo pase, tenemos que usar onclick ='window.location.assign ()', y entre las pinzas URL ellos sacan debe ser llamado:

<span class = \"toggle \">
<input type = \"el box de cheque \" onclick ='window.location.assign (\"/4/EIN \")'>
<label data-off = \"DE \" data-on = \"\"></label>
</span>

Y en caso de que la insignia en UNO está:

<span class = \"toggle \">
<input type = \"el box de cheque \" onclick ='window.location.assign (\"/4/AUS \")' checked>  <label data-off = \"DE \" data-on = \"\"></label>
</span>

En el segundo apostamos <input> objeto todavía en "checked".

Luego el código completo, revisado tiene aspecto así:

/*********
 Rui Santos
 Complete project detalles at http://randomnerdtutorials.com  
*********/

//Nos cargamos WiFi ya famosos la biblioteca
#include <ESP8266WiFi.h>

//Aquí damos el nombre WLAN (SSID) y Zugansschlüssel
const char* ssid     = "IhrWLANName";
const char* Word de puerto = "IhrWLANSchlüssel";

//Ponemos el servidor de Web al puerto 80
WiFiServer servidor(80);

Variable para almacenar la solicitud HTTP
Cadena Rúbrica;

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

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 ON");               output5State = "ON";               digitalWrite(output5, Alto);             } Más Si (Rúbrica.Indexof("GET /5/OFF") >= 0) {               Serial.println("GPIO 5 OFF");               output5State = "Off";               digitalWrite(output5, Bajo);             } Más Si (Rúbrica.Indexof("GET /4/ON") >= 0) {               Serial.println("GPIO 4 ON");               output4State = "ON";               digitalWrite(output4, Alto);             } Más Si (Rúbrica.Indexof("GET /4/OFF") >= 0) {               Serial.println("GPIO 4 OFF");               output4State = "Off";               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"> <title>Amica WebServer</title>");             Cliente.println("<link rel-"icon"" href-"data:,">");                          Siga el código CSS para diseñar los botones de encendido/apagado                          Cliente.println("<estilo> cuerpo");             Cliente.println(" font-family:Helvetica;");             Cliente.println(" color de fondo:#eee;");             Cliente.println(" alineación de texto:centro;");             Cliente.println(" relleno: 85px 0;");             Cliente.println("}");             Cliente.println("");             Cliente.println(".alternar");             Cliente.println(" posición:relativa;");             Cliente.println(" display:inline-block;");             Cliente.println(" ancho: 80px;");             Cliente.println(" altura:120px;");             Cliente.println(" color de fondo:#bbb;");             Cliente.println(" -webkit-border-radius:4px;");             Cliente.println(" -moz-border-radius:4px;");             Cliente.println(" radio fronterizo:4px;");             Cliente.Println("alineación de texto:centro;");             Cliente.Println("}");             Cliente.Println("");             Cliente.Println(".alternar la entrada ");             Cliente.Println("ancho: 100%;");             Cliente.Println("Altura: 100%;");             Cliente.Println(" margen:0 0;");             Cliente.Println(" relleno:0 0;");             Cliente.Println("posición:absoluta;");             Cliente.Println("top:0;");             Cliente.Println("derecha:0;");             Cliente.Println("abajo:0;");             Cliente.Println("izquierda:0;");             Cliente.Println("índice z:2;");             Cliente.Println("cursor:puntero;");             Cliente.Println("opacidad:0;");             Cliente.Println("filtro:alfa (opacidad -0);");             Cliente.Println("}");             Cliente.Println("");             Cliente.Println(".alternar etiqueta ");             Cliente.Println("display:block;");             Cliente.Println("posición:absoluta;");             Cliente.Println("top:1px;");             Cliente.Println("derecha:1px;");             Cliente.Println("abajo: 1px;");             Cliente.Println("izquierda:1px;");             Cliente.Println(" imagen de fondo:-webkit-lineal-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Cliente.Println(" background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff50%,#eee 100%);");             Cliente.Println(" imagen de fondo:-ms-lineal-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Cliente.Println(" background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Cliente.Println(" imagen de fondo: degradado lineal (superior, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);");             Cliente.Println(" -webkit-box-shadow:0 2px 3px rgba (0,0,0,0.4),");             Cliente.Println("inset 0 -1px 1px #888,");             Cliente.Println("inset 0 -5px 1px #bbb,");             Cliente.Println(" inserción 0 -6px 0 blanco;");             Cliente.Println(" -moz-box-shadow:0 2px 3px rgba (0,0,0,0.4),");             Cliente.Println("inset 0 -1px 1px #888,");             Cliente.Println("inset 0 -5px 1px #bbb,");             Cliente.Println(" inserción 0 -6px 0 blanco;");             Cliente.Println(" sombra de caja:0 2px 3px rgba (0,0,0,0.4),");             Cliente.Println("inset 0 -1px 1px #888,");             Cliente.Println("inset 0 -5px 1px #bbb,");             Cliente.Println(" inserción 0 -6px 0 blanco;");             Cliente.Println(" -webkit-border-radius:3px;");             Cliente.Println("moz-border-radius:3px;");             Cliente.Println("border-radius:3px;");             Cliente.Println("font:normal 11px Arial,Sans-Serif;");             Cliente.Println("color:#666;");             Cliente.Println(" text-shadow:0 1px 0 blanco;");             Cliente.Println("cursor:texto;");             Cliente.Println("}");             Cliente.Println("");             Cliente.Println(".alternar etiqueta: antes de");             Cliente.Println("content:attr(data-off);");             Cliente.Println("posición:absoluta;");             Cliente.Println("top:6px;");             Cliente.Println("derecha:0;");             Cliente.Println("izquierda:0;");             Cliente.Println("índice z:4;");             Cliente.Println("}");             Cliente.Println("");             Cliente.Println(".alternar etiqueta: después de ");             Cliente.Println("content:attr(data-on);");             Cliente.Println("posición:absoluta;");             Cliente.Println("derecha:0;");             Cliente.Println("abajo: 11px;");             Cliente.Println("izquierda:0;");             Cliente.Println("color:#666;");             Cliente.Println("text-shadow:0 -1px 0 #eee;");             Cliente.Println("}");             Cliente.Println("");             Cliente.Println(".alternar entrada:marcado + etiqueta ");             Cliente.Println(" imagen de fondo:-webkit-lineal-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Cliente.Println(" background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Cliente.Println(" imagen de fondo:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Cliente.Println(" background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Cliente.Println(" imagen de fondo: degradado lineal (superior, #eee 0%, #ccc 50%, #fff 50%, #eee 100%);");             Cliente.Println(" -webkit-box-shadow:0 0 1px rgba (0,0,0,0.4),");             Cliente.println(" inserción 0 1px 7px -1px #ccc,");             Cliente.println(" inserción 0 5px 1px #fafafa,");             Cliente.println(" inserción 0 6px 0 blanco;");             Cliente.println(" -moz-box-shadow:0 0 1px rgba(0,0,0,0.4),");             Cliente.println(" inserción 0 1px 7px -1px #ccc,");             Cliente.println(" inserción 0 5px 1px #fafafa,");             Cliente.println(" inserción 0 6px 0 blanco;");             Cliente.println(" sombra de caja:0 0 1px rgba(0,0,0,0.4),");             Cliente.println(" inserción 0 1px 7px -1px #ccc,");             Cliente.println(" inserción 0 5px 1px #fafafa,");             Cliente.println(" inserción 0 6px 0 blanco;");             Cliente.println("}");             Cliente.println("");             Cliente.println(".toggle input:checked:hover + label ");             Cliente.println(" -webkit-box-shadow:0 1px 3px rgba (0,0,0,0.4),");             Cliente.println(" inserción 0 1px 7px -1px #ccc,");             Cliente.println(" inserción 0 5px 1px #fafafa,");             Cliente.println(" inserción 0 6px 0 blanco;");             Cliente.println(" -moz-box-shadow:0 1px 3px rgba (0,0,0,0.4),");             Cliente.println(" inserción 0 1px 7px -1px #ccc,");             Cliente.println(" inserción 0 5px 1px #fafafa,");             Cliente.println(" inserción 0 6px 0 blanco;");             Cliente.println(" sombra de caja:0 1px 3px rgba (0,0,0,0.4),");             Cliente.println(" inserción 0 1px 7px -1px #ccc,");             Cliente.println(" inserción 0 5px 1px #fafafa,");             Cliente.println(" inserción 0 6px 0 blanco;");             Cliente.println("}");             Cliente.println("");             Cliente.println(".toggle input:checked + label:before ");             Cliente.println(" z-index:1;");             Cliente.println(" top:11px;");             Cliente.println("}");             Cliente.println("");             Cliente.println(".toggle input:checked + label:after ");             Cliente.println(" inferior:9px;");             Cliente.println(" color:#aaa;");             Cliente.println(" text-shadow:none;");             Cliente.println(" z-index:4;");             Cliente.println("}");             Cliente.println("</style></head>");                                      Encabezado del sitio web             Cliente.println("<body><h1>ESP8266 Web Server</h1>");                                                       Mostrar el estado actual y los botones ON/OFF para GPIO 5               Cliente.println("<p>Garaje ligero: " + output5State + "</p>");             si output5State - OFF, muestre el botón ON                    Si (output5State=="Off") {               Cliente.println("<p><span class>"alternar"><tipo de entrada'"checkbox" onclick''window.location.assign('/5/EIN")'><data-off'""OFF" data-on'"On"></label></_span);             } Más {               Cliente.println("<p><span class>"toggle"><input type''"checkbox"" onclick''window.location.assign('/5/OFF)' checked><label data-off-""OFF" data-on-""On"><label></span<<<<);             }                             Lo mismo para GPIO 4             Cliente.println("<p>Bodega ligera: " + output4State + "</p>");             Si output4State está desactivado, muestre el botón ON                    Si (output4State=="Off") {               Cliente.println("<p><span class>"alternar"><tipo de entrada'"checkbox"" onclick''window.location.assign('/4/EIN)'><data-off'""OFF" data-on'"On"></label></_span);             } Más {               Cliente.println("<p><span class>"toggle"><input type''"checkbox"" onclick''window.location.assign('/4/OFF)' checked><label data-off-""OFF" data-on-""On"><label></span<<<<);             }             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("");   }
}

Ahora una pregunta sigue sin respuesta: ¿por qué usamos /4/EIN o /5/AUS en nuestro código para cambiar los GDO?

De esta manera, es posible que coloquemos un relé deseado en el estado deseado en un navegador introduciendo la IP seguida de /"Pin number"/"Status".

Pero la solicitud no necesariamente tiene que venir de un navegador web. Si usted tiene otro dispositivo en su red inalámbrica (WLAN), tal como otro ESP, podría conmutar el relé deseado con una petición HTTP simple. Puede conectar un interruptor de luz a este segundo ESP. O un detector de movimiento. 

O podría escribir una APP para su teléfono inteligente, con botones que no hacen nada más que llamar a la URL deseada. 

Por supuesto, no debo dejar la cuestión de la seguridad sin mencionar en este momento.

El servidor ESP es accesible para cada suscriptor en su red Wi-Fi, y no hay ninguna consulta de seguridad. Así que todo es tan seguro como su Wi-Fi. Si le das a tus amigos o familiares su clave, o tu router Wi-Fi está mal configurado, o tiene una vulnerabilidad de seguridad, en teoría cualquiera puede cambiar los relés.

Para un interruptor de luz o algo así, este no debería ser el gran problema, pero antes de empezar a controlar las cerraduras de las puertas y puertas de garaje, recomiendo encarecidamente mirar el tema de la seguridad de la red.

Espero que les haya gustado la contribución de hoy y señaló que, con un poco de intuición, no es tan complicado incluir el PEB en sus proyectos, aunque la implementación parezca muy complicada al principio.

Me despido hasta la próxima contribución, y estoy encantado con los elogios y las críticas.

Tuyo Markus Neumann