> 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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.makerplayground.io/intro/iot/blynk/1-gauge-blynk.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.