# ตัวอย่าง 1 - ทดลองแสดงผลค่าผ่าน Gauge บน Blynk

สำหรับการทดลองนี้ จะทดลองอ่านค่าอุณหภูมิ เพื่อแสดงค่าอุณหภูมิที่ได้บน Blynk App

อุปกรณ์ที่ใช้ในตัวอย่างนี้ประกอบด้วย

1. Maker Playground Baseboard
2. Maker Playground Temperature & Humidity sensor module

ขึ้นตอนการทดลอง 

### ภายในซอฟต์แวร์เมกเกอร์เพลย์กราวน์ 

1\. ภายใต้เมนู Device / Device Configuration ให้ทำการเลือก

* Platform : Arduino (Atmel AVR)
* Controller : Maker Playground Baseboard V3

{% hint style="info" %}
ผู้ใช้งานจำเป็นต้องแก้ไขตัวเลือกทั้ง Platform และ Controller ให้ตรงกับอุปกรณ์ที่ผู้ใช้งานกำลังพัฒนางานร่วมด้วย
{% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWNAoM2yxiNEvo_kAI%2F-LxWNx9qRbbiZsuZKAh7%2Fimage.png?alt=media\&token=80023272-4490-4fcc-b61d-3ba48c969564)

2\. ภายใต้เมนู Device / Device Explorer ให้ทำการค้นหา Maker Playground Temperature/Humidity และกดปุ่ม + เพื่อเพิ่มอุปกรณ์ไปยังรายการที่จะนำมาใช้งาน

{% hint style="info" %}
ในขั้นตอนนี้ผู้ใช้งานสามารถค้นหารอุปกรณ์โดยการใช้ช่องค้นหาด้านบนหรือเลื่อนหาอุปกรณ์ที่ต้องการได้
{% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWNAoM2yxiNEvo_kAI%2F-LxWNnE39sQveQYbzAZN%2Fimage.png?alt=media\&token=f16f9659-4eea-4a33-9b6f-b2b5a9c114fa)

3\. ค้นหาและเพิ่ม Blynk Virtual Gauge

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWNAoM2yxiNEvo_kAI%2F-LxWO7EDKG1ry5WdkWW_%2Fimage.png?alt=media\&token=67af16ad-6dff-4a47-a31a-1768cee1771a)

4\. เมื่อผู้ใช้งานเพิ่ม Maker Playground Temperature/Humidity และ Blynk Virtual Gauge ภายใต้เมนู Device / Device Configuration จะมีรายการอุปกรณ์ Temperature1, Humidity1 และ VirtualGauge1 เพิ่มเข้ามา

{% hint style="info" %}
อุปกรณ์ Maker Playground Temperature & Humidity เป็น sernsor ที่สามารถวัดค่าที่ทั้งอุณหภูมิและความชื้นได้ในตัวเดียวกัน (SHT30-DIS-B)
{% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWNAoM2yxiNEvo_kAI%2F-LxWOIHrTY0fZaQi4BeU%2Fimage.png?alt=media\&token=6e2a86c3-3c88-49dd-8387-06b31675af3b)

{% hint style="warning" %}
หากลองสังเกตุด้านข้างของแถบเมนู Device จากรูปภาพในข้อ 4 จะมีสัญลักษณ์เครื่องหมายตกใจสีเหลืองอยู่ด้านหน้า นั่นหมายถึงยังคงมีตัวเลือกที่ต้องการการตั้งค่าจากผู้ใช้ มิเช่นนั้น จะไม่สามารถอัพโหลดโปรแกรมไปยังบอร์ดไมโครคอนโทรเลอร์ได้
{% endhint %}

5\. ผู้ใช้ต้องเลือก Port ให้กับ Temperature/Humidity sensor ที่เพิ่มเข้ามาใหม่ เมื่อทำการเลือก Port ให้กับอุปกรณ์เรียบร้อยแล้ว หน้าต่างจำลองการเชื่อมต่อวงจรทางด้านขวาจะวาดภาพการเชื่อมต่อสายระหว่าง Controller และ Sensor โดยอัติโนมัติ

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWOKM2OC7VeENaCe36%2F-LxWOt6cLUuvaEJfgSKy%2Fimage.png?alt=media\&token=bdaf389a-fc82-4b1e-8f23-f46cf2945e4e)

