NodeMCU Sinhalen 3 – LED On/Off from Web Browser

ගොඩ කාලෙකින් තමයි NodeMCU වල වීඩියෝ එකක් කරන්නේ. අද කියලා දෙන්නේ Wi-Fi හරහා ඔයාගේ NodeMCU එකේ GPIO pin control කරන විදිය ගැන. මේ වැඩේ කරන්න පුලුවන් ක්‍රම ගොඩක් තියනවා. අපි අද කරන්න යන්නේ NodeMCU එක server එකක් විදියට පාවිච්චි කරලා web page එකක් හරහා nodeMCU එක පාලනය කරන එක.

ඔයා NodeMCU වලට අලුත් කෙනෙක් නම් අනිවාර්යයෙන්ම දෙවනි වීඩියෝ එක බලලා ඒකෙ තියන විදියට Arduino IDE එක setup කරගන්න ඕනේ. IDE එක setup කරගත්තේ නැත්තම් ඔයාට මේ program එක compile කරලා upload කරන්න බැරි වෙනවා. Program එකක් upload කරන විදියත් ඒ වීඩියෝ එකේ කියලා දීලා තියනවා. ඒකට ඔයාට හරියන drivers දා ගන්නත් ඕනේ.

  • මේ විදියට තමයි LED දෙක සම්බන්ධ කරගන්න ඕනේ.

මේ code එකේ හැම දෙයක්ම වගේ වීඩියෝ එකේ explain කරලා තියනවා. ඔයාට පුලුවන් මේ code එක copy කරගෙන මේක කරලා බලන්න. මේකෙදි ඔයා අනිවාර්යයෙන්ම ඔයාගේ router එකේ/ AP එකේ credentials code එකට දෙන්න ඕනේ. මේ පේලි දෙකේ ඔයාගේ SSID එකයි Password එකයි දාගන්න.

const char* ssid     = "Nisalhe";
const char* password = "12341234";

අපි මේ කරන විදියට ඔයාට මේක control කරන්න පුලුවන් වෙන්නේ ඔයාගෙ local area network එකේ ඉදන් විතරයි. ඒ කියන්නේ ඔයාගේ ගෙදරින් එලියට ගිහින් ඔයා වෙන Wi-Fi network එකක හරි mobile data වලින් හරි ඉන්න වෙලාවක ඔයාට මේක access කරන්න බෑ. අපි එහෙම කරන විදිය ගැනත් ඉස්සරහට කතා කරමු. මෙතනදි ඔයාගෙ router එකෙන් දෙන්නේ private IP address එකක්. ඒක 192.168.1.xxx හෝ 192.168.8.xxx වගේ address එකක් වෙන්න පුලුවන්. මේක ඔයාගේ router එකේ දැනට පාවිච්චි වෙන network address එක හා DHCP range එක අනුව වෙනස් වෙනවා. මේ address එක වලංගු වෙන්නේ ඔයාගේ LAN එකේදී විතරයි.

මෙතනදි load වෙන web interface එක ඔයාට කැමති විදියකට වෙනස් කරගන්න පුලුවන්. ඔයාට ඕනෙ වෙන්නේ පොඩි HTML සහ ඒක ලස්සන කරගන්න CSS දැනුමක් විතරයි. W3 Schools කියන web site එකේ HTML CSS සහ තවත් ගොඩක් දේවල් ගැන basic ඉදලා ටිකක් advance මට්ටමටම තියනවා. ඔයාට එතනින් ගොඩක් දේවල් ඉගෙන් ගන්න පුලුවන් වෙයි.

දැන් ඔයාට මේක try කරලා බලන්න පුලුවන්. ඒ වගේම මේ post එක Facebook එකේ Share කරන්නත් අමතක කරන්න එපා. එහෙනම් හැමෝටම ජය!

#include <ESP8266WiFi.h>

const char* ssid     = "Nisalhe";
const char* password = "12341234";

WiFiServer server(80);

String header;

String LED1_State = "off";
String LED2_State = "off";

const int LED_1 = D1;
const int LED_2 = D2;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  
  pinMode(LED_1, OUTPUT);
  pinMode(LED_2, OUTPUT);
 
  digitalWrite(LED_1, LOW);
  digitalWrite(LED_2, LOW);

  // 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.print("IP address : ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  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
    currentTime = millis();
    previousTime = currentTime;
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();         
      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();
            
            // turns the LEDs on and off
            if (header.indexOf("GET /1/on") >= 0) {
              Serial.println("LED 1 on");
              LED1_State = "on";
              digitalWrite(LED_1, HIGH);
            } else if (header.indexOf("GET /1/off") >= 0) {
              Serial.println("LED 1 off");
              LED1_State = "off";
              digitalWrite(LED_1, LOW);
            } else if (header.indexOf("GET /2/on") >= 0) {
              Serial.println("LED 2 on");
              LED2_State = "on";
              digitalWrite(LED_2, HIGH);
            } else if (header.indexOf("GET /2/off") >= 0) {
              Serial.println("LED 2 off");
              LED2_State = "off";
              digitalWrite(LED_2, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".head { position: fixed; left: 0; top: 0; width: 100%; background-color: #34495e; font-size:35px; font-weight: bold; color: white; text-align: center; }");
            client.println(".footer { position: fixed; left: 0; bottom: 0; background-color: #34495e; width: 100%; color: white; text-align: center;}");
            client.println(".button { background-color: #c0392b; border: none; color: white; padding: 16px 40px; width: 150px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #77878A; width: 150px;}</style></head>");
            
            // Web Page Heading
            client.println("<div class=\"head\"> <p>NodeMCU Tutorial 3</p> </div></br></br></br></br></br></br></br>");
          
            client.println("<h3>LED 1</h3>");
            // If the LED1_State is off, it displays the ON button       
            if (LED1_State=="off") {
              client.println("<p><a href=\"/1/on\"><button class=\"button button2\">OFF</button></a></p>");
            } else {
              client.println("<p><a href=\"/1/off\"><button class=\"button\">ON </button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 4  
            client.println("<h3>LED 2</h3>");
            // If the LED2_State is off, it displays the ON button       
            if (LED2_State=="off") {
              client.println("<p><a href=\"/2/on\"><button class=\"button button2\">OFF</button></a></p>");
            } else {
              client.println("<p><a href=\"/2/off\"><button class=\"button \">ON </button></a></p>");
            }
            client.println("<a href=\"http://nisalhe.com/\"><div class=\"footer\"> <p>More info - www.nisalhe.com</p> </div></a>");
            client.println("</body></html>");
            client.println();
            break;
          } else { 
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

4 thoughts on “NodeMCU Sinhalen 3 – LED On/Off from Web Browser

  1. Niyamai malli.. oya pehediliwa kiyala denawa… anna a vidiyata hema code line ekakma explain karanna.. puluwannam oyage aluth projects meetawada ikmanin share karanna… good luck

  2. nodemcu හැර magicblocks.io ගැන කියා දෙන්න පුලුවන්ද
    වයිෆයි නැතුව nodemcu වලටconnect වෙන්න බැරිද

  3. nodemcu හැර magicblocks.io ගැන කියා දෙන්න පුලුවන්ද
    වයිෆයි නැතුව nodemcu වලටconnect වෙන්න බැරිද

  4. Oya dan me gana vediyo karanne nadda? Puluwannam WiFi router ekak nathuwa kelinma phone eken connet karanna kiyadenna. Phone eke hospot hari WiFi hari use karala control karanna widihak godak dura use bari wunata kamak na.

Leave a Reply

Your email address will not be published. Required fields are marked *