3. การใช้งานDashboard

จุดประสงค์การเรียนรู้

เพื่อให้ผู้เรียนสามารถเขียนDashboardแสดงข้อมูลบนWeb bowserได้

สาระการเรียนรู้

การใช้งาน Dashboard ใน Node-RED เป็นเรื่องสำคัญเพราะมีความสามารถในการสร้างและแสดงข้อมูลของโปรแกรม Node-RED ในรูปแบบกราฟิก และอินเตอร์เฟซผู้ใช้ (UI) ที่สวยงามและใช้งานง่าย เหมาะสำหรับการติดตามข้อมูลหรือการควบคุมอุปกรณ์ต่าง ๆ ที่เชื่อมต่อกับ Node-RED โดยผ่านเว็บเบราว์เซอร์ 

1. การติดตั้งDashboardในNode-Red

กรณีที่ใช้เครื่องตัวเองจำลองเป็นServer ให้ทำตามขั้นตอนดังนี้

1. เปิด Node-RED: เริ่มต้นด้วยการเปิด Node-RED โดยเข้าสู่อินเทอร์เฟซของการตั้งค่าของเซิร์ฟเวอร์ Node-RED โดยใช้ URL และพอร์ตที่ถูกกำหนด เช่น http://localhost:1880

2. เปิดเมนู Manage palette: เมื่ออินเทอร์เฟซ Node-RED เปิดขึ้นมา คลิกที่เมนูที่มุมบนขวามือ (มุมขวาบน) และเลือก "Manage palette"

3. ติดตั้ง Node-RED Dashboard: ในเมนู Manage palette คลิกที่แท็บ "Install" และค้นหา "node-red-dashboard" จากนั้นคลิกที่ปุ่ม "Install" เพื่อติดตั้ง Node-RED Dashboard

วีดีโอการติดตั้งDashboard

2. การทำงานของกลุ่ม Dashboard node

  กลุ่มของ Dashboard node ใน Node-RED เป็นเครื่องมือที่ช่วยให้ผู้ใช้สร้างอินเตอร์เฟซผู้ใช้ (UI) ได้อย่างสะดวกและมีประสิทธิภาพ เพื่อให้ผู้ใช้สามารถสร้างและควบคุมอินเตอร์เฟซที่ตอบสนองต่อการเข้าถึงข้อมูลและการควบคุมได้อย่างมีประสิทธิภาพ ดังนี้

• Button: ปุ่มที่ใช้สำหรับเรียกใช้งานคำสั่งหรือกระบวนการเมื่อผู้ใช้คลิก

• Dropdown: กล่องแบบเลือกตัวเลือกที่ผู้ใช้สามารถเลือกได้จากรายการที่กำหนด

• Switch: สวิตช์ที่ใช้สำหรับเปิดหรือปิดสถานะของอุปกรณ์หรือระบบ

• Slider: บาร์เลื่อนที่ผู้ใช้สามารถเลื่อนเพื่อเลือกค่าตั้งแต่ค่าต่ำสุดถึงค่าสูงสุด

• Numeric: ช่องข้อมูลที่ผู้ใช้สามารถป้อนค่าตัวเลขเพื่อกำหนดค่าที่ต้องการ

• Text Input: ช่องข้อมูลที่ผู้ใช้สามารถป้อนข้อความหรือตัวอักษร

• Date Picker: ช่องข้อมูลที่ให้ผู้ใช้เลือกวันที่หรือเวลาจากปฏิทิน

• Colour Picker: ช่องข้อมูลที่ให้ผู้ใช้เลือกสีจากสเปกตรัมของสีต่าง ๆ

• Form: แบบฟอร์มที่ประกอบด้วยอินพุตต่าง ๆ เช่น ปุ่ม, ช่องข้อมูล, เลือกตัวเลือก ซึ่งสามารถใช้ในการส่งข้อมูลไปยังฝั่งเซิร์ฟเวอร์

• Text: ส่วนแสดงข้อความหรือข้อมูลที่แสดงผลให้กับผู้ใช้

• Gauge: แผงวัดที่แสดงค่าตัวเลขในรูปแบบกราฟและมักใช้สำหรับการแสดงสถานะหรือข้อมูลต่าง ๆ

• Chart: แผนภูมิที่ใช้สำหรับแสดงข้อมูลในรูปแบบกราฟ เช่น แผนภูมิเส้น, แผนภูมิแท่ง, หรือแผนภูมิวงกลม

• Audio Out: ส่วนแสดงผลเสียงที่ใช้สำหรับการเล่นเสียงหรือไฟล์เสียง

• Notification: ส่วนแสดงการแจ้งเตือนหรือข้อความสำหรับผู้ใช้

• UI Control: ส่วนควบคุมการทำงานของอินเตอร์เฟซผู้ใช้ ซึ่งสามารถใช้ในการสั่งการหรือควบคุมอื่น ๆ

• Template: โหนดที่ให้ผู้ใช้สร้างหน้าตาและลักษณะของอินเตอร์เฟซผู้ใช้ตามต้องการโดยใช้โค้ด HTML, CSS, และ JavaScript แบบกำหนดเอง

วีดีโอตัวอย่างการใช้งานDashboard