[IoT] NETPIE Freeboard [Part2]

NETPIE Freeboard สำหรับผู้เริ่มต้น
How-to Guide for NETPIE Freeboard's beginners 

PART2: การทดลองเปิดปิดไฟผ่าน NETPIE Freeboard

เกริ่นนำ...

     เอาหละครับ ที่ผมเขียนอธิบายไว้อย่างยาวเหยียดใน PART1 นั้นอาจจะทำให้พอเข้าใจได้บ้างแล้ว

แต่สำหรับคนที่ยังไม่เข้าใจ ผมเชื่อว่าหลังการทดลองนี้ จะทำให้เข้าใจได้มากขึ้นแน่นอนครับ 555+

ในการทดลองนี้ เราจะสร้างชุดจำลอง Smart Home ที่ใช้เปิดปิดหลอดไฟในบ้านขึ้นมานะครับ

โดยใช้หลอด LED เป็นตัวแทนของหลอดไฟที่จะไปควบคุมจริงๆ ถ้าพร้อมแล้วก็เริ่มเลยนะครับ...

STEP1: เตรียมอุปกรณ์กันก่อน (สร้าง Things และอัพโหลดโค้ด)

1.บอร์ดไมโครคอนโทรลเลอร์ NodeMCU V2 (ESP-12E)

เป็นหนึ่งบอร์ดที่ผมเชื่อว่ามือใหม่ทุกคนน่าจะมีติดมือกันอยู่แล้วนะครับ

เพราะโดยส่วนตัวผมคิดว่าเป็นบอร์ดที่่ใช้งานง่ายที่สุด และราคาก็ไม่แพงมากครับผม

2.โปรโตบอร์ด ครับ หนึ่งในอุปกรณ์สุดคลาสสิคที่น่าจะมีติดมือกันทุกคน

3.และสุดท้ายคือ หลอด LED ครับ ในที่นี้ผมใช้เป็นหลอดเล็ก สีขาวนะครับ

โดยอุปกรณ์ทั้งหมด ผมจะต่อเข้าด้วยกันตามภาพนี้นะครับ

หลังจากนั้นก็ทำการสร้าง KEY ชื่อ TestLED ไว้ใน NETPIE 

และทำการนำมาใส่ค่าในส่วนที่ผมคอมเมนต์ไว้ (7 บรรทัดนั้น) ให้ถูกต้อง

จากนั้นก็โหลดโค้ดลงบนบอร์ดได้เลยครับ

โค้ด Freeboard_TestLED

สำหรับใครที่ยังไม่ได้เตรียม Software สำหรับการใช้งาน Arduino และ NodeMCU V2

ตามไปดูขั้นตอนและวิธีการเซ็ทอัพโปรแกรมต่างๆที่ลิงค์นี้นะครับที่ลิ้งค์นี้นะครับ 

Smart Home Part 2: การเตรียม Software สำหรับ NodeMCU V2

เมื่ออัพโหลดลงแล้ว ก็ให้ลองเปิด Serial Monitor (เลือก Baud Rate เป็น 115200)

ดูครับว่าบอร์ดของเรานั้นเชื่อมต่อเรียบร้อยหรือไม่ ตามรูปด้านล่างนี้ครับ 

ถ้าหากไม่มีปัญหาอะไรแล้วก็เป็นอันว่าเรียบร้อยครับ เพียงเท่านี้เราก็จะได้ Thing 

ที่มีหลอด LED หนึ่งหลอด และพร้อมที่จะทดลองการเปิดปิดผ่าน NETPIE Freeboard แล้วครับ

STEP2: ทีนี้มาดูบน Freeboard กันบ้าง

ให้ทำการเปิด Freeboard ที่เราสร้าง Datasource ไว้ใน Part แรกขึ้นมาครับผม

จากนั้นก็ให้กดปุ่ม ADD PANE ตามภาพนี้ครับ

จากนั้นก็จะได้แผง (Pane) มาหนึ่งแผงครับ ซึ่งเราสามารถเพิ่ม Widgets 

(สำหรับแสดงผล/ควบคุมต่างๆ) ลงบนแผงที่สร้างขึ้นมานี้ครับ

