wemos d1 mini web server LED

Wemos D1 Mini Webserver controllare un LED Wifi da una pagina HTML Bootsrap

Arduino & IOT, Programmazione Web & IoT, Wemos D1 Mini - Progetto IoT

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.

wemos d1 mini web server LED
wemos d1 mini web server LED
#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.

Wemos D1 Mini Webserver controllare un LED Wifi da una pagina HTML Bootsrap

Post Correlati:

WeMos D1 mini pinout e diagramma
Wemos D1 Mini ESP8266 - Cos'è e come utilizzarlo - Parte 1
Pinout Arduino mini
Pinout Arduino nano
Torna su