Opzioni Nicer per il nostro progetto di relè di server web ESP

Salve e benvenuti al nostro post sul blog di oggi, dove continuiamo l'argomento dei server web sull'ESP.

Abbiamo avuto alcuni lettori laboriosi che hanno provato i pulsanti dal nostro post precedente al server Web ESP nel loro codice. Purtroppo, inutilmente.

Per qualcuno che ha appena iniziato a programmare microcontrollori e ha poca o nessuna esperienza con HTML, ed è poi anche doccia con codice CSS, è tutto molto confuso.

Quando tutti e tre sono combinati in un unico documento di testo, diventa rapidamente confuso.

Ma non scoraggiatevi. Vi mostrerò oggi che cosa il codice di lavoro con i bellissimi pulsanti assomiglia. Ho deliberatamente astenuto dal mantenere il codice compatto in modo che potesse essere letto un po 'meglio.

Tuttavia, si vedrà rapidamente come elaborato il codice sorgente può diventare, anche se vogliamo solo modificare l'aspetto di 2 pulsanti alla fine.

Quindi il nostro obiettivo oggi è quello di cambiarlo:

Qui per confrontare i due schizzi:

Come si può facilmente vedere, la progettazione dei pulsanti utilizzando CSS da solo prende una gran parte del raccordo. Tuttavia, la maggior parte dei lettori aveva imparato questa parte.

La parte dei pulsanti che dà la funzionalità si è rivelata difficile. Questo non è stato implementato nel codice HTML nella pagina di esempio per i pulsanti.
Questo è probabilmente con la maggior parte dei modelli e degli esempi che troverete per i pulsanti e altri elementi in rete. Quindi una breve spiegazione di come farlo utilizzando il nostro codice originale. Come sempre, ci sono molte soluzioni che portano all'obiettivo, e quella che ho mostrato non è certamente la più semplice o più elegante.

I pulsanti che abbiamo usato finora possono vedere se solo ridotto al pulsante, come codice HTML come segue:

<a href>/5/on"><classe pulsante>"pulsante">ON</button></a>

Nell'esempio su http://jsfiddle.net/tovic/ve8mU/light/è il codice HTML per un pulsante:

<span class>"attiva/disattiva">
<tipo di input:"casella di controllo"> 
<etichetta dati-off:"Stop" data-on-"Play"></label>
</span>

Pertanto non è possibile definire un collegamento utilizzando il tag <a>, perché l'intero è una casella di controllo e modifica lo stato con un clic, ma non comunica con il server. Questo perché queste caselle di selezione vengono in genere utilizzate per i moduli in cui si compila un modulo e si termina facendo clic su un pulsante (ad esempio "Invia") al server.

Affinché qualcosa accada immediatamente quando si fa clic, è necessario utilizzare onclick ''window.location.assign()' e specificare tra parentesi l'URL da chiamare:

<span class>"attiva/disattiva">
<tipo di input:"checkbox" onclick-'window.location.assign('/4/EIN')'>
<etichetta data-off-off-"OFF" data-on "ON"></label>
</span>

E nel caso in cui il pulsante è su "ON":

<span class>"attiva/disattiva">
<input type-"checkbox" onclick>'window.location.assign("/4/OFF")" selezionato<label data-off'"OFF" data-on:"ON"></label>
</span>

Nel secondo, abbiamo ancora impostato l'oggetto <input> su "checked".

Il codice completo e rivisto sarà simile al seguente:The complete, revised code will look like this:

/*********
 Rui Santos
 Completare i dettagli del progetto all'all'ora http://randomnerdtutorials.com  
*********/

Scaricamo la libreria WiFi già nota a noi
#include <ESP8266WiFi.H>

Qui inseriamo il nome WLAN (SSID) e il tasto zugans
Const Char* Ssid     = "NomeAN-UTENTE";
Const Char* Password = "Il tuo WLANKey";

Il server Web è impostato sulla porta 80
Server WiFi Server(80);

Una variabile per archiviare la richiesta HTTP
Stringa Intestazione;

Qui viene registrato lo stato attuale del relè
Stringa output5State = "OFF";
Stringa output4State = "OFF";

I perni gPIO utilizzati
D1 - GPIO5 e D2 - GPIO4 - basta cercare su google "Amica Pinout"  
Const Int output5 = 5;
Const Int output4 = 4;

