วัดระดับน้ำผ่านอินเทอร์เน็ตด้วย NETPIE แพลตฟอร์ม IoT

.

.

วัดระดับน้ำผ่านอินเทอร์เน็ตด้วย NETPIE แพลตฟอร์ม IoT

อภิรักษ์ นามแถ่ง

งบประมาณ 1,800 บาท

โครงงานนี้เป็นการนำเอา ESP8266 มาเชื่อมต่อกับเซนเซอร์วัดระดับน้ำแล้วส่งเข้า NETPIE แพลตฟอร์ม IoT ทำให้ท่านสามารถดูระดับน้ำได้ผ่านอินเทอร์เน็ตและแอพพลิเคชั่นที่เขียนขึ้น สามารถสั่งงานเอาต์พุตได้ 1 ช่องสำหรับเปิดปั๊มให้สูบน้ำแบบแมนนวลได้

 

ปัจจุบันเทคโนโลยีการควบคุมอุปกรณ์ต่างๆ ด้วยระบบอินเทรอ์เน็ตหรือเรียกว่า Internet of Things (IoT) กำลังได้รับความนิยมเป็นอย่างมาก และถูกนำมาใช้อย่างแพร่หลายแล้ว อาทิเช่น นำมาใช้ภายในบ้านพัก, สำนักงาน, ทางการเกษตร หรือในโรงงานอุตสาหกรรม เป็นต้น

