งานที่มอบหมาย ครูประภาส

บทความประกอบการเรียนรู้ => IOT : Internet of Thing (ESP8266, NodeMCU, WeMos D1 mini) => ข้อความที่เริ่มโดย: admin ที่ พฤศจิกายน 11, 2017, 08:13:43 AM

หัวข้อ: งานครั้งที่ 23 [On Line] การควบคุม LED ผ่านบราวเซอร์ภายในวงแลนเดียวกัน
เริ่มหัวข้อโดย: 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 ดังนี้
(http://www.praphas.com/PhotoForum/iot/Lab-11-WebControlLED/1.png)
สามารถเข้าไปทดลองเขียนโค้ด HTML เพื่อทดสอบการแสดงผลได้ที่
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default)

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

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

(http://www.praphas.com/PhotoForum/iot/Lab-11-WebControlLED/Exam1.png)

วงจรที่ใช้ทดลอง
(http://www.praphas.com/PhotoForum/iot/NodeMCU-4LED.png)

ตัวอย่างโปรแกรม
โค๊ด: [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
(http://www.praphas.com/PhotoForum/iot/Lab-11-WebControlLED/LED-On.png)

และเมื่อกดปุ่ม LED Off
(http://www.praphas.com/PhotoForum/iot/Lab-11-WebControlLED/LED-Off.png)

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