เมื่อกดแล้วก็จะขึ้นหน้ามาให้เลือกครับว่าเราจะเพิ่มอะไรลงไป ในที่นี้ผมจะสร้างปุ่มขึ้นมา

เพื่อทำการเปิดปิดหลอดไฟ LED ก่อนนะครับ ก็จะทำการเลือกเป็น Button ครับผม

จากนั้นก็จะมาถึงจุดไคล์แมกซ์ละครับ ก็คือการใส่ข้อมูล และคำสั่งให้กับปุ่มๆนี้ 

โดยข้อมูลที่ต้องใส่แต่ละช่องก็มีรายละเอียดดังนี้ครับผม 

โดยปุ่มแรกที่ผมจะทำคือ ปุ่มเปิดไฟครับ โดยผมจะมีการใส่ข้อมูลต่างๆดังนี้ครับ

ขออธิบายในส่วนของคำสั่ง Javascript นิดนึงนะครับ อย่างที่บอกไปก่อนหน้านี้

ใน Part ที่แล้วครับว่าจะมีการใช้คำสั่ง JavaScript ซึ่งมีรูปแบบคำสั่งเป็นแบบนี้นะครับ

microgear["ชื่อ Microgear Reference"].chat("ชื่อผู้รับ(Alias)","ข้อความ")

โดยในที่นี้ เรากดเปิดไฟจาก Freeboard ฉะนั้น คนที่สั่งก็คือ Freeboard ครับ

ดังนั้น ชื่อ Microgear Reference ที่ใส่ในคำสั่ง จึงเป็นชื่อเดียวกับ

Microgear Reference ที่เราตั้งตอนสร้าง Datasource ครับผม

ส่วน ชื่อผู้รับ(Alias) นั้นจะเป็นไปตามที่เราตั้งไว้ใน Code ตอนเขียนโปรแกรมใน Arduino ครับ

และ ข้อความ ก็จะแล้วแต่เงื่อนไขครับ เช่นในที่นี้ในโค้ดมีการรอฟังคำสั่งคือ ON กับ OFF ครับ

และนี่คือที่มาทั้งหมดของคำสั่ง Javascript ที่อยู่ในรูปครับ

microgear["freeboard_mg1"].chat("testled","ON")

ทีนี้พอเข้าใจรูปแบบคำสั่งแล้วก็ให้ทำการกด SAVE เพื่อบันทึกค่าครับผม

จากนั้นก็จะได้ปุ่มเปิดไฟสีเขียวสวยงามอร่ามตาครับ เมื่อลองกดดูไฟ LED ที่บอร์ดของเรา

ก็จะติดขึ้นมาครับ (สำหรับบางคนหลังสร้างปุ่มก็อาจจะติดเองเลย เป็นอาการปกตินะครับ)

และเมื่อกดปุ่มจะเห็นว่ามีการอัพเดทของข้อมูลบน Datasource ด้วยครับผม 

(ถ้าไม่เป็นไปตามนี้แสดงว่ามีขั้นตอนบางอย่างผิดไป ให้ลองย้อนทำใหม่และค่อยๆแก้ปัญหานะครับ)

ทีนี้ก็ให้ทำการกดที่ปุ่ม [+] ของแผงนี้เหมือนเดิม เพื่อสร้างปุ่มขึ้นมาอีกปุ่มนึงครับผม

ทีนี้ก็ทำตามขั้นตอนเดิมครับ เลือก Type เป็น Button 

แล้วกรอกข้อมูลให้เป็นปุ่มปิดครับ โดยของผมจะสร้างเป็นสีแดงนะครับ

ตรงส่วน Javascript ก็กรอกเหมือนเดิมเลยครับ 

แต่เปลี่ยนส่วนสุดท้ายจาก .chat("testled","ON") ให้เป็น .chat("testled","OFF") ครับ

หลังจากกด SAVE เราก็จะได้ปุ่มปิดไฟเพิ่มมาอีกปุ่มครับ 

ทีนี้เราก็จะสามารถเปิดปิดไฟผ่าน NETPIE Freeboard ได้แล้วครับ