เมื่อมีความต้องการเพิ่มมากขึ้น เครื่องมือและช่องทางที่จะช่วยอำนวยความสะดวกให้ผู้ใช้งานก็ยิ่งเพิ่มมากตามไปด้วย รวมถึงความสะดวกสบายต่อการใช้งาน หนึ่งในเครื่องมือที่มีการพัฒนาอยู่เรื่อยๆ และเป็นหน่วยงานของรัฐบาลไทย คือ NETPIE แพลตฟอร์ม IoT ที่ทางศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ หรือ NECTEC (http://www.nectec.or.th) ได้ออกเครื่องมือออกมาให้ได้ใช้งานอย่างฟรีๆ มาสักระยะแล้ว และยิ่งนานวันเครื่องมือนี้ก็ยิ่งน่าใช้มากขึ้นเรื่อยๆ ซึ่งโครงงานนี้ได้มีการแสดงผลผ่าน NETPIE Freeboard เพื่อให้ท่านสามารถดูระดับน้ำและสั่งงานเอาต์พุตผ่านเว็บเบราว์เซอร์ได้ ทั้งนี้ผู้เขียนยังได้เขียนแอพพลิเคชันบนโทรศัพท์ Android ทำให้ท่านสามารถดูระดับน้ำและสั่งงานได้ผ่านหน้าจอมือถือ โดยไม่จำเป็นต้องเข้าเว็บเบราว์เซอร์ เป็นอีกทางเลือกหนึ่งสำหรับการใช้งานที่หลายหลายและสะดวกมากยิ่งขึ้น เพื่อไม่เป็นการเสียเวลามาทำความรู้จักกับ NETPIE กันก่อนครับ

รูปที่ 1 NETPIE แพลตฟอร์ม IoT

NETPIE แพลตฟอร์มสำหรับ IoT (Internet of Things)

NETPIE เป็นแพลตฟอร์มที่บริการการเชื่อมต่อข้อมูลและแลกเปลี่ยนข้อมูลระหว่างอุปกรณ์ต่างๆ ได้ เหมาะสำหรับ Internet of Things ซึ่งรูปแบบการใช้งานจะเหมือนกับ MQTT พ่วงความสามารถด้าน Authentication และ Token เพิ่มความปลอดภัยในการสื่อสาร เราสามารถเชื่อมต่อกับ NETPIE ได้หลายช่องทาง ทั้งอุปกรณ์ IoT อย่าง Arduino, Raspberry Pi, ESP8266 Dev Kit, HTML5 หรือแม้กระทั่ง Node.js Application ดังนั้นหากคุณใช้ ESP8266 Dev Kit ของค่ายใดอยู่ก็ตามสามารถใช้งานได้เลย ดู Library ของอุปกรณ์ต่างๆ ได้ที่หน้าโครงการใน GitHub NET-PIE ให้บริการโดย NECTEC สามารถเข้าไปดูข่าวสารและรายละเอียดการเปิดตัว NETPIE เพิ่มเติมได้ที่เว็บไซต์ http://www.nectec.or.th/innovation/innovation-software/netpie.html

รูปที่ 2 กดปุ่ม SIGN UP FREE ที่หน้าแรกของเว็บสำหรับการสมัครสมาชิก

รูปที่ 3 การกรอกรายละเอียดของผู้ใช้

รูปที่ 4 ข้อความแสดงหลังจากที่สมัครสมาชิกสำเร็จ

สมัครสมาชิกเพื่อเข้าใช้งาน NETPIE

ก่อนที่จะเข้าไปใช้งาน NETPIE ได้ก่อนอื่นจะต้องเข้าไปสมัครสมาชิกเสียก่อน โดยเข้าไปที่เว็บไซต์ https://netpie.io ดังแสดงในรูปที่ 2 ซึ่งเป็นหน้าแรก ให้กดปุ่ม SIGN UP FREE ในวงกลมดังรูปที่ 2 เมื่อเข้ามาแล้วจะพบหน้า CREATE AN ACCOUNT สำหรับใส่รายละเอียดของผู้ใช้ดังสาดงในรูปที่ 3 หลังจากใส่ข้อมูลเรียบร้อยและกด SIGN UP หากถูกต้องที่หน้าจอจะแสดงข้อความดังแสดงในรูปที่ 4 เพียงเท่านี้การสมัครสมาชิกก็เสร็จเรียบร้อย

รูปที่ 5 หน้าต่างสำหรับการ Log in เข้าระบบ

รูปที่ 6 หน้าต่างสำหรับใส่ Username และ Password

เมื่อดำเนินการมาถึงขั้นนี้นั่นแสดงว่าท่านสามารถที่จะทำการ Log in เข้าระบบได้แล้ว ในส่วนของรหัสผ่านจะได้รับผ่านทาง SMS เข้าโทรศัพท์ตามเบอร์โทรที่กรอกในขั้นตอนการสมัคร จากนั้นกดปุ่ม LOG IN ดังแสดงในรูปที่ 5 พร้อมกับเอา Password ที่ได้รับจาก NETPIE ผ่านข้อความทางโทรศัพท์ ใส่ในช่อง PASSWORD ดังแสดงในรูปที่ 6 หากการ Log in สำเร็จเท่านี้ก็พร้อมสำหรับการใช้งาน NETPIE แล้ว

ทำความรู้จักกับ Application, Gear และ Key

มาถึงขั้นตอนนี้จะเป็นการสร้าง Application (แอพพลิเคชัน) สำหรับงานของเรา ซึ่ง Application ที่จะสร้างในตอนนี้เป็นเสมือนชื่อเรียกระบบของเรานั่นเอง ยกตัวอย่างเช่นโครงงานนี้จะใช้ชื่อ “SemiWaterLevelNetpie” ซึ่งชื่อ Application นี้ควรตั้งให้สอดคล้องกับงานที่ใช้ เนื่องจากจะเป็นประโยชน์ต่อการเรียกใช้งานในกรณีที่มี Application หลายตัว

ในระบบของเราก็จะสามารถเพิ่มอุปกรณ์ต่างๆ เข้าไปได้ โดยอุปกรณ์ของเราจะถูกเรียกว่า “Gear” (อุปกรณ์ที่ว่านั้นเป็นคอนโทรลเลอร์ของเรา ยกอย่างเช่น Raspberrypi, Arduino, NodeMCU หรือพวกบอร์ดอื่นๆ ที่มีการต่อเซนเซอร์สำหรับส่งข้อมูลต่างๆ เป็นต้น ใน Application หนึ่งอาจจะมีอุปกรณ์ได้หลายตัว (หลาย Gear ได้) โดยแต่ละ Gear ภายในระบบเดียวกันก็สามารถสื่อสารกันเองได้ ซึ่ง NETPIE เปิดให้ผู้ใช้สามารถใช้งานฟรีได้สูงถึง 100 อุปกรณ์เลยทีเดียว

แต่ละอุปกรณ์ (แต่ละ Gear) ก็จะมี Key เป็นของตัวเอง ซึ่ง Key นี้ก็จะเป็นเหมือนกับสิ่งที่ใช้ระบุตัวตนของอุปกรณ์ของเรา สรุป คือ แต่ละ Gear ก็จะมี Key เป็นของตัวเอง และจะไม่เหมือนกับของ Gear ตัวอื่นๆ หรือของคนอื่นๆ ดังนั้นมั่นใจได้ว่าการสั่งงานในแต่ละ Application จะสามารถเข้าถึงได้เพียงท่านคนเดียว คนอื่นจะสามารถเข้าถึง Application ของท่าน รับรองว่าปลอดภัยอย่างแน่นอน

รูปที่ 7 กดเมนู APPLICATION เพื่อเข้าไปหน้าต่างการสร้าง APPLICATION

รูปที่ 8 หน้าต่าง APPLICATION MANAGEMENT

สร้าง Application, Gear และ Key

รูปที่ 7 เป็นการกดปุ่ม APPLICATION จากหน้าแรก หลังจากกดปุ่มแล้วจะเข้าไปยังหน้า APPLICATION MANAGEMENT (การจัดการ APPLICATION) ดังแสดงในรูปที่ 8 รายละเอียดในหน้านี้จะแสดงข้อมูลของ Application ที่เราสร้างไว้ และจำนวนอุปกรณ์ (Gear) ในระบบของเรา

รูปที่ 9 การสร้าง APPLICATION

รูปที่ 10 การตั้งชื่อ APPLICATION

เมื่อเริ่มใช้งานรายละเอียดของ Application และ GEAR จะยังไม่มีอะไร (APPLICATION และ GEAR เท่ากับ 0) การสร้าง Application ทำได้โดยกดตรงปุ่มเครื่องหมาย “+” ดังแสดงในรูปที่ 9 จากนั้นให้ใส่ชื่อของ Application ของเรา สำหรับโครงงานนี้จะให้ชื่อว่า “SemiWaterLevelNetpie” ดังแสดงในรูปที่ 10

รูปที่ 11 หน้าต่างหลังจากที่เสร็จสิ้นการตั้งชื่อ APPLICATION

รูปที่ 12 การเลือก Type Key

รูปที่ 13 การตั้งชื่ออุปกรณ์และเลือก Type Key

หลังจากขั้นตอนนี้เราก็จะได้ Application ที่ชื่อ SemiWaterLevelNetpie มาแล้ว (ดังแสดงในรูปที่ 11) โดยชื่อนี้จะเป็น APP ID ของ Application ของเรา ขั้นตอนต่อไปจะเป็นการสร้าง Key สำหรับการเข้าถึง Application โดยกดที่ปุ่มเครื่องหมายบวก (+) ดังแสดงในรูปที่ 11 จากนั้นจะมีหน้าต่างขึ้นมาเพื่อให้ใส่ชื่อของ Application key และ Type Key ซึ่งในส่วนของ Type Key จะมีให้เลือกระหว่าง Device Key และ Session Key ในโครงงานนี้ให้ผู้ใช้เลือกผู้ใช้เลือก Type Key ให้เป็นแบบ Device Key ดังแสดงในรูปที่ 12

จากนั้นให้ใส่ชื่อของ Application key ซึ่งส่วนนี้จะเป็นชื่ออุปกรณ์ของเราสามารถใส่ชื่อให้สอดคล้องกับ Application (APP ID) หรือชื่ออุปกรณ์ของเราได้ ซึ่งขึ้นอยู่กับความสะดวกในการจำของผู้ใช้งาน ดังแสดงในรูปที่ 13 ทีนี้ก็ให้กดที่ Application key ที่สร้างไว้ (ดังแสดงในรูปที่ 14) ก็จะปรากฏข้อมูล Key ขึ้นมาดังแสดงในรูปที่ 15 ในส่วนนี้หากท่านผู้ใช้ต้องการจะเปลี่ยนชื่อของอุปกรณ์ก็สามารถพิมพ์ชื่อใหม่ด้านบนแล้วก็กดปุ่ม RENAME ได้เลย

รูปที่ 14 หน้าต่างหลังจากเสร็จสิ้นการสร้าง Application key

รูปที่ 15 ข้อมูล Key และ Secret ที่จะนำไปใช้งาน

ข้อมูลที่เราจะนำไปใช้มีอยู่ 2 ส่วน คือ Key กับ Secret เพื่อสะดวกในการใช้งาน ผู้ใช้อาจจะทำการคัดลอกและไปวางไว้ในโปรแกรม Notepad เพื่อความสะดวกในการนำไปใช้งาน เมื่อได้ข้อมูลดังกล่าวแล้ว ขั้นตอนต่อไปก็จะเป็นการเขียน Code ในส่วนของอุปกรณ์ที่ใช้งาน ซึ่งในโครงงานนี้จะใช้ Wi-Fi ESP8266 ที่จะทำการพัฒนาด้วยโปรแกรม Arduino IDE

การเตรียมพร้อมสำหรับ Arduino IDE

การพัฒนาสำหรับโครงงานนี้จะใช้ภาษา C/C++ ในแบบ Arduino โดยใช้เครื่องมือหลัก คือ Arduino IDE เวอร์ชัน 1.6.4 ขึ้นไป ซึ่งจะต้องติดตั้ง plugin เพื่อเพิ่มโมดูล ESP-12E (ติดตั้งผ่าน Boards Manager ของ Arduino IDE) เข้ามาใน Arduino IDE เมื่อเสร็จแล้วเราจะสามารถใช้ Arduino IDE ในการเขียนโปรแกรมบน ESP-12E ได้ โดยที่การใช้งานนั้นก็ไม่ต่างจากการใช้งาน Arduino รุ่นปกติ

รูปที่ 16 หน้าต่างสำหรับดาวน์โหลด Arduino IDE

รูปที่ 17 การเข้าเมนู Preferences ของ Arduino IDE

รูปที่ 18 ที่ตั้งลิงค์สำหรับดาวน์โหลด plugin ให้กับ Arduino IDE

การติดตั้ง plugin เพื่อเพิ่มโมดูล ESP-12E

ติดตั้งซอฟต์แวร์สำหรับ ESP8266 เพิ่มเติมให้กับ Arduino IDE หากท่านยังไม่ได้ติดตั้ง Arduino IDE สามารถโหลดเวอร์ชัน  1.6.13 (เป็นเวอร์ชันที่ผู้เขียนใช้กับโครงงานนี้) ซึ่งสามารถดาวน์โหลดได้ที่นี่เว็บไซต์ https://www.arduino.cc/en/Main/OldSoftwareReleases#previous ดังแสดงในรูปที่ 16

หลังจากที่ดาวน์โหลดมาแล้ว ขั้นตอนต่อไปให้ติดตั้งตามขั้นตอนจนเสร็จสิ้น จากนั้นให้เปิดโปรแกรม Arduino IDE ขึ้นมา ทำการติดตั้ง plugin เพื่อเพิ่มบอร์ด ESP-12E เข้ามาใน Arduino IDE โดยเลือกไปที่เมนู File > Preferences (รูปที่ 17) จากนั้นให้ใส่ที่ตั้งลิงค์ http://arduino.esp8266.com/package_esp8266com_index.json ลงไปที่ช่อง Additional Board Manager URLs ดังแสดงในรูปที่ 18

รูปที่ 19 การเข้าเมนู Boards Manager

รูปที่ 20 การเลือก Type เพื่อหา plugin ของ esp8266 และติดตั้ง

รูปที่ 21 หน้าต่างแสดงว่าการติดตั้ง plugin esp8266 เสร็จเรียบร้อย

รูปที่ 22 ตรวจสอบจะพบว่ามีบอร์ด ESP-12E เพิ่มเข้ามาใน Arduino IDE เรียบร้อยแล้ว

จากนั้นเข้าไปที่เมนู Tools > Board > Boards Manager (ดังรูปที่ 19) จะปรากฎหน้าต่าง Boards Manager ขึ้นมา ที่ช่อง Type เลือก Contributed แล้วจะมี plugin ของ esp8266 ให้เรากด Install ดังแสดงในรูปที่ 20 จากนั้นก็ให้รอจนกระทั่งการติดตั้งเสร็จเรียบร้อย ดังแสดงในรูปที่ 21 จากนั้นทำการเช็คดูว่า Arduino IDE ของเราเพิ่มบอร์ด ESP-12E เข้ามาหรือยัง หากถูกต้องจะมีบอร์ดเพิ่มเข้ามาดังแสดงในรูปที่ 22

รูปที่ 23 ส่วนที่ต้องแก้ไขเพื่อให้สามารถเชื่อมต่อกับ NETPIE

รูปที่ 24 ฟังก์ชัน onMsghandler จะทำงานเมื่อมีการส่งค่าจาก NETPIE

หลักการทำงานในส่วนของ Arduino

หลังจากที่เตรียมความพร้อมสำหรับโปรแกรม Arduino IDE เรียบร้อยแล้ว ก็จะมาดูในส่วนของซอร์สโค้ดที่ใช้กำหนดการทำงานของโมดูล ESP8266 ของเราบ้าง ก่อนอื่นให้ไปดาวน์โหลดไฟล์ทั้งหมดที่ใช้ในโครงงานนี้ที่เว็บไซต์ http://electronics.se-ed.com/download ส่วนของโปรแกรม Arduino นี้จะอยู่ในกระเป๋า Arduino ส่วนที่จะต้องแก้ไขให้โครงงานของเราสามารถเชื่อมต่อกับ NETPIE ได้จะมีดังแสดงในรูปที่ 23

จากรูปที่ 24 จะเป็นฟังก์ชันย่อยที่ใช้สั่งงานและจะบอกสภาวะของเอาต์พุตทางฝั่ง NETPIE ซึ่งในโครงงานนี้จะเป็นการสั่งงานเอาต์พุต 1 ยกตัวอย่างเช่น หากต้องการให้เอาต์พุตเปิด (รีเลย์ทำงาน) คำสั่งที่ส่งมา คือ “ON” แต่ถ้าหากต้องการให้เอาต์พุตปิด (รีเลย์หยุดทำงาน) คำสั่งที่ส่งมา คือ “OFF” ซึ่งจะอ้างอิงกับตัวแปร ALIAS ซึ่งในบทความนี้จะใช้ชื่อ “Semi_Water” ดังรูปที่ 23

เนื่องจากผู้เขียนต้องการให้แอพพลิเคชันบนมือถือเราสามารถเข้าไปดึงเอาสภาวะของเอาต์พุตจาก topic ไปใช้งานได้ ดังนั้นการส่งค่าสภาวะเอาต์พุตจะต้องใช้คำสั่ง microgear.publish() ซึ่งการส่งแบบนี้จะทำให้อุปกรณ์อื่นๆ สามารถเข้ามาดึงค่าจาก topic ไปใช้งานได้

การอ่านค่าระดับน้ำในโครงงานนี้จะมีอยู่ 3 ระดับ ซึ่งจะใช้ขา D6-D8 กำหนดเป็นอินพุตรับแรงดันลอจิกจากเซนเซอร์ ในสภาวะปกติ (ไม่มีน้ำ) ลอจิกที่ส่งออกมาจากเซนเซอร์จะเป็นลอจิกต่ำ (0 โวลต์) ในทางตรงกันข้าม หากเซนเซอร์ตรวจพบว่ามีน้ำอยู่ เซนเซอร์จะส่งลอจิกสูงออกมา (3.3 โวลต์) ESP8266 จะรู้ว่าระดับน้ำอยู่ที่ตำแหน่งไหน อีกส่วนหนึ่งคือ ส่วนสั่งงานเอาต์พุตสำหรับขับรีเลย์ 1 ช่อง จะเชื่อมต่อกับขา D5

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

รูปที่ 25 วงจรสมบูรณ์


รูปที่ 26 ลายวงจรพิมพ์ขนาดเท่าแบบ

รูปที่ 27 ตำแหน่งการลงอุปกรณ์ที่ถูกต้อง

การประกอบ

รูปที่ 27 เป็นตำแหน่งการลงอุปกรณ์ของโครงงานนี้ จะสังเกตว่าลายวงจรนั้นก็มีเพียงด้านเดียวและการลงอุปกรณ์ก็ไม่ยุ่งยาก เนื่องจากอุปกรณ์มีน้อยชิ้นและส่วนมากเป็นอุปกรณ์ที่สามารถบัดกรีได้อย่างไม่ลำบากมากนัก แต่ถึงแม้ว่าอุปกรณ์น้อยชิ้นและการลงอุปกรณ์ก็ไม่ยุ่งยาก แต่ถึงอย่างไรก็ตามการลงอุปกรณ์ก็ควรเริ่มจากตัวที่มีความสูงน้อยที่สุดก่อน อาทิเช่น ตัวต้านทานและไดโอดเป็นต้น จากนั้นจึงไล่เรียงตามลำดับความสูงจนกระทั่งครบทุกตัว ในส่วนของโมดูล ESP-12E ควรต้องใส่ซ็อกเก็ตด้วย และเนื่องจากบอร์ด ESP-12E ที่ซื้อมาจะใส่คอนเน็กเตอร์ IDC แถวเดียวตัวผู้มาแล้ว (ดังรูปที่ 28) ดังนั้นทางฝั่งโครงงานเราจึงต้องใส่ซ็อกเก็ตเป็น IDC ตัวเมีย เพื่อป้องกันความเสียหายที่อาจจะเกิดขึ้น หากลงอุปกรณ์ผิดพลาด

รูปที่ 28 ภาพถ่ายบอร์ด ESP-12E ที่ใช้ในโครงงานนี้

รูปที่ 29 ตัวถังและตำแหน่งขาของเซนเซอร์ระดับน้ำ

เมื่อลงอุปกรณ์จนครบหมดแล้วให้ตรวจสอบแรงดันในวงจรทั้งหมดเสียก่อน โดยให้จ่ายแรงดัน 220VAC เข้าวงจรผ่าน CON4 จากนั้นให้นำโวลต์มิเตอร์มาวัดระหว่างขา VIN เทียบกับ GND จะต้องได้แรงดันเท่ากับ 5 โวลต์ และวัดที่จุด 3.3V เทียบ GND หากถูกต้องแรงดันที่ได้จะต้องเท่ากับ 3.3V ถ้าหากแรงดันเป็นไปตามที่กล่าวไว้ก็ให้อัพโหลดโปรแกรมที่โหลดมาจากเว็บไซต์ทางวารสารเราก่อนหน้านี้ให้กับ ESP-12E ได้เลย

รูปที่ 30 หน้าต่าง Serial Monitor แสดงข้อมูลการทำงาน

เมื่ออัพโหลดโปรแกรมเสร็จให้เชื่อมต่อเซนเซอร์วัดน้ำฝนทั้ง 3 ตัวเข้ากับวงจร (ดังรูปที่ 30) จากนั้นให้เปิดหน้าต่าง Serial Monitor เพื่อดูสถานการณ์ทำงานว่าสามารถเชื่อมต่อกับ NETPIE ได้หรือไม่ ก่อนอื่นให้ตั้ง Baud rate เท่ากับ 115200 หากการเชื่อมต่อกับ NETPIE สำเร็จ จะขึ้นข้อความดังรูปที่ 30 และจะสังเกตว่า LED บนบอร์ด ESP-12E จะติดสว่าง ซึ่งนั่นแสดงว่าโครงงานเราสามารถเชื่อมต่อได้แล้ว ในขั้นตอนนี้อย่าพึ่งปิดเพราะว่าเราต้องการให้มีข้อมูลส่งไปยัง NETPIE เรื่อยๆ เพื่อให้การกำหนดในส่วนของ Freeboard ทำได้ง่ายขึ้น ดังจะกล่าวในภายหลัง

รูปที่ 31 เลือกเมนู FREEBOARDS

รูปที่ 32 กดปุ่ม ADD เพื่อเพิ่ม DATASOURCES งานของเรา

การตั้งค่า NETPIE Freeboard

Freeboard เป็น Web Application ที่ทำให้เราสามารถสร้าง Dashboard (แดชบอร์ด) สำหรับสั่งงานและมอนิเตอร์งาน IoT ของเรา กล่าวคือ ที่บอร์ดสามารถวางปุ่มกด, สวิตช์เลื่อน ไว้ใช้สำหรับควบคุมอุปกรณ์ หรือวางเกจ (Gauge) ไว้สำหรับแสดงผลข้อมูลต่างๆ จากอุปกรณ์ระบบ IoT ของเรา นอกจากนี้ยังสามารถนำข้อมูลที่ได้มาไปแสดงผลเป็นกราฟและสามารถปรับแต่งได้ตามใจชอบได้ง่ายๆ เพียงแค่ตั้งค่าให้ถูกต้องและใส่คำสั่งอีกนิดหน่อย ก็สามารถทำงานได้แล้ว โดยที่ท่านไม่จำเป็นต้องเขียนเป็น Webpage เลย และที่สำคัญ คือ ข้อมูลนั้นมีการอัพเดทแบบ real-time มีความเสถียรและเชื่อถือได้ อีกทั้งยังและเป็น Open-Source ซึ่งทำให้นักพัฒนาสามารถต่อยอดให้อีกด้วย NETPIE Freeboard สามารถใช้ Browser เปิดไฟล์ index.html ที่ติดตั้งในเครื่องแบบ Local ซึ่งโดยส่วนตัวผู้เขียนเองคิดว่าไม่ค่อยสะดวกมากนัก ปัจจุบันทาง NETPIE ได้เพิ่มเมนู Freeboard บนหน้าเว็บของ NETPIE ให้แล้ว ดังนั้นจึงสะดวกมากๆ ต่อการใช้งาน ในบทความนี้ผู้เขียนจะอ้างอิงกับการใช้งาน Freeboard บนหน้าเว็บของ NETPIE และเพื่อไม่เป็นการเสียเวลาเริ่มสร้าง NETPIE Freeboard กันเลยครับ

เมื่อ Login เข้าสู่ระบบ NETPIE Account ได้เป็นที่เรียบร้อย ให้เลือกไปที่เมนู RESOURCES -> FREEBOARDS ดังรูปที่ 30 เสร็จแล้วให้คลิกเครื่องหมาย + เพื่อสร้าง Freeboard ขึ้นมาใหม่ โดยให้ทำการตั้งชื่อ Freeboard เมื่อได้แล้วให้กดปุ่ม CREATE และทำการปรับแต่งค่าใน NETPIE Freeboard ตามรายละเอียดที่อธิบายในลำดับถัดไป

รูปที่ 33 เลือก TYPE เป็น NETPIE Microgear

รูปที่ 34 ใส่ข้อมูลสำหรับ Datasource ซึ่งประกอบด้วย

รูปที่ 35 แสดงเวลาล่าสุดที่โครงงานเราส่งข้อมูลเข้ามา

กดปุ่ม ADD (ดังรูปที่ 32) เป็นเมนูสำหรับเพิ่ม Datasource ที่เป็นแหล่งข้อมูลที่จะเชื่อมต่อเพื่อดึงออกมาแสดง เป็นหัวใจหลักเลยนะครับ ขั้นตอนนี้สำคัญมากหากกำหนดผิดก็จะไม่สามารถแสดงค่าใดๆ จาก NETPIE ได้เลย แน่นอนว่าเราจะดึงข้อมูลจาก NETPIE ดังนั้นการเลือก Datasource ต้องเลือกเป็น NETPIE Microgear ดังแสดงในรูปที่ 33 จากนั้นให้ใส่ข้อมูลสำหรับ Datasource ซึ่งประกอบด้วย

  • NAME คือ ชื่อเรียก Datasource ที่ใช้อ้างอิง (ไม่เกิน 16 ตัวอักษร) ในโครงงานนี้ผู้เขียนกำหนดเป็น Semi Water Level

  • APP ID คือ App ID ที่ได้สร้างผ่านหน้าเว็บ https://netpie.io/app ในตัวอย่างของโครงงานนี้ คือ SemiWaterLevelNetpie

  • KEY คือ Key ที่ได้จากการสร้าง App Key บนเว็บ NETPIE

  • SECRET คือ Secret ของ Key บนเว็บ NETPIE

  • SUBSCRIBED TOPIC คือ Topic ที่ใช้สาหรับการรับส่งข้อมูลที่อยู่ภายใน APPID นั้นๆ กรณีนี้ใช้เป็น /# มีความหมายว่า รับข้อความจากทุก Topic

เมื่อกรอกข้อมูลทุกอย่างครบเรียบร้อย (ดังรูปที่ 34) แล้วให้กดปุ่ม SAVE เมื่อได้แล้วจะเห็นเวลาขึ้นตรงส่วน Last Updated ดังแสดงในรูปที่ 35 หากไม่ขึ้นแสดงว่าโครงงานของเรายังไม่สามารถเชื่อมต่อกับ NETPIE ได้ให้ย้อนกลับไปเช็คดูความถูกต้องอีกครั้งหนึ่ง หากถูกต้องให้ทำขั้นตอนต่อไปได้เลย

จากนั้นให้ทำการเพิ่ม Panel หรือส่วนที่ใช้แสดงค่าระดับน้ำและสภาวะเอาต์พุตโครงงานของเรา ด้วยการคลิกที่ ADD PANE จะปรากฏ Panel เพิ่มขึ้นมาด้านล่าง ให้กดเครื่องหมาย + และเลือกชนิดของ Widget ที่ต้องการ ซึ่งโครงงานเราใช้ 2 แบบ คือ Gauge และ Indicator Light ตามตัวอย่างในรูปที่ 37

รูปที่ 36 กดปุ่ม ADD PANE เพื่อเพิ่ม PANE แสดงระดับน้ำและสภาวะเอาต์พุต

รูปที่ 37 เลือก Widget แบบ Gauge สำหรับแสดงระดับน้ำ

รูปที่ 38 เลือก Datasource สำหรับแสดงระดับน้ำ

รูปที่ 39 เลือกรายชื่อ Datasource ที่สร้างไว้

จากรูปที่ 38 เป็นการเลือก Widget แบบ Gauge สำหรับแสดงระดับน้ำ ให้ใส่ TITLE เป็นชื่อที่ต้องการ โดยให้สอดคล้องกับสิ่งที่จะแสดงเพื่อความเข้าใจในการใช้งาน ซึ่งในบทความนี้จะนำไปใช้แสดงระดับน้ำ ผู้เขียนจึงตั้งให้เป็น Water Level ขั้นตอนต่อไปให้ตั้งค่าส่วน VALUE (ส่วนนี้ก็สำคัญ) ให้คลิกที่ + DATASOURCE จะขึ้นรายชื่อของ Datasource ที่ได้สร้างไว้ ในส่วนของรายชื่อ Datasource จะถูกสร้างให้เองโดยอัตโนมัติหากโครงงานของสามารถเชื่อมต่อเข้ากับ NETPIE ได้ (ดังรูปที่ 39) ทำให้เราสามารถเลือกรายชื่อที่โผล่ขึ้นมาได้อย่างง่ายดาย แต่ถ้าในส่วนนี้ไม่มีรายชื่อแสดงว่าบอร์ด ESP-12E ยังไม่สามารถเชื่อมต่อกับ NETPIE ได้ ท่านสามารถพิมพ์เพิ่มเติมได้ตาม Format ดังรูปที่ 40 ได้ หากการตั้งค่าสำเร็จ จะได้ข้อมูลดังรูปที่ 41 ซึ่งในรูปผู้เขียนได้ทดสอบให้โครงงานส่งข้อมูลระดับน้ำสูงสุดมาที่ NETPIE

รูปที่ 40 Datasource สำหรับแสดงระดับน้ำ

รูปที่ 41 Gauge แสดงระดับน้ำ

รูปที่ 42 Widget แบบ Indicator Light แสดงสภาวะเอาต์พุต

รูปที่ 43 กำหนดเงื่อนไข JS EDITOR เพื่อแสดงสภาวะเอาต์พุต

รูปที่ 44 หน้าเว็บแสดง Widget การแสดงระดับน้ำและสภาวะเอาต์พุต

การตั้งค่าเป็นการเลือก Widget สำหรับแสดงสถานะเอาต์พุตผู้เขียนเลือกใช้แบบ Indicator Light ซึ่งเป็นลักษณะเหมือนหลอดไฟ LED ติดหรือดับตามสภาวะเอาต์พุต การตั้งค่าจะคล้ายๆ กับแบบ Gauge โดยให้เลือกรายชื่อ Datasource ที่มีดังรูปที่ 42 แต่ส่วนที่แตกต่างจาก Widget แบบ Gauge คือ สภาวะของเอาต์พุตที่ส่งมายัง NETPIE จะเป็นตัวอักษร (String) คือ 1 และ 0 ดังนั้นจึงจำเป็นต้องกำหนดเพิ่มเติมในส่วน JS EDITOR โดยเพิ่มเงื่อนไข==“1” (ดังรูปที่ 43) เพื่อตรวจสอบตัวอักษร หากพบว่าโครงงานส่ง 1 มายัง NETPIE นั่นแสดงว่าขณะนั้นเอาต์พุตทำงานอยู่ Indicator Light ของเราจะติดสว่าง ในทางตรงกันข้ามถ้าส่ง 0 มา Indicator Light จะดับไป แสดงถึงว่าเอาต์พุตไม่ทำงานนั่นเอง เมื่อตั้งค่า Widget เสร็จแล้วจะได้หน้าตาดังรูปที่ 44

รูปที่ 45 หน้าเว็บการสร้าง Project ใหม่บน App Inventor 2

รูปที่ 46 หน้าตาแอพพลิเคชันที่สร้างบน App Inventor 2

สร้างแอพพลิเคชั่น Android ด้วย App Inventor 2

App Inventor 2 เป็นเว็บแอพพลิเคชันที่สร้างโดย Google ร่วมมือกับสถาบัน MIT แต่ภายหลัง Google ถอนตัว แล้วให้สถาบัน MIT เป็นผู้พัฒนาต่อเอง โดยเน้นไปในทางด้านการศึกษา ให้ผู้ที่ไม่มีความรู้ทางด้านภาษา Java สามารถเขียนแอพพลิเคชัน Android ได้ โดยการเขียนจะอยู่ในรูปแบบ Block ทำให้เข้าใจได้ง่าย

การใช้งานให้เข้าไปที่เว็บไซต์ http://ai2.appinventor.mit.edu/ จะขึ้นหน้าต่างการ Login ขึ้นมา หากท่านมี Account ของ Gmail อยู่แล้วสามารถทำการ Login ได้เลย ให้กดยอมรับข้อตกลงต่างๆ ให้เรียบร้อย เสร็จแล้วจะเข้ามาที่หน้าต่างดังรูปที่ 45 กดที่ปุ่ม Start new project และตั้งชื่อ project ที่เราต้องการ

จากรูปที่ 46 ผู้เขียนได้ออกแบบหน้าตาของแอพพลิเคชันไว้ให้มีอยู่สองส่วน คือ ส่วนอินพุตและเอาต์พุต การแสดงส่วนอินพุตจะเป็นการแสดงระดับน้ำและสภาวะเอาต์พุต ในส่วนการแสดระดับน้ำจะมีทั้งหมด 4 ระดับ สูง, กลาง, ต่ำ และไม่มีน้ำ และอีกส่วน คือ การแสดงสภาวะเอาต์พุตจะเป็นภาพคล้ายหลอด LED หากเอาต์พุตทำงานจะเป็นสีเขียว ตรงกันข้ามหากไม่ทำงานจะเป็นสีเทา สุดท้ายเป็นส่วนควบคุมเอาต์พุตจะเป็นปุ่ม ON และ OFF สำหรับสั่งเปิดและปิดเอาต์พุต

การดึงค่าระดับน้ำและสถานะเอาต์พุตมาจาก NETPIE จะต้องกำหนด Url ที่ใช้สำหรับเข้าถึง API บน NETPIE จากรูปที่ 47 เป็น Blocks ในส่วนการดึงค่าระดับน้ำมาจาก NETPIE จะมีส่วนประกอบทั้งหมด 3 ส่วน คือ การกำหนด Uri, Clock Timer สำหรับกำหนดให้แอพพลิเคชันของเราเข้าไปดึงข้อมูลตาม Url ที่กำหนดไว้ ซึ่งเวลานี้ถูกกกำหนดไว้ที่ 3000 ไมโครวินาที (3 วินาที) ซึ่งกำหนดใน Properties ของคอมโพเนนท์ Clock1 เมื่อดึงข้อมูลมาเสร็จก็ทำการตรวจสอบว่าค่าที่ได้รับมาเป็นค่าอะไรระหว่าง 0-3 ซึ่งถ้าเป็น 0 คือ ไม่มีระดับน้ำ, 1 คือระดับน้ำต่ำ, 2 คือน้ำระดับกลางและ 3 คือระดับน้ำสูงสุด

การแสดงสถานะเอาต์พุตจะคล้ายๆ กับการดึงค่าระดับน้ำดังรูปที่ 48 แต่การตรวจสอบสถานะระหว่างเปิดกับปิดจะเป็น 0 กับ 1 ซึ่งถ้าเป็น 0 คือ เอาต์พุตไม่ทำงาน และถ้าเป็น 1 คือ เอาต์พุตกำลังทำงาน

การส่งค่าไปยัง NETPIE เพื่อกำหนดสภาวะเอาต์พุตจะแตกต่างกับการดึงค่ามาแสดงอยู่เล็กน้อย ส่วนสำคัญที่เราจะต้องแก้ไข คือ ตำแหน่ง Url ของ API ตัวเอาต์พุต ในโครงงานนี้ผผู้เขียนใช้ Component Web2 มาใช้เชื่อมต่อกับ NETPIE โดยกำหนดค่าตำแหน่ง API ที่เมนู Properties ดังแสดงในรูปที่ 49 จากนั้นให้มากำหนดส่วน Blocks ซึ่งเป็นการกำหนด Event เมื่อเกิดการกดปุ่ม ON หรือ OFF แอพพลิเคชั่นจะส่งข้อความ ON หรือ OFF ไปยังตำแหน่ง API ที่กำหนดไว้ดังรูปที่ 50

รูปที่ 47 Block บน App Inventor 2 ส่วนรับค่าแสดงระดับน้ำ

รูปที่ 48 Block บน App Inventor 2 ส่วนรับค่าแสดงสภาวะเอาต์พุต

รูปที่ 49 กำหนด Uri สำหรับส่งค่าเอาต์พุตไปยัง NETPIE

รูปที่ 50 Block บน App Inventor 2 ส่วนส่งค่าเพื่อกำหนดเอาต์พุต

รูปที่ 51 หน้าจอแอพพลิเคชันบนโทรศัพท์มือถือ Android

 

เมื่อเสร็จขั้นตอนทั้งหมดแล้วก็ทดสอบการเปลี่ยนแปลงระดับน้ำทั้ง 4 ระดับลองดูว่าจะเป็นไปตามที่กำหนดไว้หรือไม่ และทดสอบสั่งงานเอาต์พุตโดยการกดปุ่ม ON หรือ OFF บนแอพพลิเคชัน ซึ่งการทำงานอาจจะช้ากว่าการกดสักหน่อยขึ้นอยู่กับความเร็วของอินเทอร์เน็ตของท่านด้วย เพียงเท่านี้ท่านจะสามารถดูระดับน้ำและสั่งงานเปิด-ปิดปั๊มน้ำผ่านอินเทอร์เน็ตได้แล้ว


รายการอุปกรณ์

ตัวต้านทาน ¼ วัตต์ +/-1%

R1-      470       1         ตัว

R2-      120        1      ตัว

R3-         1k        1         ตัว

R4-        10          1         ตัว

R5-        220       1          ตัว

ตัวเก็บประจุ

C1-       100uF       1       ตัว

อุปกรณ์สารกึ่งตัวนำ

IC1-        LTV817      1      ตัว

LED1- LED2-   แอลอีดีสีแดง 3 มม.       2        ตัว

Q1-      2N4401          1           ตัว

D1-     1N4001         1         ตัว

อื่นๆ

ESP1-    บอร์ด ESP-12E         1         ตัว

RY1-    รีเลย์ 5V 1 คอนแท็กต์     1        ตัว

CON1-CON3-     คอนเน็กเตอร์ 3 ขา         3           ตัว

CON4-CON5       เทอร์มินอลบล็อก 2 ขา         2        ตัว

SENSOR1-SENSOR3-   เซนเซอร์ระดับน้ำ            3        ตัว

หมายเหตุ ซอร์สโค้ดทั้งหมดที่ใช้ร่วมกับโครงงานสามารถดาวน์ได้ที่เว็บไซต์ http://electronics.se-ed.com/download


 

 

Leave a Comment