>> เนื้อหาในเอกสาร
- วิธีสร้าง ลบ และแก้ไข 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 ออกเป็น สามประเภทหลักคือ
- Widget สำหรับ Monitor หรือการแสดงผล
- Widget สำหรับ Control หรือควบคุม
- Other Widget หรือการทำงานอื่นๆ
- ฟอร์มที่ต้องกรอกของ Widget สำหรับ Monitor ตัวอย่าง Number Box
โดยการกรอกข้อมูลหลักๆของประเภท 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 ได้เลย