{% hint style="warning" %}
ในขั้นตอนนี้ผู้ใช้งานสามารถเลือก Port ให้กับอุปกรณ์ได้เอง หรือใช้งานปุ่ม Auto Select เพื่อให้โปรแกรมเมกเกอร์เพลย์กราวน์เลือกให้โดยอัตโนมัติ
{% endhint %}

### ภายในแอพพลิเคชั่น Blynk 

6\. เปิดแอพพลิเคชั่นบลิ๊ง และกดที่ปุ่ม New Project เพื่อทำการสร้าง Project ใหม่

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWOKM2OC7VeENaCe36%2F-LxWPnS26os6DYANRiEA%2Fimage.png?alt=media\&token=3fd01cc3-8f51-4d56-9806-fa0495fd81a4)

7\. ตั้งชื่อ Project ใหม่ โดยสามารถตั้งชื่ออะไรก็ได้ ในตัวเลือก Choose Device ให้เลือกอุปกรณ์เป็น ESP8266 และ Connection Type เป็น WiFi

{% hint style="warning" %}
เนื่องจากตัวอย่างการใช้งานนี้ใช้งาน Maker Playground Baseboard ที่ประกอบด้วย ESP8266 และใช้งาน ESP8266 เป็นตัวเชื่อมต่อกับโครงข่ายอินเตอร์เน็ต ผู้ใช้งานจำเป็นต้องเปลี่ยนตัวเลือกนี้หากอุปกรณ์ของผู้ใช้แตกต่างไปจากตัวอย่าง
{% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWOKM2OC7VeENaCe36%2F-LxWQbOt6M9g7Pv8tse8%2Fimage.png?alt=media\&token=007596ed-7e86-44a5-b699-29f8ae47ef7c)

8\. เมื่อสร้าง project ใหม่สำเร็จ หน้าแดชบอร์ดของ Project จะปรากฏขึ้นดังรูป

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWQisXdhHuWI4lsFvX%2Fimage.png?alt=media\&token=3acc213d-267c-441a-a2ab-78353fbe2f06)

9\. ในหน้าแดชบอร์ดตามที่แสดงในข้อ 8 ให้ทำการจิ้มลงบนพื้นที่ตรงกลางหนึ่งครั้ง หรือจิ้มหน้าจอค้างไว้และเลื่อนไปทางซ้าย แถบ Widget Box จะปรากฏขึ้นจากทางด้านขวาของจอภาพ ทำการเพิ่ม Guage ที่อยู่ภายใต้หมวด Display

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWRPu6BZjqgG8GlVs9%2Fimage.png?alt=media\&token=84bb52ed-e826-486a-a38e-c607200a6cc1)

10\. เมื่อ Gauge ถูกเพิ่มเข้ามาในแดชบอร์ด จะได้ Gauge ในลักษณะดังภาพ

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWRZDzts2RgvNP2wf0%2Fimage.png?alt=media\&token=c387742a-efa4-47f8-829f-707f75d0ef79)

11\. จิ้มที่ตัว Gauge เพื่อทำการตั้งค่า หน้าต่างการตั้งค่า Gauge จะรากฎขึ้นในลักษณะดังรูปด้านล่าง ผู้ใช้งานสามารถตั้งชื่อให้กับ Gauge, กำหนดแหล่งที่มาของตัวเลขในการแสดงผล (INPUT), ช่วงของตัวเลขที่จะแสดงผล และสามารถใส่หน่วยวัดให้กับการแสดงผลได้

ในตัวอย่างนี้ Gauge จะถูกตั้งชื่อว่า TemperatureGauge, กำหนดสีของตัวอักษรเป็นสีฟ้า (สามารถทำการเปลี่ยนโดยการจิ้มที่วงกลมด้านหลังช่องการตั้งชื่อ สีจะเปลี่ยนไปเรื่อยๆ), กำหนดแหล่งที่มาของค่าที่ใช้ในการแสดงผล (INPUT) เป็น Virtual V0, กำหนดช่วงในการแสดงผลให้อยู่ในเขต 0 ถึง 50

