การสร้าง dashboard เพื่อแสดงข้อมูล - mrolarik/simple-iot GitHub Wiki

การสร้าง dashboard ในส่วนของ FREEBOARDS นั้นสามารถทำได้โดย คลิกที่เมนู RESOURCES>FREEBOARDS จากนั้นให้เลือก FREEBOARD ที่ต้องการ ในตัวอย่างเลือก SMFBoard

• จากนั้นจะปรากฎหน้าจอ NETPIE Freeboard เพื่อให้เพิ่มข้อมูลบานหน้าต่าง โดยการกดที่ปุ่ม ADD PANE
  

• โดยเมื่อคลิก ADD PANE จะปรากฎหน้าต่างขึ้นมาหนึ่งอัน โดยภายในหน้าต่างนี้จะไม่มี Widget ใดปรากฎ ดังนั้นให้คลิกที่เครื่องหมาย กากบาท เพื่อเพิ่ม widget

• จากนั้นจะปรากฎหน้าต่าง widget ในขั้นตอนนี้ให้เลือก Type เป็น gauge เพื่อสร้างมาตรวัด
  โดยข้อมูลที่ต้องกรอกลงไปในฟอร์มประกอบด้วย

• Title คือชื่อของมาตรวัด

• Value คือค่าที่จะนำมาแสดง

• Units คือหน่วยวัด

• Minumum คือค่าต่ำสุด

• Maximum คือค่าสูงสุด ในส่วนของ value ให้คลิกที่ปุ่ม .JS EDITOR เพื่อพิมพ์คำสั่งในการแสดงข้อมูล

• เมื่อคลิกที่ปุ่ม .JS EDITOR จะปรากฎหน้าต่างให้พิมพ์คำสั่งลงไป ได้แก่

datasources["SMFDevice"]["/SFM/gearname/smartFarm"].split(',')[0]

• ในกรณีนี้ datasources["SMFDevice"] มาจากขั้นตอนในการกดปุ่ม ADD ในส่วนของ Datasources

• ในส่วนของ ["/SFM/gearname/smartFarm"] มาจากข้อความที่ได้จากการรันโปรแกรม Python

• และ .split(',')[0] คือคำสั่งสำหรับการแยกข้อมูล (split) โดยแยกจากเครื่องหมายคอมม่า (',') และเลือกข้อมูลลำดับที่ 0 มาแสดงผล

• จากตัวอย่างต่อไปนี้

/SFM/gearname/smartFarm 10,29

ผลลัพธ์ที่ได้จากการ split(',')[0] คือ 10 ดังนั้นหากต้องการข้อมูลชุดต่อไปให้ใช้คำสั่ง split(',')[1] คำตอบที่ได้คือ 29`

• แสดงคำสั่งที่ได้จากการรันโปรแกรม Python โดยจะใช้ข้อความ /SFM/gearname/smartFarm/ ในส่วนของการแสดงค่าข้อมูล value

• เมื่อกรอกข้อมูลทุกอย่างครบถ้วนให้กดที่ปุ่ม save จากนั้นจะปรากฎหน้าต่าง gauge และแสดงข้อมูลที่ส่งมาจากอุปกรณ์ IoT
  

• จากนั้นให้เพิ่ม widget ตัวต่อไปคือ Sparkline เพื่อเพิ่มกราฟแสดงข้อมูลย้อนหลัง ดังรูปภาพต่อไปนี้

• ผลลัพธ์ที่ได้จากการเพิ่ม gauge และ Sparkline แสดงดังต่อไปนี้

• จากนั้นให้เพิ่ม ADD PANE ใหม่และเพิ่ม widget ลงไป เพื่อใช้แสดงข้อมูลส่วนถัดไป และในส่วนของ value ให้กำหนดดังนี้

datasources["SMFDevice"]["/SFM/gearname/smartFarm"].split(',')[1]

• ผลลัพธ์ที่ได้แสดงดังตัวอย่างต่อไปนี้

หากอุปกรณ์ IoT ที่พัฒนาสามารถส่งข้อมูลจากเซ็นเซอร์ได้จำนวนมาก ก็สามารถสร้าง PANE และเพิ่ม widget ได้ตามความต้องการ