Node-RED DashBoard ทำเว็บด้วย Node-RED โดยไม่เขียนโค้ดสักตัว ฉบับปี 2018 !
อยากทำ DashBoard
แต่ขี้เกียจเขียน Code ….
Node-RED จัดให้
Node-RED Dashboard คืออะไร ?
หน้าใช้สำหรับควบคุม/สังเกตุ ค่าต่างๆที่เราสนใจ ไม่ว่าจะเป็นการสั่งงานผ่าน MQTT , การพล็อตกราฟเพื่อแสดงให้เห็นถึงความเปลี่ยนแปลง , การแสดงสถานะของอุปกรณ์ต่างๆ
ที่สำคัญคือ …
มัน Real Time ไม่ต้องรีเฟรซหน้าเว็บเวลามีการอัพเดท
สิ่งที่คุณต้องเตรียมตัว
- อ่านบทความ Node-red ก่อนจ้า
2. ความคิดและจินตนาการสร้างสรรค์ (ให้เพื่อบอร์ดของคุณสวยงาม)
เริ่ม !
- เปิดหน้า CMD แล้วพิมพ์คำสั่ง
npm install node-red-dashboard
2. เปิด Node-RED พิมพ์ node-red ในหน้า cmd ต่อได้เลย
3. เข้า node-red ด้วยการพิมพ์ url : http://localhost:1880 ลองเลื่อนแถบด้านซ้ายมาด้านล่างสุด ก็จะเจอหมวดหมู่ใหม่คือ dashboard
4. ลาก button มาต่อกับ debug ได้เลยครับ
5. เข้าไปตั้งค่าของตัว button จะเจอหน้าจอแบบนี้
5.1 ตั้งค่า Group โดยการคลิกที่ปากกา
ตั้งชื่อ : Home
Tab : กดที่ปากกา เพื่อตั้งค่าอีก
width : 6 (เยอะกว่านี้ไม่ค่อยจะสวยเท่าไร)
5.2 ในหน้า Tab กด Add
5.3 ก็จะได้การตั้งค่าเหมือนในรูป
6. จะอธิบายทีละบรรทัดนะครับ
Group : จะเหมือนกับ html <div> คือการแบ่งเป็นกรุ๊ป แบ่งบรรทัดกัน
Size : ขนาดของ button
Icon : การตั้งค่าพิเศษ (พิมพ์เป็นโค้ด)
Label : ชื่อของ node ที่จะแสดงใน node-red dashboard
Colour : สีของ button (รหัสสีเหมือนใน html)
Background : รูป/สี background (เขียนเป็น html)
และส่วนสำคัญของบล็อคนี้เพราะ tutorial นี้จะไม่มีการเขียนโค้ด เพราะฉนั้นเราจะโฟกัสแค่
Payload : เมื่อมีการกดปุ่มนี้จะให้ส่งอะไรไปยังปลายทาง มีทั้ง Boolean String Json
Topic : หัวข้อในการส่ง ใช้ในการแยกแยะว่าปุ่มไหนเป็นตัวส่ง
ผมจะตั้งค่า button ทั้ง 2 ปุ่มแบบนี้นะครับ
7.จากนั้นกด Deploy บนขวาเลยครับ button ของเราจะพร้อมใช้งานและหน้าตาประมาณนี้
8. จากนั้นไปที่ dashboard ของเรา โดยการคลิกที่ปุ่ม Dashboard ด้านขวา (ข้างล่าง deploy) หรือ http://localhost:1880/ui
9. จะเจอหน้า dashboard ของเรา
10. ลองกด Button True แล้วกลับมาที่จอ node-red หน้า debug เราก็จะเจอ boolean true ถูกส่งมาจาก true but
ลองกด false อีกสักครั้ง ผลลัพธ์ก็จะออกมาตามที่เราตั้งค่าไว้
ทีนี้เราจะเอา node-red dashboard + mqtt นะครับ ให้เราลาก node mqtt มาวางบน flow นะครับ
เข้าไปตั้งค่า mqtt ทั้ง 2 node โดยทั้ง 2 node ให้เข้าไป config server กับ topic ให้ตรงกัน
เข้าไปตั้งค่า node dashboard ทั้ง2 แค่เข้าไปตั้งค่า > กด add ก็เสร็จแล้วครับ
กด Deploy เลยครับ node mqtt ก็จะขึ้น connect (ถ้าใส่เซิฟถูก)
จากนั้นไปที่ dashboard นะครับ http://localhost:1880/ui
ลองกด swtich on ดูนะครับ text ก็จะถูกเปลี่ยนข้อความ
จากตรงนี้จะเห็นได้ว่า ข้อความนั้นถูกเปลี่ยน
- ข้อความที่เปลี่ยนนั้น มาจาก server mqtt ที่เรา connect เข้าไป
- พอเรายิงข้อความของเราไปที่ mqtt server ข้อความนั้นก็จะถูกยิงมาที่ node-red
- พอถูกยิงเข้ามาใน node-red ก็เอาข้อความมาแสดงในช่อง text
โดยนี้ก็เป็นแนวทางเบื้องต้น ถ้าเราทำ IoT โดยใช้ node-red dashboard เราก็จะได้เว็บสำหรับ ควบคุม/แสดงสถานะ ได้ในตัวโดยที่เราไม่ต้องเขียนโค้ดเลยสักนิด
#ชีวิตดี๊ดี
content ต่อไป
Line Api By Dialogflow
ขอบคุณที่อ่านบทความนี้นะครับ เจอกันบทความหน้านะครับ #แฮ่
Medium : https://medium.com/@pingloaf
fLinkedin : https://www.linkedin.com/in/peerat-limkonchotiwat/
