Lesson 09 : ก้าวเข้าสู่ IOT – ตอนที่ 1 สั่งเปิดปิด LED ผ่าน Web Browser

ในบทเรียนนี้จะสอนให้น้องๆ เรียนรู้การใช้งานโปรแกรม Arduino ยากขึ้นไปอีกระดับ โดยในบทเรียนนี้จะประมวลความรู้หลายๆ ส่วนประกอบกัน เพื่อควบคุม Arduino ผ่าน Web Browser ให้เปิดปิดไฟ LED จากหน้าเว็บครับ

ระดับความยาก :  

สิ่งที่ต้องทราบก่อนเริ่มเรียน

สิ่งที่จะได้จากบทเรียนนี้

อุปกรณ์

ลำดับชิ้นส่วนจำนวน
1Board Arduino UNO1 ชิ้น
2สาย Jump ผู้ – เมีย8 เส้น
3สาย Jump ผู้ – ผู้9 เส้น
4โมดูลรับส่งสัญญาณ Wifi(ESP8266(ESP01) Serial Wireless WIFI Module)1 ชุด
5ตัวต้านทาน 330 โอม1 ตัว
6ไฟ LED1 ดวง

การต่ออุปกรณ์แบ่งเป็นสองขั้นตอน โดยให้ต่อ Module รับส่งสัญญาณ Wifi(ESP8266) กับ Breadboard ดังภาพนี้ก่อนครับ

จากนั้นนำ Board Arduino UNO R3 ต่อเข้ากับ Breadboard ดังภาพนี้ครับ

ทำความเข้าใจ Module ESP8266 กันก่อน
Module ESP8266 มีบอร์ดหลายตัวอยู่ใน Series นี้ ที่เราจะใช้ในบทความนี้ เป็น Module ESP-01 ซึ่งเป็น Module เบื้องต้นในการใช้งาน สำหรับรายละเอียดเกี่ยวกับ ESP8266 สามารถอ่านเพิ่มเติมได้ที่ https://en.wikipedia.org/wiki/ESP8266 นะครับ สำหรับองค์ประกอบของ Module ESP-01 จะมีขาสำหรับเชื่อมต่อดังนี้

หากดูจากรูปที่ผมให้เชื่อมต่อกับ Breadboard ผมอยากให้ทุกท่านเสียบสาย Pin ของทุกขาลงไปที่ Breadboard ก่อนครับ โดยเรียงเป็นแนวนอน และพยายามใช้สีที่ต่างกัน เวลาเราใช้งานเราจะได้ไม่งงครับ เพราะมันเป็นไปได้ว่าเราอาจต้องมีการถอดสาย VCC เพื่อ Reset ฺBoard ESP8266 ด้วย และเท่าที่ผมเคยใช้งานมา Board ตัวนี้จะมีปัญหาจุกจิกค่อนข้างเยอะนะครับ ดังนั้นเราต่อสาย Pin ให้ชัดเจนก่อนจะทำให้เราแก้ปัญหาได้ง่ายขึ้นครับ

ระวังเรื่องความร้อนด้วยนะครับ บอร์ดตัวนี้จะมีปัญหาเรื่องความร้อน ดังนั้นเราไม่ควรใช้งานนานเกินไปครับ

Coding กันเลย
1. เตรียม Library ให้ Arduino IDE รู้จักกับ Module ESP8266 ก่อนโดยเมื่อเปิด Aruino IDE ขึ้นมาแล้วให้เลือกที่เมนู File -> Preferences ดังภาพที่ 1

ภาพที่ 1 เลือกเมนู Preferences เพื่อไปเพิ่ม Board ESP8266

2. ที่ช่อง Additional Boards Manager URL ให้ใส่ค่า “http://arduino.esp8266.com/stable/package_esp8266com_index.json” จากนั้นกดปุ่ม OK ดังภาพที่ 2

ภาพที่ 2 แสดงการกำหนดค่า Boards Manager

3. ทำการ Install Board โดยคลิกที่ Tools -> Baords -> Board Managers… ระบบจะเปิดหน้าต่าง Board Manager ขึ้นมา

ภาพที่ 3 แสดงการเปิดหน้าต่าง Board Manager

4. ที่หน้าต่าง Boards Manager ให้เลื่อนหา Board ที่ชื่อว่า ESP8266 จากนั้นกดปุ่ม Install ดังภาพที่ 4

ภาพที่ 4 แสดงปุ่ม Install Board Library

5. เมื่อ Install เรียบร้อย Arduino IDE ของเรา ก็จะมีLibrary เกี่ยวกับ Board ESP8266 มาให้เราเลือกใช้ ดังภาพที่ 5

ภาพที่ 5 แสดง Library ที่เกี่ยวข้องกับ ESP8266 ให้เราเลือกใช้งาน

6. ให้ Copy Code (Download)ด้านล่างนี้ไปวางที่ Arduino IDE แล้วกด Verify ครับ หาก Compile ไม่ผ่าน ให้ Restart เครื่องคอมพิวเตอร์ของท่านครับ เป็นไปได้ว่า Arduino IDE อาจยังมองไม่เห็น Library ที่ลงไปใหม่

/**
* @desc Class นี้ใช้สำหรับเรียนรู้การทำงานเบื้องต้นของ Arduino, ESP8266
* รวมทั้งการใช้งาน IOT เพื่อควบคุม LED ผ่านทาง Web Browser
* @author Prayoon V.,
* Email : themakerthailand@hotmail.com
* Facebook : @MrMakerThailand
*/#include
#include