ทีนี้เพื่อความสมบูรณ์แบบนะครับ เราจะมาสร้าง หลอดไฟแสดงสถานะ (Indicator Light)

เพื่อให้รู้ว่า LED ของเรานั้นเปิดปิดตามที่สั่งไปหรือยังนะครับ โดยจากโค้ดใน Arduino

ในส่วนของช่วงประมวลผลคำสั่ง จะมีคำสั่งชุดนี้อยู่ 

สำหรับการทำงานของคำสั่งนี้ก็คือ เมื่อบอร์ดได้รับข้อความว่า ON หรือ OFF มาแล้ว

ก็จะทำการเปิดหรือปิด LED ตามคำสั่งที่ได้รับมา และหลังจากเปิดหรือปิดเรียบร้อยแล้ว

ก็จะมีการ chat ไปบอกบน Freeboard ด้วยว่าสถานะปัจจุบันเป็น ON หรือ OFF อยู่ครับ

โดยจะมีการส่งคำสั่งไปยัง Alias ที่มีชื่อว่า testledstatus ครับผม 

ซึ่งจะเป็นชื่อของหลอด Indicator ที่เรากำลังจะไปสร้างบน NETPIE Freeboard นั่นเองครับ

สำหรับการาสร้างหลอดไฟแสดงสถานะบน Freeboard ก็ให้ทำตามนี้นะครับ

เริ่มจากกดปุ่ม [+] บนแผงที่มีปุ่มของเราเหมือนเดิมครับผม

ทีนี้ก็ให้เลือก Type เป็น Indicator Light (ไฟแสดงสถานะ) ครับผม

แล้วทำการกรอกรายละเอียดต่างๆ โดยแต่ละช่องมีรายละเอียดดังนี้ครับ

ช่อง VALUE นั้นจะเป็นเงื่อนไขนะครับ โดยหลอดไฟจะติดเมื่อเงื่อนไขในช่อง VALUE 

มีค่าเป็นจริงสำหรับการใส่ค่าในช่อง VALUE เพื่อสร้างเงื่อนไขก็จะมีขั้นตอนดังนี้ครับ 

(โดยผมจะเริ่มตั้งแต่ตอนที่ช่องนี้ยังว่างอยู่เลยนะครับ)

1. คลิ๊กที่ปุ่ม + Datasource ข้างหลังช่อง VALUE ครับ

2. จากนั้นจะมีข้อมูลปรากฏขึ้นมาในช่องโดยอัตโนมัติครับ แล้วจะมีรายชื่อ Datasource 

ให้เราเลือกที่ด้านล่าง ก็ให้ทำการเลือก Datasource ที่เราสร้างไว้ครับผม

3.หลังจากคลิ๊กเลือก Datasource ในขั้นตอนที่แล้ว ก็จะมีไดเรกทอรี่ของข้อมูลให้เลือกครับ

โดยในตอนนี้เราจะเห็น Alias ทั้งสองอันของเรา โดย testled นั้นเป็นชื่อ Alias ของบอร์ดเราที่ต่อ

LED ของจริงอยู่ในตอนนี้ ซึ่งข้อมูลจะถูกส่งไปมาด้วยปุ่มเปิดปิดที่เราสร้างไปก่อนหน้านี้ครับ

ส่วน testledstatus เป็นชื่อ Alias ลอยๆที่เราให้บอร์ดเรา chat กลับมาบอกครับ โดยในที่นี้

เราเหมือนกำลังจะมอบ Alias นี้ให้เป็นของหลอด Indicator Light นี้นั่นเองครับ

ก็ให้ทำการคลิ๊กเลือกอันที่เป็น testledstatus ครับผม

4.ทีนี้ก็จะมีคำสั่งข้อมูลขึ้นมาจนเต็มกรอบช่องนี้เลยครับ 

เราก็จะทำการกดเพื่อเข้าแก้ไขข้อมูล ด้วย .JS EDITOR โดยการคลิ๊กที่ปุ่มนี้ครับ

