Documentation BestBoard

### Documentation for BestBoard Ver. TH

>> เนื้อหาในเอกสาร

• วิธีสร้าง ลบ และแก้ไข Page
• วิธีเพิ่ม ลบ และแก้ไข Datasource
• วิธีเพิ่ม ลบ และแก้ไข Widget

Page System

• วิธีเพิ่ม Page
  เริ่มโดยการกดเพิ่มเพจมีสองวิธีคือ
  1. ปุ่ม + ที่หน้า แรกของเว็บ
  2. กด new page ที่เมนูด้านซ้ายของเว็บ
  หลังจากนั้นให้ตั้ง ชื่อ เพจเป็นอันเสร็จสิ้น
• วิธีแก้ไขและลบชื่อ Page
  เอาเม้าส์ไปชี้ที่ชื่อ Page ที่ต้องการแก้ไข แล้วจะขึ้นรูปดังนี้

กดปุ่มสีขาวที่เป็นเครื่องหมายดินสอเพื่อแก้ไขชื่อ Page
กดปุ่มสีแดงที่เป็นเครื่องหมายลบ ( - ) เพื่อลบ Page นั้น

ปล. หากกดลบไปแล้ว widget ที่อยู่ใน เพจนั้นทั้งหมดจะหายไป

Data source System

ก่อนอื่นจะต้องกดปุ่ม setting ก่อนเพื่อนที่จะเห็นระบบ Datasource

หลังจากกดปุ่ม setting แล้วเราจะเห็นระบบ Datasource

• วิธีเพิ่ม Datasource
  กด new source ที่เมนูด้านซ้าย จะขึ้นให้กรอกข้อมูลต่างๆ ดังนี้

