# ตัวอย่าง 2 - ทดลองสร้างสวิทช์เปิดปิดและปรับความสว่างหลอดไฟผ่าน Blynk

ในการทดลองนี้ จะทำการสร้างสวิทช์เสมือนและแถบเลื่อนบน Blynk แอพพลิกเคชั่น เพื่อสั่งให้หลอดไฟที่อยู่บนอุปกรณ์ไมโครคอนโทรเลอร์ เปิด-ปิด และเปลี่ยนแปลงความสว่าง

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

1. Maker Playground Baseboard
2. Maker Playground LED

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

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-LxWj10OipLweQgznLih%2F-LxWkEVKOdT4ULMdF_x1%2Fimage.png?alt=media\&token=854d0463-93ea-4660-8535-841064dd36b6)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWj10OipLweQgznLih%2F-LxWkT5T8fHnSRscWT93%2Fimage.png?alt=media\&token=5de531f4-791a-4c89-805f-2b4ffc596033)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWj10OipLweQgznLih%2F-LxWku0NvYfUu_3AT4KD%2Fimage.png?alt=media\&token=20627bf3-6f39-4eae-a8a8-196e6abecbc7)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWkwIw5AiIQ316yCAT%2F-LxWl7ZOSoeAfXQIO9XN%2Fimage.png?alt=media\&token=277f6987-45d8-425b-98a0-3e1427c59c29)

5\. เมื่อผู้ใช้งานเพิ่ม Maker Playground LED, Blynk Virtual Button และ Blynk Virtual Slider ภายใต้เมนู Device / Device Configuration จะมีรายการอุปกรณ์ LED1, VirtualButton1, VirtualSlider1 เพิ่มเข้ามา

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWm2hIjlBPy8XA6-BN%2F-LxWm8-WhKYXeYQwWtGt%2Fimage.png?alt=media\&token=37de624b-97b6-45b7-8b71-931b7454d8d1)

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

6\. ผู้ใช้ต้องเลือก Port ให้กับ Maker Playground LED, Blynk Virtual Button และ Blynk Virtual Slider ที่เพิ่มเข้ามาใหม่ เมื่อทำการเลือก Port ให้กับอุปกรณ์เรียบร้อยแล้ว หน้าต่างจำลองการเชื่อมต่อวงจรทางด้านขวาจะวาดภาพการเชื่อมต่อสายระหว่าง Controller และ Sensor โดยอัติโนมัติ

{% hint style="warning" %}
โปรดตรวจสอบ virtual pin สำหรับอุปกรณ์ Blynk เสมอ หากต้องการใช้งานต่างหน้าที่ ไม่ควรมีเลข virtual pin ที่ซ้ำกัน
{% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWmWRWGH7KiQIKX6IC%2F-LxWomPt9FLfbDK3fn2M%2Fimage.png?alt=media\&token=29841fd4-cafa-4658-b7a3-68e5cdf7c64b)

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

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWpcTSInPhkaNw9jrC%2F-LxWpjmX9h3TPcYib5BT%2Fimage.png?alt=media\&token=1d966f93-05f3-41ed-b687-cf484c45558b)

8\. ตั้งชื่อ 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-LxWqwS7mUrQ0Tn3tcxi%2F-LxWr1wA5L6EmGXshymi%2Fimage.png?alt=media\&token=171619b9-67d6-4366-a988-b22908ef35b3)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWqwS7mUrQ0Tn3tcxi%2F-LxWr8mCQet_qL0SAreN%2Fimage.png?alt=media\&token=df8dc998-4792-4b58-92bf-508f9d608a3d)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWqwS7mUrQ0Tn3tcxi%2F-LxWrlWG49bWkyH0fEG8%2Fimage.png?alt=media\&token=2969d009-562a-47b4-b552-9aa9abb95147)

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

{% hint style="info" %}
ผู้ใช้งานสามารถจัดวางและปรับขนาดของอุปกรณ์ใน Blynk แอพพลิเคชั่นได้
{% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWs4odiFE8x-YUBB09%2F-LxWs7CspedN0NHXqF5n%2Fimage.png?alt=media\&token=8b3e265c-2879-4e2a-a41e-b7c1edc0f5fb)

12\. จิ้มที่ตัวอุปกรณ์เพื่อทำการตั้งค่า ผู้ใช้งานสามารถเปลี่ยนชื่อของอุปกรณ์ได้ ในขั้นตอนนี้ควรตรวจสอบเลข Virtual pin ให้ตรงกับเลขที่ตั้งไว้ในซอฟต์แวร์เมกเกอร์เพลย์กราวน์ โดยในตัวอย่างนี้

#### การตั้งค่าสำหรับ Button

* เปลี่ยน OUTPUT ของ Button เป็น Virtual pin 0
* เปลี่ยน MODE ของ Button เป็น SWITCH 

{% hint style="info" %}

* PUSH จะใช้งานเหมือนสวิทช์กดติด ปล่อยดับ
* SWITCH จะใช้งานเหมือนสวิทช์ไฟทั่วไป กดหนึ่งครั้งเพื่อเปิด กดอีกหนึ่งครั้งเพื่อปิด
  \*
  {% endhint %}

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWs4odiFE8x-YUBB09%2F-LxWsv-xpytlovldbDfn%2FIMG_2685.PNG?alt=media\&token=14c00159-646d-4db7-8e8d-27497035a9de)

