Ogni grillo si crede cavallo

Come funziona il codice Ora, diamo un'occhiata più da vicino al codice per vedere come funziona, in modo da poterlo modificare per soddisfare le tue esigenze. La prima cosa che devi fare è includere la biblioteca ESP8266WiFi // Load Wi-Fi library #include <ESP8266WiFi.h>

Come accennato in precedenza, è necessario inserire il ssid e la password nelle seguenti righe all'interno delle virgolette doppie. const char* ssid = ""; const char* password = "";

Quindi, impostare il server Web sulla porta 80. // Set web server port number to 80 WiFiServer server(80);

La riga seguente crea una variabile per memorizzare l'intestazione della richiesta HTTP: String header; Successivamente, si creano variabili ausiliarie per memorizzare lo stato corrente degli output. Se si desidera aggiungere più output e salvarne lo stato, è necessario creare più variabili. // Auxiliar variables to store the current output state String output5State = "off"; String output4State = "off";

È inoltre necessario assegnare un GPIO a ciascuno degli output. Qui stiamo usando GPIO 4 e GPIO 5. È possibile utilizzare qualsiasi altro GPIO adatto. // Assign output variables to GPIO pins const int output5 = 5; const int output4 = 4;

setup() Ora, entriamo nel setup(). La funzione setup() viene eseguita solo una volta al primo avvio dell'ESP. Innanzitutto, avviamo una comunicazione seriale a una velocità di trasmissione di 115200 per scopi di debug. Serial.begin(115200);

È inoltre possibile definire i GPIO come OUTPUT e impostarli su LOW. // Initialize the output variables as outputs pinMode(output5, OUTPUT); pinMode(output4, OUTPUT); // Set outputs to LOW digitalWrite(output5, LOW); digitalWrite(output4, LOW); Le seguenti righe iniziano la connessione Wi-Fi con WiFi.begin (ssid, password), attendi la corretta connessione e stampa l'indirizzo IP ESP nel monitor seriale. // Connect to Wi-Fi network with SSID and password Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } // Print local IP address and start web server Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin();

loop() Nel loop() programmiamo cosa succede quando un nuovo client stabilisce una connessione con il server web. L'ESP è sempre in ascolto dei clienti in arrivo con questa linea: WiFiClient client = server.available(); // Listen for incoming clients Quando viene ricevuta una richiesta da un cliente, salveremo i dati in entrata. Il ciclo while che segue sarà in esecuzione finché il client rimane connesso. Non è consigliabile modificare la parte seguente del codice a meno che tu non sappia esattamente cosa stai facendo. if (client) { // If a new client connects, Serial.println("New Client."); // print a message out in the serial port String currentLine = ""; // make a String to hold incoming data //from the client while (client.connected()) { // loop while the client's connected if (client.available()) { // if there's bytes to read from the client, char c = client.read(); // read a byte, then Serial.write(c); // print it out the serial monitor header += c; if (c == '\n') { // if the byte is a newline character // if the current line is blank, you got two //newline characters in a row. // that's the end of the client HTTP request, //so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a //response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows //what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println();

La sezione successiva delle istruzioni if e else controlla quale pulsante è stato premuto nella pagina Web e controlla gli output di conseguenza. Come abbiamo visto in precedenza, facciamo una richiesta su URL diversi a seconda del pulsante che premiamo. // turns the GPIOs on and off if (header.indexOf("GET /5/on") >= 0) { Serial.println("GPIO 5 on"); output5State = "on"; digitalWrite(output5, HIGH); } else if (header.indexOf("GET /5/off") >= 0) { Serial.println("GPIO 5 off"); output5State = "off"; digitalWrite(output5, LOW); } else if (header.indexOf("GET /4/on") >= 0) { Serial.println("GPIO 4 on"); output4State = "on"; digitalWrite(output4, HIGH); } else if (header.indexOf("GET /4/off") >= 0) { Serial.println("GPIO 4 off"); output4State = "off"; digitalWrite(output4, LOW); } Ad esempio, se hai premuto il tasto GPIO 5 ON, l'URL cambia nell'indirizzo IP ESP seguito da /5/ON e riceviamo tali informazioni sull'intestazione HTTP. Quindi, possiamo verificare se l'intestazione contiene l'espressione GET / 5 / on. Se contiene, il codice stampa un messaggio sul monitor seriale, modifica il output5State variabile su on e accende il LED. Questo funziona in modo simile per gli altri pulsanti. Pertanto, se si desidera aggiungere altri output, è necessario modificare questa parte del codice per includerli.

Visualizzazione della pagina Web HTML La prossima cosa che devi fare è generare la pagina web. Il ESP8266 invierà una risposta al tuo browser con del testo HTML per visualizzare la pagina web. La pagina Web viene inviata al client utilizzando il comando client.println() come funzione. È necessario immettere ciò che si desidera inviare al client come argomento. Il primo testo che dovresti sempre inviare è la riga seguente, che indica che stiamo inviando HTML. <!DOCTYPE html><html> Quindi, la riga seguente rende la pagina Web reattiva in qualsiasi browser Web.

client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">")

Il prossimo viene utilizzato per prevenire le richieste relative alla favicon - Non devi preoccuparti di questa linea. client.println("<link rel=\"icon\" href=\"data:,\">");

Applicazione di stili alla pagina Web Successivamente, abbiamo alcuni CSS per modellare i pulsanti e l'aspetto della pagina web. Scegliamo il font Helvetica, definiamo il contenuto da visualizzare come blocco e allineato al centro. client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}"); Modellizziamo i nostri pulsanti con alcune proprietà per definire colore, dimensione, bordo, ecc ... client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;"); client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}"); Quindi, definiamo lo stile per un secondo pulsante, con tutte le proprietà del pulsante che abbiamo definito in precedenza, ma con un colore diverso. Questo sarà lo stile per il pulsante di spegnimento. client.println(".button2 {background-color: #77878A;}</style></head>");

Impostazione della prima intestazione della pagina Web Nella riga successiva imposti la prima intestazione della tua pagina web, puoi cambiare questo testo in quello che preferisci.

// Web Page Title client.println("<h1>ESP8266 Web Server</h1>");

Visualizzazione dei pulsanti e dello stato corrispondente Quindi, si scrive un paragrafo per visualizzare il GPIO 5 stato attuale. Come puoi vedere usiamo la variabile output5State , in modo che lo stato si aggiorni istantaneamente quando questa variabile cambia. client.println("<p>GPIO 5 - State " + output5State + "</p>"); Quindi, visualizziamo il pulsante di accensione o spegnimento, a seconda dello stato corrente del GPIO. if (output5State=="off") { client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>"); } else { client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>"); } Utilizziamo la stessa procedura per GPIO 4.

Chiusura della connessione Infine, al termine della risposta, cancelliamo la variabile di intestazione e interrompiamo la connessione con il client con client.stop(). // Clear the header variable header = ""; // Close the connection client.stop();