> For the complete documentation index, see [llms.txt](https://docs.makerplayground.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.makerplayground.io/intro/iot/blynk/1-gauge-blynk.md).

# ตัวอย่าง 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 %}

![](/files/-LxWNx9qRbbiZsuZKAh7)

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

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

![](/files/-LxWNnE39sQveQYbzAZN)

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

![](/files/-LxWO7EDKG1ry5WdkWW_)

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 %}

![](/files/-LxWOIHrTY0fZaQi4BeU)

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

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

![](/files/-LxWOt6cLUuvaEJfgSKy)

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

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

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

![](/files/-LxWPnS26os6DYANRiEA)

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

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

![](/files/-LxWQbOt6M9g7Pv8tse8)

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

![](/files/-LxWQisXdhHuWI4lsFvX)

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

![](/files/-LxWRPu6BZjqgG8GlVs9)

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

![](/files/-LxWRZDzts2RgvNP2wf0)

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

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

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

![](/files/-LxWRnhFqrmwMtjmn_8I)

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

![](/files/-LxWRutpnogV3-U5ldy5)

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

![](/files/-LxWS-bNi70XUTTyPT7z)

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

![](/files/-LxWSHHAB-vTCt76rZ54)

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

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 %}

![](/files/-LxWT_t4GiJzpTEJkm9j)

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

![](/files/-LxWThxPkwMijMB8KabR)

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

![](/files/-LxWTq-Ugexl_vcR_i47)

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

![](/files/-LxWTy5yoG2jsoZ2Szvd)

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

![](/files/-LxWU4II-RMr0nHHHQVR)

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

![](/files/-LxWUDF-M35lJabfrXVF)

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

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

![](/files/-LxWUMOi1iIiMdqLAyh4)

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

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

![](/files/-LxWUaUV_lomVEkfBkYh)

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

![](/files/-LxWUnKQuOIpUWcSnuIf)

![](/files/-LxWUr00YVSaQVeXPxVF)