• ช่องแรกเป็นการเลือก Type ของ Datasource โดย Version ( Beta ) จะมีให้เลือกแค่อันเดียวคือ Netpie Microgear
• Name : ตั้งชื่อ Datasource
• APPID : นำ APPID ของ NETPIEAPP มาใช้
• Key : นำ Key ของ NETPIE มาใช้แนะนำให้ใช้ Session Key เพื่อประหยัด Credit ของคุณ
• Secret : นำ Secret ของ NETPIE มาใช้จะอยู่ด้วยกันกับ KEY
• Subscribed Topics : คือการเลือกการ Subscribe ของ Datasource (ค่าเริ่มต้นคือ /# หมายถึงการ Subscribe all topics) อ่าน เพิ่มเติมได้ที่ Netpie
• Advance : แบ่งเป็นสองส่วนจะกรอกหรือไม่กรอกก็ได้สามารถทำงานได้เช่นกันถ้ากรอกจะเป็นการสั่งงานเพิ่มเติมของ Datasource โดยการกรอกจะใช้ Javascript ในการสั่งการด้วยคำสั่งต่างๆที่เราต้องการ

• วิธีแก้ไข Datasource
  กดที่ชื่อ Datasource ที่เราต้องการแก้ไข จากนั้นจะมีข้อมูลให้กรอกเหมือนกับการเพิ่มข้างต้น
• วิธีลบ Datasource
  นำเม้าส์ไปชี้ที่ชื่อ Datasource และวจะมีเครื่องหมายลบสีแดง ( - ) ขึ้นมาให้กดลบ

Widget System

ก่อนจะใช้ widget ต้องเลือก Page ก่อนว่าจะเป็น widget ของ Page ไหนโดยการ คลิ๊กที่ชื่อ Page ตรงเมนูด้านซ้าย

• วิธีเพิ่ม Widget
  กดที่ปุ่ม + ด้านล่างขวาของจอเราเพื่อเพิ่ม Widget
  เมื่อกดขึ้นมาจะมี widget ให้เลือกแตกต่างกันไปในการใช้งาน

แบ่ง Wiget ออกเป็น สามประเภทหลักคือ

1. Widget สำหรับ Monitor หรือการแสดงผล
2. Widget สำหรับ Control หรือควบคุม
3. Other Widget หรือการทำงานอื่นๆ

• ฟอร์มที่ต้องกรอกของ Widget สำหรับ Monitor ตัวอย่าง Number Box

Number Box Form

โดยการกรอกข้อมูลหลักๆของประเภท Monitor Widget จะอยู่ที่การดึงค่าจาก NETPIE ที่เรา Publish มาแสดงผล

• Title : ชื่อ Widget
• Datasource : เลือก Datasource ที่เราต้องการจะดึงข้อมูล
• Value : ค่าที่เราต้องการจะแสดงโดยการเลือก topic ที่เราต้องการดึง
• Apply Value : เป็นการเลือการดึงค่าว่าจะใช้ของระบบเราหรือจะเป็นการพิมพ์ Javascript เองโดยการเลือก Manaul (แนะนำใช้ Automatic ของระบบเราเพื่อง่ายต่อการดึงค่ามาแสดง)
• Filter Symbol : เครื่องหมายที่เราใช้แยกข้อความที่เรา publish ขึ้นมา
  ( ปล. ต้อง filter ให้ถูกเพื่อที่ค่าที่ได้มาถูกต้อง )
• Example ( select Index ) : เป็นการเลือกค่าที่เราจะเอามาแสดงใน Widget

นี่คือส่วนหลักๆที่ใน Monitor Widget ทุกตัวจะมีและจำเป็นต้องกรอกเพื่อให้มีค่ามาแสดง

• ฟอร์มที่ต้องกรอกของ Widget สำหรับ Control ตัวอย่าง Toggle

โดยการกรอกข้อมูลหลักๆของ Control Widget อยู่ที่ Action ต่างๆว่าจะสั่งให้ทำงานอย่างไร

• Title : ชื่อ Widget
• Datasource : เลือก Datasource ที่ต้องการจะใช้ใน Widget
• onCreated : [1] กรอกชื่อ Microgear ที่ต้องการจะแชทด้วย
  [2] กรอก Value ที่ต้องการไปถาม sensor เพื่อให้ค่าล่าสุด publish กลับมา
• Toggle State : [1] กรอก Topic ที่ใช้เช็ค่ค่าปัจจุบันของ widget
  [2] ค่าที่ใช้เช็คว่าค่าไหนจะเป็นจริง เช่น 1 = ON
• Type : เลือกว่าจะใช้ chat หรือ publish ของ Microgear
• OnToggle ON/OFF Action :
  Topic > กรอก topic ที่ต้องการจะ publish ไป
  Value > กรอก value ที่ต้องการจะ publish ไป

นี่คือส่วนที่ต้องกรอกหลักๆของ Control Widget
ปล. ถ้าเลือกเป็น chat จะเป็นการกรอกชื่อ microgear ที่ต้องการแชทแทน

• ตัวอย่างฟอร์มที่ต้องกรอกของ Other Widget

เริ่มที่ตัวอย่างแรกครับ

Widget Image Cover

ก่อนอื่นเลือกรูปที่จะมาใส่ป๊อปอัพ เพื่อแสดงค่าตามรูปที่ต้องการดังตัวอย่างคือรูปแผนผังในห้องห้องนึงและมี sensor ที่โต๊ะ 1 2 และ 3 เพื่อจะให้ดูค่าต่างๆง่ายขึ้นจึงนำมาทำเป็นรูปเดียวและโชว์ค่าอุณหภูมิภายในห้องตามจุดต่างๆ

• Points : กด + เพื่อเพื่อเพิ่ม popup ที่จะแสดง
• Title : ชื่อของแต่ละจุด
• Value : ในส่วนนี้ก็เหมือนกับการกรอกแบบ monitor widget เพื่อที่จะเอาค่ามาแสดง และแต่ละจุดสามารถเพิ่มค่าที่จะแสดงได้เช่น 1 จุด แสดง 2 ค่า สลับกัน โดยการ กดปุ่ม + เพื่อเพิ่ม Value

ผลลัพธ์ที่ได้มาก็จะได้แบบนี้ครับ

ผลลัพธ์เมื่อเพิ่มวิดเจ็ต

เท่านี้ก็เป็นอันเสร็จในการเพิ่ม widget Image Cover

Widget Chart

วิตเจ็ตกราฟนี้เป็นการดึงค่าจาก Feed ของ Netpie

• Feed ID : Feed ID ของ Netpie โดยนำมาจาก https://netpie.io/feed
• Feed API : นำ Key API ของ Feed นั้นมา
• Values : กด + เพื่อเพิ่มค่าที่จะแสดงในกราฟ กราฟสามารถแสดงได้มากกว่า 1 ข้อมูล
• Value : ชื่อที่มีอยู่ใน Feed นำมาแสดงและเขียนลงกราฟ

การเพิ่ม widget ต่างๆก็มีประมาณนี้ในการเพิ่ม widget ตัวอื่นก็จะใช้ หลักการเดียวกันในการเพิ่ม

• วิธีแก้ไขและลบ Widget
  เริ่มจากกดปุ่ม Setting ที่เมนูด้านซ้ายแล้วแต่ละ widget จะมีรูปเฟืองขึ้นมาเพื่อให้เราแก้ไขข้อมูลของ widget จากนั้นกด Save
  และจะมีปุ่มรูปถังขยะขึ้นมาสเมื่อเรากดปุ่มนั้นจะทำการลบ widget

ปล. หากลบ widget ไปแล้วไม่สามารถดึงข้อมูลกลับมาได้

Theme System

เป็นระบบที่ช่วยเราเลือก ธีม ของเพจแต่ละหน้าเพื่อให้เข้ากับงานที่เราต้องการแสดง

• วิธีเปลี่ยนธีม
  กดปุ่ม Setting ที่เมนูด้านซ้ายและจะมี Color ให้เลือกที่เมนู หากเรากดสีไหนจะได้ ธีมสีนั้นๆ

ในระบบของ BestBoard เราก็มีประมาณนี้หากมีปัญหาสามารถสอบถามเพิ่มเติมได้และแจ้งปัญหาที่พบเราได้ที่ใต้ Comment ได้เลย

## Thank you ##