ภายใต้หมวด LABEL นี้ ผู้ใช้สามารถใส่คำอธิบายไว้ด้านหน้าและหลังค่าที่จะนำมาแสดงผล โดยในตัวอย่างนี้ ด้านหลังตัวเลขอุณหภูมิที่อ่านได้จะมีตัวอักษร ‘C’ ต่อท้าย เพื่อให้ทราบว่าค่าที่อ่านได้นั้นเป็นหน่วยองศาเซลเซียส และ /pin/ ที่ปรากฏเป็นสีเขียวนั้น หมายถึงตำแหน่งของตัวเลขที่จะนำมาแสดงผล

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWRnhFqrmwMtjmn_8I%2Fimage.png?alt=media\&token=d5e4148b-46c0-4150-8b1b-ec33ea69b2ca)

12\. เมื่อกดปุ่ม OK จากขั้นตอนก่อนหน้า หน้าแดชบอร์ดจะปรากฏ Gauge ที่ตั้งค่าแล้วดังรูป

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWRutpnogV3-U5ldy5%2Fimage.png?alt=media\&token=51ea7c16-0768-40c3-b719-5a26f4b399b6)

13\. ในหน้าแดชบอร์ด จิ้มที่ปุ่มรูปทรงน๊อตที่อยู่ด้านซ้ายของปุ่มเพลย์

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWS-bNi70XUTTyPT7z%2Fimage.png?alt=media\&token=38976bf9-e8bf-4ab1-9897-d52318a629ec)

14\. หน้าการตั้งค่า Project จะเปิดขึ้นมา ให้ผู้ใช้ทำการคัดลอก AUTH TOKEN key นี้ไปใส่ในช่อง Auth Token ในการตั้งค่าการทำงานของ Blynk ที่อยู่ในซอฟต์แวร์เมกเกอร์เพลย์กราวน์

{% hint style="warning" %}
ตัวอักษรเล็กและใหญ่ใน AUTH TOKEN key นั้นจำเป็นต้องกรอกให้เหมือนกับ AUTH TOKEN key ที่แสดงในหน้าการตั้งค่า Project ของแอพพลิเคชั่น Blynk ผู้ใช้งานควรใช้วิธีการกดปุ่ม E-Mail เพื่อทำการส่ง AUTH TOKEN key ผ่านทาง email เพื่อป้องกันการกรอกผิด
{% endhint %}

นอกจากนี้ผู้ใช้งานสามารถแก้ไขการตั้งค่าของ Project หากมีการตั้งค่าผิดพลาดในขั้นตอนการสร้าง Project ในข้อ 7

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWSHHAB-vTCt76rZ54%2Fimage.png?alt=media\&token=ab963f0b-c64c-4b41-8498-506b48c6109d)

### ภายในซอฟต์แวร์เมกเกอร์เพลย์กราวน์

15\. ในหน้า Device / Device Configuration ของเมกเกอร์เพลย์กราวน์ซอฟต์แวร์ ให้นำ AUTH TOKEN key ที่ได้จากแอพพลิกเคชั่น Blynk มาใส่ให้ถูกต้อง จากนั้นกำหนดชื่อและรหัสผ่านของ WiFi ที่สามารถออกอินเตอร์เน็ตได้

{% hint style="info" %}
WiFi นี้จะต้องอยู่บนเครือข่ายที่สามรถเชื่อมต่อกับอินเตอร์เน็ตได้ทันที ไม่ผ่านการเข้ารหัสที่ต้องใช้บัญชีผู้ใช้หรือพร๊อกซี่ใดๆ และต้องเป็นการเข้ารหัสประเภท WEP, WPA2-PSK แบบ AES หรือ TKIP
{% endhint %}