//กำหนดค่า Config สำหรับ Access point ของเรา
const char* ssid = “ESP”; //ชื่อ Access point
const char* password = “123456789”; //Password สำหรับให้ Client เช่นโทรศัพท์มือถือ เข้ามาเชื่อมต่อ

//หน้า HTML Form ง่าย ๆ สำหรับสั่งเปิดปิดไฟ

//ประกาศตัวเองเป็น Web Server
ESP8266WebServer server(80);

//Pin ที่ต่อไฟ LED
const int led = 2;

/**
* function handle_led
* @desc สำหรับจัดการให้ไฟติด หรือ ดับ และ Write ข้อความออกที่หน้าเว็บไซต์
*/
void handle_led() {
// get the value of request argument “state” and convert it to an int
// อ่านค่า State จาก Argument ที่ส่งผ่านเข้ามาทาง URL
int state = server.arg(“state”).toInt();

//สั่งให้ไฟติด-ดับ ตามค่าของ State
digitalWrite(led, state);

//Write html บอกว่าขณะนี้ไฟอยู่ที่ State อะไร
server.send(200, “text/plain”, String(“LED is now : “) + ((state)?”on”:”off”));

server.send(200, “text/html”, form);
}

void setup(void) {
Serial.begin(115200);
pinMode(led, OUTPUT);

//สร้างตัวเองเป็น Access Point
WiFi.softAP(ssid, password);

//กำหนด Function เมื่อมี Client ต่อเข้ามาที่ Root ให้แสดงหน้าตาเว็บไซต์โดยดึงจากตัวแปร Form
server.on(“/”, [](){
server.send(200, “text/html”, form);
});

//กำหนด Function เมื่อมี Client ต่อเข้ามาที่ URL Path /led ให้เรียก Method handle_led
server.on(“/led”, handle_led);

// Start the server
server.begin();
}

void loop(void) {
// check for incoming client connections frequently in the main loop:
server.handleClient();
}
testscrolltext(); //แสดงข้อความ Text ที่แบบเคลื่อนไหว
}

7. เสียบสาย USB จาก Board Arduino และ Upload Code ขึ้นไปได้เลยครับ การ Upload Code ไปที่ Board ESP8266 หากสำเร็จจะขึ้นดังภาพที่ 6 นี้ครับ หากไม่สำเร็จให้ข้ามไปดูท้ายบทความนี้ ผมสรุปวิธีแก้ไว้ให้แล้วครับ

ภาพที่ 6 แสดงการ upload ขึ้นไปที่ ESP8266 ได้สำเร็จ

8. มาถึงจุดนี้ เมื่อเราดูที่ Wifi Station จะเห็นเสา Wifi ที่ชื่อว่า ESP ดังภาพที่ 7 ให้ลองเชื่อมต่อที่เสาสัญญาน Wifi ตัวนี้ดูครับ โดยใส่รหัสผ่านเป็นค่าที่อยู่ใน Code Arduino IDE ซึ่งผมกำหนดไว้เป็น 123456789

ภาพที่ 7 แสดงเสาสัญญาน Wifi ชื่อ ESP ซึ่งเป็นเสาจาก Board ESP8266

9. ให้เปิด Web Browser ไปที่ URL 192.168.4.1 จะพบหน้าจอดังภาพที่ 8

ภาพที่ 8 แสดงหน้าจอเว็บ Browser เมื่อต่อมาที่ ip 192.168.4.1

10. ลองเลือกเป็น On และกดปุ่ม Submit ดูครับ ท่านจะเห็น ไฟ LED ติดขึ้นมา และเมื่อเลือกเป็น Off ท่านจะเห็นไฟ LED ดับลง (ผมจะลง Video ให้ภายหลังนะครับ)

*** แก้ปัญหาในกรณีที่ Upload Code ขึ้น Board ไม่ได้ หาก Board ของท่านขึ้น Error ดังนี้
warning: espcomm_sync failed
error: espcomm_open failed
error: espcomm_upload_mem failed
error: espcomm_upload_mem failed
ให้ทำดังนี้
1. ลองถอดสาย VCC ออกจาก Board ESP8266 และกด Upload จากนั้นเสียบสาย VCC เข้า Board ESP8266 จากนั้นกดปุ่ม Upload
2. ลองถอดสาย VCC ออกจาก Board ESP8266 จากนั้นเปิดหน้าต่าง IDE ใหม่ โดยให้เปิด Code Blink จากเมนู File-> Examples-> 01. Basic -> Blink กดปุ่ม Upload ผลที่ได้จะ Error เหมือนเดิมไม่ต้องสนใจครับ ให้เสียบสาย VCC เข้า Board ESP8266 เหมือนเดิมและย้อนมาที่หน้าต่าง IDE ของเราจากนั้นกดปุ่ม Upload ดูครับ
3. หากยังทำไม่ได้ ลองถ่ายรูป Error และส่งมาที่ Inbox ของ Facebook MrMakerThailand ครับ ผมกับทีมงานจะเข้าไปแก้ปัญหาให้ครับ

!!!สำเร็จแล้ว!!!

Share ผลงาน
เมื่อน้อง ๆ ทำสำเร็จแล้วอย่าลืมแชร์ให้เพื่อนๆ ดูได้ที่ Facebook MrMakerThailand
และหากน้อง ๆ ทำไม่ได้ ให้ติดต่อมาได้ตลอดเวลาที่ Inbox นะครับ