เมื่อกดแล้ว NETPIE Freeboard ก็จะนำพาเรามาสู่หน้า JS Editor ครับ 

ซึ่งเราจะเห็น ข้อมูลของเราในช่อง VALUE แบบเต็มๆแบบนี้ครับ 

ซึ่งข้อมูลที่เห็นทั้งบรรทัดนี้คือตัวแปรตัวหนึ่ง

ที่จะมีค่าเป็น ON หรือเป็น OFF ก็ตามที่บอร์ด chat กลับมาครับ

(คือค่าของ testledstatus นั่นเองครับ)

5. แล้วอย่างที่บอกไปว่า ข้อมูลที่เราจะกรอกในช่อง VALUE นั้นเป็นเงื่อนไข 

และหลอด Indicator Light นี้จะติดขึ้้นเมื่อเงื่อนไขในช่องเป็นจริง ดังนั้น

ผมก็จะทำการทำให้อยู่ในรูปแบบเงื่อนไข โดยการใส่ == "ON" เข้าไปครับผม

อธิบายก็คือ เมื่อเรากดปุ่มเปิดไฟ ปุ่มจะ chat ไปหาบอร์ดว่า ON 

แล้วบอร์ดก็จะเปิดไฟให้เราครับ (testled จะมีค่าเป็น "ON") แล้วทีนี้พอบอร์ดเปิดไฟ

เสร็จแล้ว ก็จะมีการ chat กลับมาในตัวแปร testledstatus ว่า ON แล้ว 

(จะทำให้ testledstatus มีค่าเป็น "ON")

ซึ่งเมื่อ testledstatus มีค่าเป็น "ON" นั้นจะทำให้เงื่อนไขที่เรากรอกนี้เป็นจริง 

(อย่าลืมนะครับว่าที่เราแก้ไขอยู่นี่คือข้อมูลในช่อง VALUE ของ Indicator Light)

เมื่อเงื่อนไขในช่อง VALUE เป็นจริง ก็จะทำให้ลอด Indicator Light ติดครับผม

กลับกัน เมื่อเป็นเท็จ (เราสั่งปิดไฟ ค่ากลายเป็น "OFF") 

หลอด Indicatior Light ก็จะดับครับผม

เมื่อเพิ่มข้อมูลเสร็จเรียบร้อยแล้วก็กด CLOSE เลยครับ

พอลองเลื่อนดูจะเห็นว่าข้อมูลในช่อง VALUE นั้นถูกเพิ่ม == "ON" ครับ

คราวหลังจะเลื่อนมาเติม == "ON" ตรงนี้เลยไม่ต้องเข้า .JS Editor ก็ได้นะครับ

แต่เพื่อความดูง่ายและเพื่อให้เห็นข้อมูลในช่องทั้งหมด หรือในอนาคตบางที

อาจจะต้องใส่ข้อมูลมากกว่า 1 บรรทัด การกดเข้า .JS Editor 

จะทำให้เรากรอกข้อมูลได้ง่ายกว่าครับ ก็ให้ทำการกด SAVE เลยครับผม 

เป็นอันเสร็จสิ้นกับการสร้าง หลอดไฟแสดงสถานะ (Indicator Light) ครับผม

ลองกดเปิดปิดหลอดไฟผ่านปุ่มแล้วดูผลลัพธ์ที่เกิดขึ้นได้เลยครับ 

ซึ่งผลลัพธ์ของผมก็ตามวีดีโอนี้เลยครับ

เป็นไงกันบ้างครับ กับการทดลอง เปิดปิดไฟ LED ผ่าน NETPIE Freeboard

สำหรับใน Part นี้ผมอาจจะเขียนละเอียด และใช้รูปเปลืองไปหน่อยนะครับ 555+

แต่ก็คือมีบางจุดที่อาจจะซับซ้อนและเข้าใจยากหน่อย ก็เลยต้องอธิบายยาวๆครับ

หวังว่าผู้ติดตามทุกคนที่ทำตาม จะได้ผลลัพธ์การทดลองที่สมบูรณ์เหมือนในคลิปผมนะครับ

อ่านต่อ PART 3: Smart Sensor