In questo progetto impareremo a controllare un LED collegato alla nostra WiFi attraverso una pagina web e la scheda Wemos D1 Mini.
Per controllare il LED tramite Webserver dobbiamo creare una pagina Web HTML ed il famoso framework Bootsrap a cui ci collegheremo attraverso un normale browser ed utilizzeremo 2 pulsanti per accendere e spegne il LED.
Facendo alcune piccole modifiche a questo stesso progetto sarà possibile collegare ad esempio, al posto del LED, un relay e quindi comandare dei carichi molto più pesanti e, ad esempio accendere e spegnere delle luci della nostra casa dall’interno della nostra rete LAN.
Il LED andrà collegato alla scheda Wemos D1 Mini seguendo la figura seguente. Io personalmente la resistenza non la metto mai e non ho mai avuto problemi.
#include <ESP8266WiFi.h>
const char* ssid = "xxxxxxxx"; // Wi-Fi SSID
const char* password = "xxxxxxx"; // Wi-Fi Password
int LED = D2; // Led connesso al PIN D2
WiFiServer server(80);
void setup(){
Serial.begin(115200);
pinMode(LED, OUTPUT);
digitalWrite(LED, LOW);
Serial.print("Mi sto connettendo al WiFi");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED){
delay(500);
Serial.print(".");
}
Serial.println("WiFi connesso");
server.begin(); // Inizializza il server
Serial.println("Server Attivo");
Serial.print("Indirizzo IP del server: "); // will IP address on Serial Monitor
Serial.println(WiFi.localIP());
Serial.print("copia e incolla questo URL per accedere al server: http://"); // Scriviamo l'indirizzo per raggiungere il server
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop(){
WiFiClient client = server.available();
if (!client){
return;
}
Serial.println("attendo la connessione di un client");
while(!client.available()){
delay(1);
}
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();
int value = LOW;
if(request.indexOf("/LED=ON") != -1){ // Se ricevo "ON"
digitalWrite(LED, HIGH); // Accendo il led
value = HIGH;
}
if(request.indexOf("/LED=OFF") != -1){ // Se ricevo "OFF"
digitalWrite(LED, LOW); // Turn LED OFF
value = LOW;
}
//*------------------Codice HTML della pagina---------------------*//
client.println("HTTP/1.1 200 OK"); //
client.println("Content-Type: text/html");
client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<head>");
client.println("<meta charset='utf-8'>");
client.println("<meta http-equiv='X-UA-Compatible' content='IE=edge'>");
client.println(" <meta name='viewport' content='width=device-width, initial-scale=1'>");
client.println("<title>");
client.println("COnnT Webserver Controllo LED");
client.println("</title>");
client.println("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>");
client.println("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>");
client.println("</head>");
client.println("<html>");
client.println("<body class='container'>");
client.println("<div class='row'>");
client.println("<div class='col-md-10 col-md-offset-1'>");
client.println(" CONTROLLO LED DA PAGINA LOCALE IN BOOTSTRAP");
if(value == HIGH){ client.println("<h2>LED ACCESO</h2>"); } else { client.println("<h2>LED SPENTO</h2>"); }
client.println("<br><br>");
client.println("<a href=\"/LED=ON\"\" class='btn btn-info' role='button'>ACCENDI LED</a>");
client.println("<a href=\"/LED=OFF\"\" class='btn btn-info' role='button'>SPEGNI LED</a><br />");
client.println("</div>");
client.println("</div>");
client.println("</body>");
client.println("</html>");
delay(1);
Serial.println("Client disconnesso");
Serial.println("");Caricate lo sketch sulla scheda. Accedendo al monitor seriale troverete il link con l’indirizzo IP che è stato assegnato al nostro server.
Tramite un browser web come ad esempio Chrome accedete a questo indirizzo e vedrete la pagina HTLM con i pulsanti di accensione e spegnimento del nostro LED.