{% hint style="warning" %}
หากผู้ใช้งานใช้อุปกรณ์ ESP8266 หรือ ESP32 โปรตรวจสอบให้มั่นใจว่า WiFi ที่ใช้เป็นคลื่นความถี่ 2.4GHz
{% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWT_t4GiJzpTEJkm9j%2Fimage.png?alt=media\&token=2bb84393-da4b-4187-b574-98fac4eaede4)

16\. ไปที่หน้าเมนู Diagram เพื่อทำการต่อบล็อกคำสั่ง

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWThxPkwMijMB8KabR%2Fimage.png?alt=media\&token=feb4153e-99cd-4d91-9a8b-43720c2e3a79)

17\. คลิกที่ปุ่ม Add scene หรือทำการคลิกขวาที่หน้ากระดานแล้วไปที่ Add scene เพื่อทำการสร้างซีนเปล่า และทำการเพิ่ม Virtual Gauge

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWTq-Ugexl_vcR_i47%2Fimage.png?alt=media\&token=bc228ff8-5e3c-4c47-8b26-8719ff0341a4)

18\. คลิกที่ Virtual Gauge ที่อยู่ภายใต้ซีน เพื่อทำการตั้งค่า จากนั้นแก้ไขการแสดงผลในช่อง Action ให้เป็น Display number และ ช่อง Value เปลี่ยนการแสดงผลค่าคงที่ที่เดิมเป็นบล็อกสีฟ้า ให้เป็นบล็อกสีม่วง และเลือก Temperature1’s Temperature

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWTy5yoG2jsoZ2Szvd%2Fimage.png?alt=media\&token=220adfa1-a716-4736-b5a1-b93f447d5e8c)

19\. เพิ่ม Delay เพื่อหน่วงเวลาการส่งข้อมูลไปยังแอพพลิเคชั่น Blynk 

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWU4II-RMr0nHHHQVR%2Fimage.png?alt=media\&token=a475f953-df88-447c-b79f-64620db5f3bc)

20\. เชื่อมต่อไดอะแกรมเข้าด้วยกันดังรูปและกดปุ่ม upload ไปยังอุปกรณ์ไมโครคอนโทรเลอร์

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWUDF-M35lJabfrXVF%2Fimage.png?alt=media\&token=2dfc5e33-707e-4ec5-b9e6-0cad8dbf5399)

### ภายในแอพพลิเคชั่น Blynk

21\. กดปุ่มเพลย์ในหน้าแดชบอร์ด

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWUMOi1iIiMdqLAyh4%2Fimage.png?alt=media\&token=18a51382-ed86-493e-aa1c-00b5dce37e8d)

22\. เมื่ออัพโหลดโปรแกรมไปยังไมโครคอนโทรลเลอร์บอร์ดสำเร็จแล้ว ในกรณีใช้งาน Maker Playground Baseboard

* ไฟสีแดงกระพริบ หมายความว่า ไมโครคอนโทรเลอร์สามารถเชื่อมต่อ WiFi สำเร็จแล้ว แต่ยังไม่สามารถเชื่อมต่อไปยังบริการ IoT หรืออินเตอร์เน็ต
* ไฟสีแดงติดต่อเนื่อง หมายความว่า ไมโครคอนโทรเลอร์สามรถเชื่อมต่อ WiFi และบริการ IoT สำเร็จแล้ว

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWQcxm719xQqPQdxRj%2F-LxWUaUV_lomVEkfBkYh%2Fimage.png?alt=media\&token=7a326cfd-68b0-4fee-beac-dec78355b0ae)

23\. หลังจากแอพพลิเคชั่น Blynk ค้นพบไมโครคอนโทรเลอร์ที่ออนไลน์อยู่ได้แล้ว ตัวเลขอุณหภูมิที่อ่านได้จะปรากฏดังตัวอย่างด้านล่าง

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWUdTRoax5eD14MKa_%2F-LxWUnKQuOIpUWcSnuIf%2Fimage.png?alt=media\&token=0b96e30d-8780-41ea-9ab7-7aad7bc57afe)

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWUdTRoax5eD14MKa_%2F-LxWUr00YVSaQVeXPxVF%2Fimage.png?alt=media\&token=b18dabda-532b-44e6-8451-249d9f7ff399)