Vuoto Installazione() {   Seriale.Iniziare(115200);   Definire i pin GPIO definiti come output ...   PinMode (Modalità pin)(output5, Output);   PinMode (Modalità pin)(output4, Output);   // ... e prima impostato su LOW   digitalWrite (Scrittura digitale)(output5, Basso);   digitalWrite (Scrittura digitale)(output4, Basso);   Connettersi alla rete tramite Wi-Fi   Seriale.Stampare("Connessione a");   Seriale.println(Ssid);   Wifi.Iniziare(Ssid, Password);   Mentre (Wifi.Stato() != WL_CONNECTED) {     Ritardo(500);     Seriale.Stampare(".");   }   Output dell'IP dal server Web al monitor seriale   Seriale.println("");   Seriale.println("Wi-Fi connesso.");   Seriale.println("Indirizzo IP: ");   Seriale.println(Wifi.localIP (informazioni in locale)());   Server.Iniziare();
}

Vuoto Ciclo(){   WiFiClient (Client WiFi) Client = Server.Disponibile();   Ascolta le richieste dei clienti   Se (Client) {                             Se un nuovo client si connette,     Seriale.println("Nuovo cliente".);          Uscita sul monitor seriale     Stringa riga corrente = "";                creare una stringa con i dati in ingresso dal client     Mentre (Client.Collegato()) {            ripetere fino a quando il client è connesso       Se (Client.Disponibile()) {             Caso un byte per la lettura è lì,         Char C = Client.Leggere();             leggere il byte, e poi         Seriale.Scrivere(C);                    sul monitor seriale.         Intestazione += C;         Se (C == 'n') {                    se il byte è una nuova riga Char           se la riga corrente è vuota, 2 è venuto in sequenza.           questa è la fine della richiesta HTTP dal client, quindi invieremo una risposta:           Se (riga corrente.Lunghezza() == 0) {             Le intestazioni HTTP iniziano sempre con un codice di risposta (ad esempio HTTP/1.1 200 OK)             seguito dal tipo di contenuto in modo che il client sappia cosa segue, seguito da una riga vuota:             Client.println("HTTP/1.1 200 OK");             Client.println("Tipo di contenuto:testo/html");             Client.println("Connessione: chiudi");             Client.println();                          Qui i pin GPIO sono accesi o spenti             Se (Intestazione.Indice di("GET /5/ON") >= 0) {               Seriale.println("GPIO 5 ON");               output5State = "ON";               digitalWrite (Scrittura digitale)(output5, alto);             } Altro Se (Intestazione.Indice di("GET /5/OFF") >= 0) {               Seriale.println("GPIO 5 OFF");               output5State = "OFF";               digitalWrite (Scrittura digitale)(output5, Basso);             } Altro Se (Intestazione.Indice di("GET /4/ON") >= 0) {               Seriale.println("GPIO 4 ON");               output4State = "ON";               digitalWrite (Scrittura digitale)(output4, alto);             } Altro Se (Intestazione.Indice di("GET /4/OFF") >= 0) {               Seriale.println("GPIO 4 OFF");               output4State = "OFF";               digitalWrite (Scrittura digitale)(output4, Basso);             }                          La pagina HTML viene ora visualizzata qui:             Client.println("<! DOCTYPE html><html>");             Client.println("<head><meta name<meta name<"viewport"" content<width-device-width, initial-scale> <title>Amica WebServer</title>");             Client.println("<link rel"icona"" href "data:,">");                          Seguire il codice CSS per progettare i pulsanti di attivazione/disattivazione                          Client.println("<stile> corpo");             Client.println(" font-family:Helvetica;");             Client.println(" background-color:#eee;");             Client.println(" text-align:center;");             Client.println(" imbottitura:85px 0;");             Client.println("}");             Client.println("");             Client.println(".toggle");             Client.println(" posizione:relativo;");             Client.println(" display:inline-block;");             Client.println(" width:80px;");             Client.println(" altezza:120px;");             Client.println(" background-color:#bbb;");             Client.println(" -webkit-border-radius:4px;");             Client.println(" -moz-border-radius:4px;");             Client.println(" border-radius:4px;");             Client.Println("text-align:center;");             Client.Println("}");             Client.Println("");             Client.Println(".toggle input");             Client.Println("larghezza:100%;");             Client.Println("Altezza:100%;");             Client.Println(" margine:0 0;");             Client.Println(" imbottitura:0 0;");             Client.Println("posizione:assoluta;");             Client.Println("top:0;");             Client.Println("a destra:0;");             Client.Println("in basso:0;");             Client.Println("sinistra:0;");             Client.Println("z-index:2;");             Client.Println("cursore:puntatore;");             Client.Println("opacità:0;");             Client.Println("filtro:alfa(opacità-0);");             Client.Println("}");             Client.Println("");             Client.Println(".toggle label");             Client.Println("display:blocco;");             Client.Println("posizione:assoluta;");             Client.Println("top:1px;");             Client.Println("a destra:1px;");             Client.Println("in basso:1px;");             Client.Println("sinistra:1px;");             Client.Println(" background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Client.Println(" background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff50%,#eee 100%);");             Client.Println(" background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Client.Println(" background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Client.Println(" background-image:linear-gradient (top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);");             Client.Println(" -webkit-box-shadow:0 2px 3px rgba (0,0,0,0,4)");             Client.Println("inset 0 -1px 1px #888,");             Client.Println("inset 0 -5px 1px #bbb,");             Client.Println(" inset 0 -6px 0 bianco;");             Client.Println(" -moz-box-ombra:0 2px 3px rgba (0,0,0,0,4)");             Client.Println("inset 0 -1px 1px #888,");             Client.Println("inset 0 -5px 1px #bbb,");             Client.Println(" inset 0 -6px 0 bianco;");             Client.Println(" box-shadow:0 2px 3px rgba (0,0,0,0,4)");             Client.Println("inset 0 -1px 1px #888,");             Client.Println("inset 0 -5px 1px #bbb,");             Client.Println(" inset 0 -6px 0 bianco;");             Client.Println(" -webkit-border-radius:3px;");             Client.Println("moz-border-radius:3px;");             Client.Println("border-radius:3px;");             Client.Println("font:normale 11px Arial,Sans-Serif;");             Client.Println("colore:#666;");             Client.Println(" text-shadow:0 1px 0 bianco;");             Client.Println("cursore:testo;");             Client.Println("}");             Client.Println("");             Client.Println(".toggle label:before);             Client.Println("content:attr(data-off);");             Client.Println("posizione:assoluta;");             Client.Println("top:6px;");             Client.Println("a destra:0;");             Client.Println("sinistra:0;");             Client.Println("z-index:4;");             Client.Println("}");             Client.Println("");             Client.Println(".toggle label:dopo il numero di);             Client.Println("content:attr(data-on);");             Client.Println("posizione:assoluta;");             Client.Println("a destra:0;");             Client.Println("in basso:11px;");             Client.Println("sinistra:0;");             Client.Println("colore:#666;");             Client.Println("text-shadow:0 -1px 0 #eee;");             Client.Println("}");             Client.Println("");             Client.Println(".toggle input:checked - label ");             Client.Println(" background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println(" background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println(" background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println(" background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println(" background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);");             Client.Println(" -webkit-box-shadow:0 0 1px rgba (0,0,0,0,4)");             Client.println(" inset 0 1px 7px -1px #ccc,");             Client.println(" inset 0 5px 1px #fafafa,");             Client.println(" inset 0 6px 0 bianco;");             Client.println(" -moz-box-ombra:0 0 1px rgba(0,0,0,0,4)");             Client.println(" inset 0 1px 7px -1px #ccc,");             Client.println(" inset 0 5px 1px #fafafa,");             Client.println(" inset 0 6px 0 bianco;");             Client.println(" box-shadow:0 0 1px rgba(0,0,0,0,4)");             Client.println(" inset 0 1px 7px -1px #ccc,");             Client.println(" inset 0 5px 1px #fafafa,");             Client.println(" inset 0 6px 0 bianco;");             Client.println("}");             Client.println("");             Client.println(".toggle input:checked:hover - etichetta");             Client.println(" -webkit-box-shadow:0 1px 3px rgba (0,0,0,0,4)");             Client.println(" inset 0 1px 7px -1px #ccc,");             Client.println(" inset 0 5px 1px #fafafa,");             Client.println(" inset 0 6px 0 bianco;");             Client.println(" -moz-box-ombra:0 1px 3px rgba (0,0,0,0,4)");             Client.println(" inset 0 1px 7px -1px #ccc,");             Client.println(" inset 0 5px 1px #fafafa,");             Client.println(" inset 0 6px 0 bianco;");             Client.println(" box-shadow:0 1px 3px rgba (0,0,0,0,4)");             Client.println(" inset 0 1px 7px -1px #ccc,");             Client.println(" inset 0 5px 1px #fafafa,");             Client.println(" inset 0 6px 0 bianco;");             Client.println("}");             Client.println("");             Client.println(".toggle input:checked : label:before");             Client.println(" z-index:1;");             Client.println(" top:11px;");             Client.println("}");             Client.println("");             Client.println(".toggle input:checked : label:after ");             Client.println(" in basso:9px;");             Client.println(" colore:#aaa;");             Client.println(" text-shadow:nessuno;");             Client.println(" z-index:4;");             Client.println("}");             Client.println("</style></head>");                                      Intestazione del sito Web             Client.println("<corpo><h1>ESP8266 Web Server</h1>");                                                       Mostra lo stato corrente e i pulsanti ON/OFF per GPIO 5               Client.println("<p>Light Garage: " + output5State + "</p>");             se output5State è OFF, mostra il pulsante ON                    Se (output5State=="OFF") {               Client.println("<p><span class>"toggle"><input type''"checkbox" onclick-''window.location.assign('/5/EIN")'><data-off'"OFF" data-on""On"></label><_span);             } Altro {               Client.println("<p><span class>"toggle"><input type''"checkbox"" onclick'''window.location.assign('/5/OFF)' checked><label data-off>"OFF" data-on-""On"><label></span<<</span<);             }                             Lo stesso vale per GPIO 4             Client.println("<p>Cantina Luminosa: " + output4State + "</p>");             Se output4State è disattivato, visualizzare il pulsante ON                    Se (output4State=="OFF") {               Client.println("<p><span class>"toggle"><input type''"checkbox"" onclick'''window.location.assign('/4/EIN)'><data-off'"OFF" data-on"On"></label></_span);             } Altro {               Client.println("<p><span class>"toggle"><input type''"checkbox"" onclick'''window.location.assign('/4/OFF)' checked><label data-off>"OFF" data-on-""On"<label></span</span<<);             }             Client.println("</body></html>");                          La risposta HTTP termina con una riga vuota             Client.println();             e lasciamo il ciclo con una pausa             Pausa;           } Altro { se arriva una nuova riga, eliminare la riga corrente             riga corrente = "";           }         } Altro Se (C != 'A'r') {  se viene qualcosa che non è un'interruzione di riga,           riga corrente += C;      associarlo alla fine di currentLine         }       }     }     Eliminare la variabile di intestazione per il passaggio successivoDelete the header variable for the next pass     Intestazione = "";     Chiusura della connessione     Client.Fermare();     Seriale.println("Client disconnesso".);     Seriale.println("");   }
}

Ora una domanda rimane senza risposta: perché usiamo /4/EIN o /5/AUS nel nostro codice per cambiare gli Oggetti Criteri di gruppo?

In questo modo, è possibile per noi inserire un relè desiderato nello stato desiderato in un browser inserendo l'IP seguito da /"Pin number"/"Status".

Ma la richiesta non deve necessariamente provenire da un browser web. Se si dispone di un altro dispositivo nella rete WLAN, ad esempio un altro ESP, è possibile passare l'inoltro desiderato con una semplice richiesta HTTP. Si potrebbe collegare un interruttore di luce a questo secondo ESP. O un rilevatore di movimento. 

Oppure si potrebbe scrivere un APP per lo smartphone, con pulsanti che non fanno altro che chiamare l'URL desiderato. 

Naturalmente, non devo lasciare la questione della sicurezza non menzionata a questo punto.

Il server ESP è accessibile a ogni abbonato nella propria rete Wi-Fi e non esiste alcuna query di sicurezza. Quindi il tutto è sicuro solo come il tuo Wi-Fi. Se si danno ad amici o parenti la loro chiave, o il router Wi-Fi è non configurato correttamente, o ha una vulnerabilità di sicurezza, in teoria chiunque può passare i relè.

Per un interruttore della luce o qualcosa del genere, questo non dovrebbe essere il grande problema, ma prima di iniziare a controllare serrature e porte del garage, consiglio vivamente di guardare il tema della sicurezza di rete.

Spero che vi sia piaciuto il contributo di oggi e abbiate sottolineato che, con un po' di intuizione, non è così complicato includere l'ESP nei vostri progetti, anche se l'attuazione sembra molto complicata all'inizio.

Saluto fino al prossimo contributo e sono lieto delle lodi e delle critiche.

Il tuo Markus Neumann