ติดตั้ง node-red-dashboard
เข้าไปที่ manage palette และค้นหาด้วยคำว่า node-red-dashboard กดติดตั้ง
เมื่อติดตั้งเสร็จแล้วจะเห็น แท็บที่เพิ่มขึ้นมาคือ dashboard แบบนี้ ประกอบไปด้วย node แบบต่างเช่น button, dropdown, switch, gauge, chart เราสามารถใช้ node ตรงนี้เพื่อสร้างหน้า dashboard ได้แบบรวดเร็ว
Group And Tab
Group : ใช้เพื่อแบ่งกลุ้มในหน้าเดียวกัน
Tab : ใช้เพื่อแบ่งว่า UI จะอยู่หน้าไหน
ดูโครงสร้างของ dashboard เราได้จาก แท็บ Dashboard
button
Group : ใช้ในการจัดตำแหน่งของ UI
Size : กำหนดขนาด โดยปกติเป็น auto
Icon : กำหนด Icon ใส่ชื่อ Icon ที่ต้องการได้จาก Material Design icon, Font Awesome icon, Weather icon
Tooltip : เป็นคำอธิบายของ UI เมื่อเอาเมาส์วางค้างไว้
Colour : กำหนดสีของตัวอักษร
Background : กำหนดสีของพื้นหลัง
Payload : กำหนดข้อมูลที่ส่งออกมาเมื่อคลิ๊ก กำหนดได้หลายประเภทเช่น String, Number, JSON, boolean, timestamp และยังกำหนดค่าใน flow, Global ได้ด้วย
Topic : กำหนด Property Topic ใน msg Object
Name : กำหนดชื่อของ node
Dropdown
Placeholder : คำอธิบายถึงตัวเลือก Dropdown
Option : เพิ่มตัวเลือกแบบต่างลงไปได้
Dropdown สามารถผ่าน msg Object จาก node อื่นๆได้
Switch
Icon : ตั้งค่า Icon เฉพาะเมื่อกดในแต่ละครั้งได้
On/Off payload : ตั้งค่าว่าให้ส่งข้อมูลแบบไหนออกไปเมื่อกด Switch
Slider
Range : ระบุช่วง min max และเพิ่มค่าทีละเท่าไหร่
Output : กำหนดลักษณะที่ส่งข้อมูลออกไป
Payload : กำหนดให้เป็นค่าปัจจุบัน
Form
Form : ใช้สำหรับการเพิ่มช่องในการกรอกข้อมูล สามารถกำหนดประเภทได้หลายประเภทเช่น text, number, date, switch
Button : กำหนดชื่อของปุ่ม
Form เมื่อกด Submit ข้อมูลแล้วเราจะได้ข้อมูลที่ออกมาเป็น JSON แบบตัวอย่างข้างล่าง
Gauge
Value format : กำหนดค่าที่จะแสดงผลมา ตรงกลาง
Unit : กำหนดหน่วยของค่าที่จะแสดงผล
Range : กำหนดช่วงของการแสดงผล
Colour : กำหนดสีของช่วงข้อมูลในแต่ละช่วง
ค่าที่จะป้อนให้ Gauge เป็น Object ที่ต้องที Topic เป็น Value และ Payload เป็นเลขของข้อมูลที่ต้องการแสดงดังตัวอย่าง
Chart
อ่านข้อมูลเต็มๆได้ที่
ใน หน้า Properties ของ chart จะมีให้ตั้งค่าอยู่หลายอย่าง ที่เราจะใช้หลักคือ Type
Type : กำหนดลักษณะของกราฟเป็นแบบต่างๆเช่น Line chart, Bar chart,Pie chart, Polar Area, Radar chart
chart แบบต่างมีข้อมูลที่ส่งเข้าไปคือ Series, data,label
series : บอกว่ามีข้อมูลอะไรบ้างตามตัวอย่างข้างบนคือ x, y, z
data : Array 2 มิติ ภายในบรรจุข้อมูลที่เรียงตามลำดับของ series
label : ข้อมูลที่แสดงใน แกน x ของกราฟ
เมื่อเรานำข้อมูลด้านบนมาใส่กับ inject ที่ส่งข้อมูลออกเป็น JSON จะได้กราฟแบบนี้
ตัวอย่าง code เรื่อง graph เราสามารถ import เข้าไปใน node-red และใช้งานได้เลย