#### การตั้งค่าสำหรับ Slider

* เปลี่ยน OUTPUT ของ Slider เป็น Virtual pin 1
* เปลี่ยนช่วงค่าของ OUTPUT เป็น 0 ถึง 100
* เปลี่ยน DECIMALS เป็น # ตัวเดียว เพื่อให้ใช้เลขจำนวนเต็มที่ไม่มีทศนิยม

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWs4odiFE8x-YUBB09%2F-LxWsoq_qTLxn-MUCjM5%2Fimage.png?alt=media\&token=b3f2e820-d124-484e-a9a8-496da07bafe4)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWu3kfPXWHm54F0B1x%2F-LxWw2WZ5EkmF5WORXam%2Fimage.png?alt=media\&token=b1e39de6-3dc3-4b99-8391-f79cf158e80a)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWw7KREV0Pevrc-RjH%2F-LxWwVi0PElo7TSJ95-6%2Fimage.png?alt=media\&token=7a5852b6-9c01-441a-a19a-d4d029bee2e4)

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

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-LxWwYIYTXMMqtKN19ai%2F-LxWx1UlbTI9yfmXXsIv%2Fimage.png?alt=media\&token=8dd38255-4e44-489b-99c5-3a144451b580)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWwYIYTXMMqtKN19ai%2F-LxWxC0RutEcM0e0kZMO%2Fimage.png?alt=media\&token=a55e94cd-1e85-42bb-894d-f0db9da4707d)

17\. คลิกที่ปุ่ม Add Condition หรือทำการคลิกขวาที่หน้ากระดานแล้วไปที่ Add Condition เพื่อทำการสร้างบล็อกเงื่อนไข จำนวน 2 บล็อก และในแต่บล็อกให้เพิ่ม VirtualButton1 เข้าไปด้านใน

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWwYIYTXMMqtKN19ai%2F-LxWxkHEMR3-P2lNbh8x%2Fimage.png?alt=media\&token=8cd6299e-e3a0-436b-ab44-0461eac23d90)

18\. แก้ไข Condition ภายใน VirtualButton1 อันใดอันหนึ่งให้เป็น **Not press**

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWwYIYTXMMqtKN19ai%2F-LxWy3XtwJnfN4PNiTdb%2Fimage.png?alt=media\&token=ef8cd20a-8fd4-4917-aa54-5f75c6b0fb57)

จะได้ผลดังรูปด้านล่าง

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWwYIYTXMMqtKN19ai%2F-LxWyKP2GENHD2UQuoTx%2Fimage.png?alt=media\&token=c868d6aa-172b-4621-a1c8-cd69d6fd9739)

19\. คลิกที่ปุ่ม Add Scene หรือทำการคลิกขวาที่หน้ากระดานแล้วไปที่ Add Scene เพื่อทำการสร้างบล็อกเงื่อนไข จำนวน 2 บล็อก และในแต่บล็อกให้เพิ่ม LED1 เข้าไปด้านใน

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWwYIYTXMMqtKN19ai%2F-LxWylgjqQkR8V0gW0e1%2Fimage.png?alt=media\&token=2d19688e-b741-4188-8037-229db7d86f2c)

20\. แก้ไขสถาณะของหลอดไฟ LED1 ในบล็อกซีนอันใดอันหนึ่งจาก ON ให้เป็น OFF

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWyou9CQm5ICpuwd3f%2F-LxWzZyLT6GQRgH40igA%2Fimage.png?alt=media\&token=46695d93-eb40-4edd-bba6-bbc33f2c9885)

21\. บล็อกซีนที่มีสถาณะของหลอดไฟ LED1 เป็น ON ให้แก้ไข Brightness ให้เป็นบล็อก value สีม่วง และตั้งค่าให้ใช้งาน VirtualSlider1's Value ดังรูป

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxWyou9CQm5ICpuwd3f%2F-LxX-AgA0eoVYs3EQ5IU%2Fimage.png?alt=media\&token=d54732e6-0140-4cbe-8871-df7299d233ad)

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

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxX-ETtiEE2rwCxRW05%2F-LxX-YeWjM0bCs4EpUae%2Fimage.png?alt=media\&token=c640a0d6-2de6-4c15-8df8-483b469016f6)

23\. หลังจากการอัพโหลดโปรแกรมเสร็จสิ้น กดปุ่มเล่นใน Blynk แอพพลิเคชั่น

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxX-_ujCdxFmj9mzASX%2F-LxX0IHZSsl6Tmf_fW7h%2Fimage.png?alt=media\&token=311ab0a0-6c49-405c-ac5d-86ad300c8541)

24\. ทดลองกด BUTTON และปรับค่า SLIDER จากนั้นลองสังเกตผลที่ได้

![](https://2179845821-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtOYdzdDgMXSdDt8NkP%2F-LxX13Xg10gdXSrc08Jc%2F-LxX1L_rFwEipMe1kRNh%2Fimage.png?alt=media\&token=0e78a5af-6dc5-410f-87e2-cbb59ac6a098)