ผู้เขียน หัวข้อ: งานครั้งที่ 23 [On Line] การควบคุม LED ผ่านบราวเซอร์ภายในวงแลนเดียวกัน (อ่าน 5580 ครั้ง)

admin · « **เมื่อ:** พฤศจิกายน 11, 2017, 08:13:43 AM »

การควบคุม LED ผ่านเวป (ภายในวงแลนเดียวกัน)

งานครั้งนี้เป็นการควบคุมการติดดับของ LED โดยควบคุมผ่านบราวเซอร์ โดยให้ NodeMCU ทำตัวเองเป็น Web sever (ตัวเก็บเวป) เมื่อมีผู้เรียกใช้ผ่าน IP ของ NodeMCU ให้ NodeMCU ส่งค่า (หน้าตาเวป) ไปแสดงผ่านเวปบราวเซอร์ ในใบงานนี้เป็นการทดลองควบคุม LED โดยหน้าตาของเวปจะต้องใช้โค้ด HTML ในการแสดงผล เช่นต้องการแสดงผลให้ควบคุม LED 1 ตัวโดยให้มีปุ่มกด ON และ OFF และมื่อมีการกดปุ่มให้ส่งค่ากลับไปยัง web sever โดยเมื่อกดปุ่ม "LED On" บราวเซอร์จะส่งค่า "ledon" กลับไปยัง web sever ในขณะเดียวกันเมื่อกดปุ่ม "LED Off" บราวเซอร์จะส่งค่า "ledoff" กลับไปยัง web sever เช่นกันซึ่งจะต้องใช้โค้ด HTML ดังนี้

สามารถเข้าไปทดลองเขียนโค้ด HTML เพื่อทดสอบการแสดงผลได้ที่
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

โจทย์การทดลอง
-เขียนโปรแกรมควบคุมการติดดับของ LED จำนวน 2 ตัวโดยสั่งงานผ่านบราวเซอร์
-โปรแกรมรายละเอียดพิเศษรายกลุ่ม (แจ้งให้ทราบเมื่อถึงชั่วโมงเรียน)

ตัวอย่างโค้ด HTHL ที่ใช้ควบคุม LED 2 ตัว

วงจรที่ใช้ทดลอง

ตัวอย่างโปรแกรม

โค๊ด: [Select]

#include <ESP8266WiFi.h>
#define LED D0                              // use D0 connect to LED
const char* ssid = "Your SSID";             // SSID is set
const char* password = "Your password";     // Password is set 
unsigned char status_led=0;                 // keep status LED
WiFiServer server(80);                      // set TCP Server Port 80
void setup() {
  Serial.begin(115200); 
  pinMode(LED, OUTPUT); 
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password); 
  while (WiFi.status() != WL_CONNECTED) 
  {
        delay(500);
        Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");     
  server.begin();                            //TCP Server started
  Serial.print("Web Server started at IP  ");
  Serial.println(WiFi.localIP());            //display IP of Web Server
  Serial.println("");  
}
void loop() {
  WiFiClient client = server.available();
  if (!client) {                             //if not Client request then  loop agian
    return;
  }
  Serial.println("new client");
  while(!client.available())
  {
    delay(1);
  }
  String req = client.readStringUntil('\r'); // read string from client until ‘\r’ 
  Serial.println(req);                       // display stringdata from client at Serial monitor
  client.flush();
  if (req.indexOf("/ledoff") != -1)          // check data is "/ledoff" 
  {
    status_led=0;        
    digitalWrite(LED,LOW);    
    Serial.println("LED OFF");
  }
  else if(req.indexOf("/ledon") != -1)       // check data is "/ledon"   
  {
    status_led=1;                   
    digitalWrite(LED,HIGH);       
    Serial.println("LED ON");
  }
//---------------keep Code HTML in variable "web"---------------------
  String web = "<!DOCTYPE html\r\n";
  web += "<html>\r\n";
  web += "<body>\r\n";
  web += "<h1>LED Status</h1>\r\n";
  web += "<p>\r\n";
  if(status_led==1)
      web += "LED On\r\n";
  else
      web += "LED Off\r\n";
  web += "</p>\r\n";
  web += "<p>\r\n";
  web += "<a href=\"/ledon\"><button>LED On</button></a>\r\n";
  web += "<a href=\"/ledoff\"><button>LED Off</button></a>\r\n";
  web += "</p>\r\n";  
  web += "</body>\r\n";
  web += "</html>\r\n";
  client.print(web);
}

ค่าในตัวแปรสตริง \r\n = CR + LF // Used as a new line character in Windows

ผลที่ได้เมื่อกดปุ่ม LED On

และเมื่อกดปุ่ม LED Off

<a href="http://www.youtube.com/v/JEOikUzwoVE" target="_blank" class="new_win">http://www.youtube.com/v/JEOikUzwoVE</a>
บทความนี้ไม่ได้ใช้ไลบรารี่พิเศษในการเชื่อมต่อ WiFi เช่น WiFiManager, WiFiConnector ดังนั้นการเชื่อมต่อ WiFi จึงมีประสิทธิภาพที่ไม่สมบูรณนัก สำหรับไลบรารี่พิเศษในการเชื่อมต่อ WiFi ดังกล่าวจะมีให้ทดลองในงานครั้งถัด ๆ ไป

ผู้เขียน หัวข้อ: งานครั้งที่ 23 [On Line] การควบคุม LED ผ่านบราวเซอร์ภายในวงแลนเดียวกัน (อ่าน 5580 ครั้ง)

admin

งานครั้งที่ 23 [On Line] การควบคุม LED ผ่านบราวเซอร์ภายในวงแลนเดียวกัน