UserID: 

 Last logged in: 


Blog IoTtweet.com



วิธีการใช้งาน Dashboard v3.0 - Create.Design.Use (ตอนที่ 1)

Isaranu, 2016.Nov.24


NodeMCU vs iottweet

สวัสดีครับทุกท่าน, ยินดีต้อนรับเข้าสู่การใช้งานหน้า Dashboard ของ IoT จากเว็บ www.IoTtweet.com ในเวอร์ชั่นล่าสุด Dashboard v3.0 ครับ
ซึ่งในเวอร์ชั่นนี้ ได้เปิดให้ใช้งานตั้งแต่วันที่ 19 พย.59 ที่ผ่านมา และวันนี้ผมจะมาเขียนบทความอธิบายการใช้งานให้ทุกท่านได้อ่านกันนะครับ

"Dashboard v3.0" สำหรับ IoT device นี้, มีการเปลี่ยนแปลงจากเวอร์ชั่น v2.5 มาค่อนข้างหลายอย่างด้วยกัน หลักๆก็จะมีรายละเอียดดังนี้
- สร้าง element ที่จะใช้แสดงข้อมูลของเราได้อย่างอิสระ เช่น สามารถสร้าง chart ในรูปแบบ Line ได้ พร้อมทั้งปรับแต่งสีของกราฟได้ตามใจชอบ
- มี element ให้เลือกใช้หลายตัว เช่น Line graph (Bar graph จะมาใน Minor version ถัดไปครับ), เกจวัดเพื่อแสดงค่าล่าสุดของแต่ละ slot เป็นต้น
- มี Switch ใช้งานแบบ "ON" และ "OFF" แบบ digital control ได้ (ส่งค่าไปยัง IoT)
- มี Slider ใช้งานแบบ Analog control ได้ (ส่งค่าไปยัง IoT)
- แต่ละ element สามารถจัดตำแหน่งได้อย่างอิสระตามใจชอบ แล้วทำการ save layout ได้.
- แต่ละ element สามารถเลือกให้แสดงข้อมูลจาก slot data ได้ก็ได้ (เวอร์ชั่นฟรีนี้ มีให้ใช้งาน slot0-slot3 ครับ)
- รองรับ device ที่ลงทะเบียนใน user ได้มากสุดถึง 10 devices.
- ฟังก์ชั่นเสริมอื่นๆ เช่น การแสดง text message จาก IoT มาแสดงบน Tweet message panel, Google map แสดง location ของ IoT ได้
และ RSSI หรือ WiFi signal strength ที่แสดงความแรงสัญญาณ WiFi ขณะนั้นของ IoT ได้ (จะ release ใน v3.1)
** ฟังก์ชั่น RSSI ต้องใช้งานร่วมกับ IoTtweet Library 0.3.0 ขึ้นไป, ดาวน์โหลดจาก github/IoTtweet

เอาล่ะครับ, เรามาเริ่มใช้งานกันเลยดีกว่า ผมจะเริ่มอธิบายตั้งแต่ user ที่ยังไม่เคย sign up account กับทาง IoTtweet ไว้นะครับ.

[เริ่มใช้งาน Dashboard v3.0]
1. Sign up account กับทาง IoTtweet.com ที่ Home > Sign up
2. หลังจาก verify ใน activate e-mail จากทาง IoTtweet แล้ว, ก็ไปที่ Home > Dashboard ครับ
3. จากนั้น, จะเห็นหน้าว่างๆ นั่นคือเราต้องทำการ Design หน้า Dashboard ของเราเอง แต่ก่อนจะเริ่ม Design ให้เราไปเพิ่ม device ในโรงเก็บ IoT ของเราก่อนครับ. ให้ไปที่ "My IoT garage".
IoT dashboard
4. ทำการเพิ่ม Device เราเข้าไปในนี้ครับ เสร็จแล้วก็กลับไปที่ Dashboard.
IoT dashboard
IoT dashboard
IoT dashboard
5. ใน drop-down menu, เราจะเห็นชื่ออุปกรณ์ที่เราเพิ่มเข้าไปแล้วครับ จากนั้นก็เริ่มออกแบบหน้า Dashboard สำหรับอุปกรณ์นี้ได้เลย. ให้กดที่ปุ่ม "Edit layout" ครับ.
IoT dashboard
IoT dashboard
6. จากนั้น, จะมีเมนูในเลือกสำหรับการสร้าง element ต่างๆ ตามใจชอบเลยครับ ในตัวอย่างนี้ ผมจะยกการสร้าง Chart ขึ้นมาทำให้ดูนะครับ,
ให้เรากดที่ "Create chart" ก็จะมี Chart ว่างๆขึ้นมาครับ ต่อไปก็กดที่ "Setting" ที่มุมล่างของ Chart นั้นครับ.
IoT dashboard
7. ตั้งค่าตามต้องการดังนี้
> Data slot : เลือกช่อง slot ของ data ที่ต้องการส่งจาก IoT มาแแสดงผลบน Chart นี้
> Title : ตั้งชื่อ Chart ได้ตามต้องการครับ
> Y axis label : ตั้งชื่อแกน Y ตามต้องการ
> Line color : เลือกสีของกราฟ การเลือกสีนี้ ทำได้โดยให้คลิกไปที่ช่องโค้ดของสี แล้วเลื่อนเพื่อเลือกสีได้เลยครับ หรือถ้าต้องการใสโค้ดเลขฐาน 16 ก็ทำได้เลยครับ
> Fills color : เลือกสีที่จะใช้เติมด้านล่างของเส้นกราฟ
จากนั้นก็กด Save, เป็นอันเสร็จเรียบร้อย
IoT dashboard
IoT dashboard

เมื่อเราทำการสร้างและปรับแต่ง Chart ของเราแล้ว ก็กดที่ "Save layout" ได้เลยครับ ระบบจะบันทึกค่าต่างๆที่เราเซ็ต ไปเก็บในฐานข้อมูลของเราครับ.

IoT dashboard
IoT dashboard
ส่วนการเขียนโปรแกรมที่ฝั่ง IoT, สามารถอ่านได้จากลิงก์ Getstarted เวอร์ชั่นภาษาไทยนี้ได้เลยครับ

IoT dashboard
เท่านี้เราก็ได้หน้า Dashboard ตามที่ต้องการแล้วครับ. ตอนถัดไป ตอนที่ 2 ผมจะมาอธิบายเรื่องการใช้งาน element ต่างๆแบบเจาะเรืยงตัวกันไปเลยนะครับ

ท่านใดมีคำแนะนำ หรือคำถาม สามารถเขียนได้ใน comment ข้างล่างนี้ หรือว่าจะเข้ามาพูดคุยกันที่ facebook group ก็ได้ครับ


พูดคุยกันได้ข้างล่างนี้นะครับ
IoTtweet.com
- Support team -