Saturday, November 24, 2018

ESP8266 WiFi : Advance - Control LED using Webserver V2

Description
This version is simplify and easy to modified than Version 1. This sketch demonstrates how to set up a simple HTTP-like server to control LED light. The server will set a GPIO/Digital pin depending on the request. The IP address of the ESP8266 module, will be printed to Serial when the module is connected. You can learn basic HTML at w3school to modified HTML coding.

List Item
  1. Wemos/Robotdyn D1 R2 ESP8266
  2. LED
  3. Resistor 220 ohm
  4. Wire Jumper
Wiring Diagram



Video

Coding

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

const char* ssid = "controller";  //Put your wifi ssid here
const char* password = "0123456789"; //Put your wifi password here

ESP8266WebServer server(80);

const int led1 = D0;
const int led2 = D1;
const int led3 = D2;

void setup(void) {
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
  pinMode(led3, OUTPUT);
  digitalWrite(led1, LOW);
  digitalWrite(led2, LOW);
  digitalWrite(led3, LOW);

  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }

  server.on("/", [](){
    server.send(200,"text/html", webPage());
  });

   //+++++++++++++++++++++++ START  LED 1  ++++++++++++++++++++
  server.on("/led1On", [](){
    digitalWrite(led1, HIGH);
    server.send(200, "text/html", webPage());
    delay(100);
 
  });
  server.on("/led1Off", [](){
    digitalWrite(led1, LOW);
    server.send(200, "text/html", webPage());
    delay(100);
  });
   //+++++++++++++++++++++++ END  LED 1 ++++++++++++++++++++
 
   //+++++++++++++++++++++++ START  LED 2  ++++++++++++++++++++
  server.on("/led2On", [](){
    digitalWrite(led2, HIGH);
    server.send(200, "text/html", webPage());
    delay(100); 
  });
  server.on("/led2Off", [](){
    digitalWrite(led2, LOW);
    server.send(200, "text/html", webPage());
    delay(100);
  }); 
   // +++++++++++++++++++++++ END  LED 2 ++++++++++++++++++++
 
   //+++++++++++++++++++++++ START  LED 3  ++++++++++++++++++++

  server.on("/led3On", [](){
    digitalWrite(led3, HIGH);
    server.send(200, "text/html", webPage());
    delay(100); 
  });
  server.on("/led3Off", [](){
    digitalWrite(led3, LOW);
    server.send(200, "text/html", webPage());
    delay(100);
  }); 
   // +++++++++++++++++++++++ END  LED 3 ++++++++++++++++++++

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
}

String webPage()
{
  String web;
  web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>ESP 8266</title><style>html { font-family: Open sans; display: inline-block; margin: 0px auto; text-align: center;}</style></head>";
  web += "<h1 style=\"text-align: center;font-family: Open sans;font-weight: 100;font-size: 30px;\">ESP8266 Web Server LED Control</h1><div>";


  //++++++++++ LED-1  +++++++++++++
  web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 20px;\">LED 1</p>";
  if (digitalRead(led1) == HIGH)
  {
    web += "<img src=\"https://www.w3schools.com/js/pic_bulbon.gif\" width=\"60\" height=\"90\"><br><br/>";
  }
  else
  {
    web += "<img src=\"https://www.w3schools.com/js/pic_bulboff.gif\" width=\"60\" height=\"90\"><br><br/>";
  }
  web += "<div style=\"text-align: center;\"> <a href=\"led1On\"><button>ON</button></a>&nbsp;&nbsp;<a href=\"led1Off\"><button>OFF</button></a></div><br><br/>";
  // ++++++++ LED-1 +++++++++++++


  //++++++++++ LED-2  +++++++++++++
  web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 20px;\">LED 2</p>";
  if (digitalRead(led2) == HIGH)
  {
    web += "<img src=\"https://www.w3schools.com/js/pic_bulbon.gif\" width=\"60\" height=\"90\"><br><br/>";
  }
  else
  {
    web += "<img src=\"https://www.w3schools.com/js/pic_bulboff.gif\" width=\"60\" height=\"90\"><br><br/>";
  }
  web += "<div style=\"text-align: center;\"> <a href=\"led2On\"><button>ON</button></a>&nbsp;<a href=\"led2Off\"><button>OFF</button></a></div><br><br/>";
  // ++++++++ LED-2 +++++++++++++


  //++++++++++ LED-3  +++++++++++++
  web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 20px;\">LED 3</p>";
  if (digitalRead(led3) == HIGH)
  {
    web += "<img src=\"https://www.w3schools.com/js/pic_bulbon.gif\" width=\"60\" height=\"90\"><br><br/>";
  }
  else
  {
    web += "<img src=\"https://www.w3schools.com/js/pic_bulboff.gif\" width=\"60\" height=\"90\"><br><br/>";
  }
  web += "<div style=\"text-align: center;\"> <a href=\"led3On\"><button>ON</button></a>&nbsp;<a href=\"led3Off\"><button>OFF</button></a></div>";

  web += "</div>";
  return(web);
}

No comments:

Post a Comment