การสร้าง Dashboard ของ PIEBOX
Dashboard เป็นส่วนสำคัญที่ให้ผู้ใช้งานสามารถเห็นรายงานข้อมูลของอุปกรณ์และยังสามารถสั่งงานไปยังอุปกรณ์ได้อีกด้วย
เกริ่นนำ
ตัวอย่างข้อมูลที่จะนำมาแสดงบน Dashboard ของบทความนี้ มาจากตัวอย่างบทความ การเขียนข้อมูล การอ่านข้อมูล และการสร้างฐานข้อมูลใน SQLite ผู้ใช้สามารถศึกษาการใช้งานฐานข้อมูลเบื้องต้น และการอ่านค่าจากเซนเซอร์วัดพลังงานไฟฟ้าได้จากบทความนี้
ข้อมูลที่นำมาแสดงบน Dashboard เป็นข้อมูลการบันทึกค่าพลังงานไฟฟ้าที่วัดได้จาก Electronic Meter โดยจะแสดงค่าดังต่อไปนี้
- Voltage
- Frequency
- Current
- Power
- Energy (kWh)
การทำงานแบ่งเป็น 2 ส่วน ผู้ใช้สามารถศึกษาตามหัวข้อดังต่อไปนี้
A. การเข้าใช้งาน PIEBOX และการสร้างฐานข้อมูล SQLite
B. การสร้าง Dashboard
A. การเข้าใช้งาน PIEBOX และการสร้างฐานข้อมูล SQLite
ในหัวข้อนี้เป็นหัวข้อที่ได้อธิบายในบทความก่อนหน้า ผู้ใช้งานสามารถย้อนกลับไปอ่านในบทความ การเขียนข้อมูล การอ่านข้อมูล และการสร้างฐานข้อมูลใน SQLite
B. การสร้าง Dashboard
ภาพตัวอย่าง Dashboard ที่ใช้เป็นตัวอย่างในบทความนี้
- ผู้ใช้เตรียมข้อมูลที่ใช้แสดงบน Dashboard ตัวอย่างข้อมูลจะใช้ตัวอย่าง การเขียนข้อมูล การอ่านข้อมูล และการสร้างฐานข้อมูลใน SQLite โดยเตรียมตัวอย่าง Flow การทำงานดังนี้
สังเกตตัวอย่างข้อมูลเป็นข้อมูลที่ถูกรวบรวมจากเซนเซอร์ 5 Node โดยถูกรวบรวมเป็นข้อมูลเดียวโดยใช้ node join
ดังนั้น หากต้องการแสดงข้อมูลในแต่ละ Widget Gauge ต้องทำการระบุว่าจะใช้ข้อมูลใดใน Widget Gauge ใด โดยแยกข้อมูลและระบุข้อมูลที่ต้องการ ผู้ใช้สามารถใช้ node extract
โดยให้ผู้ใช้มาที่แถบเมนู nodes flow ทำการนั้นคลิกที่ node extract และลาก node extract มายังพื้นที่ Flow
จากนั้นดับเบิลคลิกที่ node extract เพื่อระบุข้อมูลที่ต้องการแยกมาแสดงในแต่ละWidget Gauge
การตั้งค่าการแยกข้อมูล ข้อมูลอยู่ในรูปแบบ JSON ผู้ใช้สามารถระบุค่า field key ที่ต้องการแยกออกมาเป็นแต่ละข้อมูล เมื่อตั้งค่าสำเร็จ คลิกปุ่ม Done
จากนั้นทำการลากเส้นจาก node join ไปที่ node extract และลากเส้น Output ข้อมูลไปที่ node debug เพื่อสังเกตผลลัพธ์ ทำการบันทึกคลิกปุ่ม Save
สังเกตผลลัพธ์ ข้อมูลได้ถูกแยกตามที่ระบุตามการตั้งค่า เมื่อข้อมูลถูกต้องตามที่กำหนดจากนั้นเป็นการนำแต่ละข้อมูลแสดงไปยังแต่ละWidget Gauge
2. การสร้าง Widget Gauge บน Dashboard
ผู้ใช้สามารถศึกษาการใช้งาน Dashboard ได้ที่ หน้า 89 https://archive.nexpie.io/piebox/manuals/piebox_flowengine_20200902.pdf
ผู้ใช้มาที่แถบเมนู nodes dashboard จากนั้นคลิก node gauge และลากมายังพื้นที่ Flow
ดับเบิลคลิกเพื่อตั้งค่า Gauge โดยแถบ Group ตั้งค่าเป็น ‘Add new ui_group…’ จากนั้นคลิกที่ปุ่มดินสอ
การตั้งค่า Name ตั้งชื่อเป็น Overview และตั้งค่า Tab ที่แสดงเป็น Tab Home เมื่อตั้งค่าสำเร็จ คลิกปุ่ม Add
ต่อมาเป็นการตั้งค่าข้อมูลที่แสดงบน Gauge ในที่นี้เป็น Gauge แสดงข้อมูล voltage การตั้งค่าแถบ Group เลือก Overview ส่วน Label แสดงข้อความ voltage และ Range ช่วงข้อมูล min เท่ากับ 0 max เท่ากับ 250 เมื่อตั้งค่าสำเร็จ คลิกที่ปุ่ม Done
จากนั้นทำการลากเส้นจาก node extract output ข้อมูล voltage ไปยัง node gauge voltage ทำการบันทึก คลิกปุ่ม Save
สังเกตผลลัพธ์ โดย Widget Gauge Voltage ที่ผู้ใช้สร้างจะมาแสดงที่แถบ Dashboard ให้ผู้ใช้คลิกที่แถบ Dashboard
เมื่อสร้าง Gauge ได้สำเร็จ ให้ทำการสร้าง Gauge แสดงข้อมูลเซนเซอร์ค่าอื่นๆ โดยทำตามขั้นตอนข้างต้น โดยให้แสดงใน Group Overview เหมือนเดิม
ระบุค่า Gauge แสดงค่า Frequency ระบุค่าเรียบร้อยแล้ว ให้คลิกที่ปุ่ม Done
ระบุค่า Gauge แสดงค่า Current ระบุค่าเรียบร้อยแล้ว ให้คลิกที่ปุ่ม Done
ระบุค่า Gauge แสดงค่า Power ระบุค่าเรียบร้อยแล้ว ให้คลิกที่ปุ่ม Done
เมื่อระบุค่า Gauge ครบตามที่กำหนด จากนั้นทำการลากเส้นข้อมูลที่ได้แยกข้อมูลจาก node extract ไปยัง node gauge ที่ได้ระบุค่า ตั้งค่าสำเร็จกดปุ่ม Save
สังเกตผลลัพธ์ โดยผู้ใช้คลิกที่แถบ Dashboard
3. การสร้าง Widget Chart บน Dashboard
ผู้ใช้มาที่แถบเมนู nodes dashboard คลิก node chart และลากมายังพื้นที่ Flow
ดับเบิลคลิกที่ node chart เพื่อตั้งค่าการแสดงบน Dashboard
การตั้งค่าให้ทำการสร้าง Group เพิ่มอีกหนึ่ง Group โดยคลิกเลือก ‘Add new ui_group’ และคลิกที่ปุ่มดินสอ
ตั้งค่า Group Name เป็น Time Series และเลือก Tab ที่จะแสดงเป็น Home ตั้งค่า Width เป็น 20 เมื่อตั้งค่าสำเร็จ คลิกปุ่ม Add
ต่อมาเป็นการตั้งค่าข้อมูลที่แสดงบน Chart ในที่นี้เป็น Chart แสดงข้อมูล energy kWh โดยตั้งค่า Label เป็น Energy kWh เมื่อตั้งค่าสำเร็จคลิกที่ปุ่ม Done
จากนั้นทำการลากเส้นจาก node extract output ข้อมูล energy ไปยัง node chart เพื่อแสดงข้อมูล energy kWh บน Dashboard และคลิกปุ่ม Save
สังเกตผลลัพธ์ โดยผู้ใช้คลิกที่แถบ Dashboard
จากนั้นให้ผู้ใช้ทำการสร้างอีกหนึ่งWidget Chart สำหรับแสดงค่าพลังงานไฟฟ้าทั้งหมด
ดับเบิลคลิกที่ node chart เพื่อตั้งค่าการแสดงค่าพลังงานไฟฟ้าบน Dashboard
การตั้งค่า Group เลือก Time Series และ ตั้งค่า Label เป็น Energy Meter เมื่อตั้งค่าสำเร็จ กดปุ่ม Done
จากนั้นทำการลากเส้นจาก node extract ค่าพลังงานไฟฟ้า ไปยัง node chart เพื่อแสดงผลลัพธ์บนแถบ Dashboard และคลิกปุ่ม Save
สังเกตผลลัพธ์ โดยผู้ใช้คลิกที่แถบ Dashboard
เพียงเท่านี้ผู้ใช้ก็สามารถเห็นรายงานข้อมูลค่าพลังงานไฟฟ้าของอุปกรณ์บน PIEBOX
สำหรับใครที่ติดปัญหาหรือมีข้อสงสัย สามารถสอบถามได้ทุกอย่างในคอมเมนต์ข้างล่างเลยครับ
ในบทความต่อไปจะเป็นการสร้าง Dashboard เพื่อแสดงข้อมูลในฐานข้อมูล โดยผู้ใช้สามารถที่จะระบุข้อมูลที่ต้องการมาแสดงผลบน Dashboard ของ PIEBOX
พูดคุย แลกเปลี่ยน สอบถามข้อมูลเกี่ยวกับ NETPIE ได้ที่
Facebook Group: https://www.facebook.com/groups/netpie
ติดตามข่าวสาร ติดต่อธุรกิจกับ NEXPIE ได้ที่
Facebook Fanpage: https://www.facebook.com/nexpie
