# Quickstart

## Introduction

### What is Maker Playground?

Maker Playground, the complete embedded system, IoT development software. Peripheral's behavior studies, circuit wiring diagram, instruction designing and uploading the finish instruction to the device are done in just one. Maker Playground uses diagram to define device's behavior, then the source code and circuit wiring diagram will be generated. Many embedded controllers are support such as Arduino (AVR), ESP8266 & ESP32 based platforms and Raspberry Pi.

### Installation

Download Maker Playground software from [www.makerplayground.io](http://www.makerplayground.io) For further installation instruction, click the link below.

{% content-ref url="/pages/-LtOays66CV3e6GSUPwg" %}
[Installation Instruction](/en/intro/installation)
{% endcontent-ref %}

## Start Maker Playground within 5 Min.

1\. Choose platform and controller. For example; Arduino (AVR8) and Arduino UNO board.

![](/files/-LtOr6q5xmodce1sSt8o)

2\. Choose peripheral from Device Explorer tab by clicking + at the top right to add the peripheral. For example; LED peripheral will be added and the LED will be appear in the circuit diagram pane.&#x20;

![](/files/-LtOrB4JZ0Cs4R_ZbRw6)

{% hint style="warning" %}
Warning sign will appear besides the device tab while device's configuration parameter is not complete.
{% endhint %}

3\. Device's port connection can be configured under Device Configuration tab. The port can be selected by user or using Auto Select for optimum selection. The warning sign besides the device tab will disappear after the device's port is selected.

![](/files/-LtOtbRcJFIPcBLe21gq)

4\. Complete the device's wiring and begin the test by choosing communication port between the controller and the computer and press <img src="/files/-LtOu_ad_cwil2BtKyFT" alt="" data-size="line"> button to start Interactive Mode.

![](/files/-LtOwEiJS2jGSoE6mklv)

For further device configuration information, click the link below.

{% content-ref url="/pages/-LtOfFj7SlRpxAH00et2" %}
[Devices TAB](/en/intro/component/device)
{% endcontent-ref %}

5\. When software uploading complete, <img src="/files/-LtOu_ad_cwil2BtKyFT" alt="" data-size="line"> button will be turned to <img src="/files/-LtP1ZoM4G_tadOtbC7_" alt="" data-size="line"> button. Now, the device(s) within the circuit diagram pane can be clicked to open the setting menu for action setting or viewing input values. By changing LED's action from ON to OFF or changing LED's brightness level and press <img src="/files/-LtOu_ad_cwil2BtKyFT" alt="" data-size="line"> button, the action of the physical device will be performed immediately.

![](/files/-LtP3HQxeP3SzTUxAXSZ)

{% hint style="info" %}
Interactive mode supports commanding and retrieving data from any type of peripherals. This is able to safe time for installing libraries, coding, uploading software and serial monitoring.
{% endhint %}

For further instruction for Interactive Mode, please visit the link below.

{% content-ref url="/pages/-LtOf3XyrlTXCIkUZwqh" %}
[Interactive Mode](/en/intro/component/interactive)
{% endcontent-ref %}

6\. Next, creating sample project of LED blinking. The LED will be ON-OFF every 1 second continuously. Using Diagram tab to define instruction for the device. Click Add Scene to add new Scene Block and click LED1.

![](/files/-LtPvUdF5r289A9SyOnQ)

7\. Add another scene block, Add LED1 and configure LED1's action in this scene to be OFF as shown.

![](/files/-LtPwqjOQ4pK2A-KOh-L)

The complete diagram will be shown below.

![](/files/-LtPwvic8IWSnYsuRRqo)

8\. Add and place delay block among scene1 and scene2 blocks.

![](/files/-LtrhgJqUH1OElUJ4FYi)

9\. Add 1 more delay block at the last position of the series.

![](/files/-LtrpIcYh_q7ZojZQ_w-)

10\. Connect the blocks together.

![](/files/-Ltrpc-olgvxlW-ZCjJZ)

![](/files/-LtrphPGBUxD7_JDjaZx)

11\. Press upload button at the right top of the screen.

![](/files/-Ltrqs-EAJgr6Um3QOBJ)

For further diagram connection information, please visit the link below.

{% content-ref url="/pages/-LtOevGlW9smUd8a321k" %}
[Maker Playground Diagram](/en/intro/component/diagram)
{% endcontent-ref %}


# Maker Playground's Introduction

เมกเกอร์เพลย์กราวน์เป็นซอฟต์แวร์สำหรับพัฒนาระบบสมองกลฝังตัวและ IoT แบบครบวงจร ตั้งแต่ขั้นตอนของการทดสอบและเรียนรู้การทำงานอุปกรณ์, การออกแบบการเชื่อมต่อวงจร, การเขียนโปรแกรมควบคุมอุปกรณ์และการอัพโหลดโปรแกรมไปยังบอร์ด เมกเกอร์เพลยกราวน์ใช้การต่อไดอะแกรมเพื่ออธิบายผลลัพธ์การทำงานที่ต้องการ จากนั้นระบบจะทำการสร้างซอร์สโค้ดและภาพแสดงการเชื่อมต่อวงจรให้สำหรับบอร์ดพัฒนาหลากหลายแพลตฟอร์มอาทิบอร์ด Arduino (AVR), บอร์ดพัฒนาที่ใช้ชิป ESP8266 และ ESP32 และบอร์ด Raspberry Pi

{% embed url="<https://www.youtube.com/watch?v=Fxjhn8D7I9A>" %}


# Installation Instruction

## Windows 10 64-Bit Operating System

1.Download the installer from MakerPlayground's [website](https://www.makerplayground.io/).

2.Double click the installer name "MakerPlayground-\<version no.>.exe". The installer window will appear then clock 'Next >' and follow the instruction appeared in the screen.

3\. If desktop shotcut is needed, tick 'Create a desktop shotcut' and click 'Next >' button.

4\. Then click 'Install' button, the installation will begin.

5\. After installation process is done, click 'Finish'.

## MAC OS 10.13+ Operating System

{% hint style="warning" %}
The Internet connection is required while running the installer. Some essential hardware libraries are required to download and install.
{% endhint %}

1.Download the installer from MakerPlayground's [website](https://www.makerplayground.io/).

2.Double click the installer name "MakerPlayground-\<version no.>.pkg". The installer window will appear then clock 'Next >' and follow the instruction appeared in the screen.

3\. Before the setup start, pop-up window asking for computer logging in password will appear. Type the password to continue.

4\. Maker Playground is ready to use after the installation is complete.


# Maker Playground Software

Maker Playground software consists of 3 main parts..

### 0. Right top-bar

![รูปแสดงลักษณะของปุ่มควบคุมในแถบด้านบน](/files/-LtypKfFoBLPHXhmViAd)

#### 1. Serial port number selection

#### 2. Interactive mode activation button

#### 3. Upload program to MCU button

### 1. Device TAB

Device cofiguration page. MCU model and peripheral configuration will be setup here.

![](/files/-LtycSxz3Jy0mcW78QxM)

### 2. Diagram TAB

Instruction diagram drawning space.

![](/files/-LtycH4LSfhmNqZTRN4d)

### 3. Device Monitor TAB

Peripherals' activities will be shown here. Users are able to ajdust log level, filter target device and view sensor's value both in number and graph.

![](/files/-Ltyc715U7PTnSJDLGKI)


# Devices TAB

Micro-Controller (MCU) and peripherals configuration.

![รูปแสดงหน้าต่างการตั้งค่าอุปกรณ์](/files/-Ltyq1JF0QYeSWXfBpFZ)

Under device tab, there are 2 sub-tabs;

#### [1. Device Configuration](/en/intro/component/device/undefined)

#### [2. Device Explorer](/en/intro/component/device/undefined-3)


# Device Configuration

![](/files/-LtytShsZLVzqxj6hG6Z)

### 1. Choose Micro-Controller

Define the micro-controller that you are going to fit with the project. Selected micro-controller model affects the availability of the peripheral in the Device Explorer page.

### 2. Choose peripherals and device's connection

After clicking add button in the Device Explorer page, the list of the selected peripheral will be shown here. Port or pin selection is a must to be done by user or use "Auto Select" button to let Maker Playground finishes it up instantly. Removing the unused device by clicking "x" button.

### 3. Virtual circuit diagram

The virtual graphic circuit diagram for displaying the whole device connection in the project. The displayed connection in the diagram will be changed real-time while user is modifying device's connection. It


# Device Explorer

![](/files/-Ltz-egVDvoajOk6foKG)

### 1. Peripheral search box

Device brands, models and keyword are supported for searching.

### 2. Groupping button

Listing devices by Type and Brand.

### 3. Peripheral list

All support devices in Maker Playground platfrom will be shown here.

### 4. Virtual circuit diagram

Virtual circuit diagram will be changed simultaneously while devices or connection port are changed. This virtual circuit diagram can be a reference for users to create the real circuit.


# How to setup your device?

A simple guide for simple device setup.

#### 1. Choose MCU

Maker Plaground supported MCUs are available in the drop-down list menu under Device / Device Configuration tab. Please select the MCU in the list corresponds to the real MCU that your are using.

![](/files/-Lu2lEENrlSG_TtWDSJP)

After MCU has been selected, the picture of selected MCU will be shown on virtual circuit diagram.

![](/files/-Lu2lsoxCROp9eefNkFv)

#### 2. Choose peripheral

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

![](/files/-Lu2no9vnka04CMI3f89)

1. ผู้ใช้สามารถป้อนคำไขเพื่อทำการค้นหาอุปกรณ์ต่อพ่วงได้ทันที รอบรับทั้งยี่ห้อ, รุ่น และคำไขของประเภทอุปกรณ์ต่อพ่วง
2. ผู้ใช้สามารถสลับวิธีการแสดงผลระหว่างการเรียงตามประเภท (Type) และยี่ห้อ (Brand)

เมื่อค้นพบอุปกรณ์ต่อพ่วงที่ต้องการแล้ว&#x20;

![](/files/-Lu2pLCa4-CE0EwNA7Sq)

1. กดปุ่ม + เพื่อเพิ่มอุปกรณ์เข้าสู่รายการที่จะนำมาใช้ และรายการของอุปกรณ์ต่อพ่วงที่ถูกเพิ่มเข้าไปแล้วจะไปปรากฏในหน้า Device Configuration เพื่อให้ผู้ใช้เลือกพอร์ทที่ต้องการนำมาเชื่อมต่อกับอุปกรณ์ควบคุม
2. กดปุ่มลูกโลกเพื่อทำการเปิด datasheet สืบค้นข้อมูลเกี่ยวกับตัวอุปกรณ์ โดยที่ซอฟต์แวร์เมกเกอร์เพลย์กราวน์จะเปิดเว็บบราวเซอร์เพื่อแสดง online datasheet ของอุปกรณ์ต่อพ่วง

หลังจากเพิ่มอุปกรณ์ต่อพว่งที่ต้องการเข้าระบบแล้ว รูปอุปกรณ์เสมือนจริงจะปรากฏขึ้นดังตัวอย่างรูปด้านล่าง

![](/files/-Lu2q4r5XJZWJsit5Ugq)

สลับหน้าต่างไปที่หน้า Device Configuration เพื่อทำการเลือกพอร์ทเชื่อมต่อและแรงดันไฟฟ้าให้อุปกรณ์ต่อพ่วง

![](/files/-Lu2rrZ9IOz8_TLX0xyI)

สามารถกดปุ่ม Auto Select เพื่อให้ซอฟต์แวร์เมกเกอร์เพลย์กราวน์เลือกการตั้งค่าให้โดยอัตโนมัติ

![](/files/-Lu2sGLNMmj3-USqv-g8)

เมื่อทำการเลือกวิธีการเชื่อมต่ออุปกรณ์ต่อพ่วงเรียบร้อยแล้ว รูปอุปกรณ์เสมือนจริงจะแสดงผลการเชื่อมสายไฟตามที่ผู้ใช้เลือก


# Interactive Mode

เพื่อการทดสอบและเข้าใจการทำงานร่วมกันของอุปกรณ์โดยที่ผู้ใช้สามารถเห็นภาพได้ชัดเจนและตรงไปตรงมา

#### 1. เลือกอุปกรณ์ควบคุมและอุปกรณ์ต่อพ่วง

#### 2. กำหนดพอร์ทของอุปกรณ์ต่อพ่วง

#### 3. กดปุ่มเริ่มสีเขียวด้านบนขวาในหน้าต่างหลักดังรูป

![](/files/-Lu6yxNV75mOo1kaVy9W)

#### 4. เมกเกอร์เพลย์กราวน์ซอฟต์แวร์จะทำการอัพโหลดข้อมูลไปยังอุปกรณ์ควบคุม

#### 5. เมื่อการอัพโหลดเสร็จสมบูรณ์ แถบความคืบหน้าในการอัพโหลดจะหายไป เหลือเพียงปุ่มหยุดสีแดง

#### 6. ทดลองควบคุมหรืออ่านค่าที่ได้จากอุปกรณ์ต่อพ่วง

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

![](/files/-Lu71cot2VR5QekkORR8)

![](/files/-Lu71pBYaVCj8nkZY9bV)

![](/files/-Lu72RKyRxT3mtknV58g)


# Maker Playground Diagram


# Device Monitor

##


# FAQ


# เริ่มต้นอย่างง่าย

## แนะนำซอฟต์แวร์

### เมกเกอร์เพลย์กราวน์คืออะไร?

เมกเกอร์เพลย์กราวน์เป็นซอฟต์แวร์สำหรับพัฒนาระบบสมองกลฝังตัวและ IoT แบบครบวงจร ตั้งแต่ขั้นตอนของการทดสอบและเรียนรู้การทำงานอุปกรณ์, การออกแบบการเชื่อมต่อวงจร, การเขียนโปรแกรมควบคุมอุปกรณ์และการอัพโหลดโปรแกรมไปยังบอร์ด เมกเกอร์เพลยกราวน์ใช้การต่อไดอะแกรมเพื่ออธิบายผลลัพธ์การทำงานที่ต้องการ จากนั้นระบบจะทำการสร้างซอร์สโค้ดและภาพแสดงการเชื่อมต่อวงจรให้สำหรับบอร์ดพัฒนาหลากหลายแพลตฟอร์มอาทิบอร์ด Arduino (AVR), บอร์ดพัฒนาที่ใช้ชิป ESP8266 และ ESP32 และบอร์ด Raspberry Pi

### การติดตั้ง

ดาวน์โหลดซอฟต์แวร์ได้จาก [www.makerplayground.io](https://docs.makerplayground.io/www.makerplayground.io) สำหรับขั้นตอนการติดตั้งโดยละเอียดสามารถศึกษาเพิ่มเติมได้จากลิงค์ด้านล่าง

{% content-ref url="/pages/-LtOays66CV3e6GSUPwg" %}
[ขั้นตอนการติดตั้ง](/intro/installation)
{% endcontent-ref %}

## เริ่มต้นใช้งานใน 5 นาที

1\. เลือกแพลตฟอร์มและคอนโทรลเลอร์ที่ต้องการเช่นแพลตฟอร์ม Arduino (AVR8) และบอร์ด Arduino UNO &#x20;

![](/files/-LtOr6q5xmodce1sSt8o)

2\. เลือกอุปกรณ์จากแถบ Device Explorer โดยกดเครื่องหมาย + ที่มุมขวาบนเพื่อทำการเพิ่มอุปกรณ์ โดยในตัวอย่างนี้จะเลือกเป็นหลอดไฟ LED ภายหลังจากที่กด + จะเห็นภาพเบรดบอร์ดและหลอดไฟ LED ปรากฏขึ้นในด้านขวาดังรูป

![](/files/-LtOrB4JZ0Cs4R_ZbRw6)

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

3\. เลือกพอร์ตเชื่อมต่อโดยกลับไปยังแถบ Device Configuration และเลือกพอร์ตเชื่อมเชื่อมต่อด้วยตนเองหรือกดปุ่ม Auto Select เพื่อให้ระบบเลือกพอร์ตที่เหมาะสมให้ โดยเมื่อเลือกพอร์ตเชื่อมต่อครบถ้วนจะเห็นภาพวงจรที่สมบูรณ์ดังภาพด้านขวาและเครื่องหมายตกใจรูปสามเหลี่ยมจะหายไปจากแถบ Device

![](/files/-LtOtbRcJFIPcBLe21gq)

4\. เชื่อมต่ออุปกรณ์ตามภาพและทดลองการทำงานของอุปกรณ์โดยเลือกพอร์ตที่เชื่อมต่อบอร์ดเข้ากับคอมพิวเตอร์แล้วจึงกดปุ่ม <img src="/files/-LtOu_ad_cwil2BtKyFT" alt="" data-size="line"> เพื่อเริ่มต้นการทำงานของโหมดทดลองแบบโต้ตอบ (Interactive Mode)

![](/files/-LtOwEiJS2jGSoE6mklv)

สำหรับขั้นตอนการตั้งค่าอุปกรณ์โดยละเอียด สามารถศึกษาเพิ่มเติมได้จากลิงค์ด้านล่างนี้

{% content-ref url="/pages/-LtOfFj7SlRpxAH00et2" %}
[อุปกรณ์](/intro/component/device)
{% endcontent-ref %}

5\. เมื่อการอัพโหลดเฟิร์มแวร์เสร็จสิ้นปุ่ม <img src="/files/-LtOu_ad_cwil2BtKyFT" alt="" data-size="line">จะเปลี่ยนเป็นปุ่ม <img src="/files/-LtP1ZoM4G_tadOtbC7_" alt="" data-size="line"> และสามารถกดที่ภาพอุปกรณ์เพื่อเปิดหน้าต่างตั้งค่าและตั้งค่า Action เช่นในที่นี้จะทดลองกำหนดให้เป็น On ด้วยค่า Brightness (ความสว่าง) ที่ 100% จากนั้นจึงกดปุ่ม <img src="/files/-LtOu_ad_cwil2BtKyFT" alt="" data-size="line"> ที่มุมขวาบนของหน้าต่างป๊อปอัพเพื่อดูผลลัพธ์การทำงานบนบอร์ดจริงในทันที โดยสามารถทดลองเปลี่ยน Action เป็น Off เพื่อสั่งงานให้หลอดไฟปิดหรือปรับค่า Brightness เพื่อดูผลลัพธ์ได้ในทันที

![](/files/-LtP3HQxeP3SzTUxAXSZ)

{% hint style="info" %}
โหมดทดลองแบบโต้ตอบสามารถใช้สั่งงานอุปกรณ์หรืออ่านค่าจากเซนเซอร์ทุกประเภทได้ในทันที ซึ่งช่วยลดขั้นตอนของการติดตั้งไลบารี่ เขียนโค้ด อัพโหลดโปรแกรมลงบอร์ดและอ่านค่าจาก Serial Monitor ซึ่งจะต้องทำซ้ำ ๆ หลาย ๆ รอบสำหรับอุปกรณ์แต่ละตัว
{% endhint %}

สำหรับขั้นตอนการใช้โหมดทดลองแบบโต้ตอบโดยละเอียด สามารถศึกษาเพิ่มเติมได้จากลิงค์ด้านล่างนี้

{% content-ref url="/pages/-LtOf3XyrlTXCIkUZwqh" %}
[โหมดทดลองแบบตอบโต้](/intro/component/interactive)
{% endcontent-ref %}

6\. ขั้นตอนต่อไปจะทำการทดลองพัฒนาโปรแกรมไฟกระพริบเปิด-ปิดทุก ๆ 1 วินาทีแบบอัตโนมัติ โดยเปลี่ยนไปที่แถบ Diagram เพื่อเริ่มต้นวาดไดอะแกรมอธิบายการทำงานของอุปกรณ์ จากนั้นจึงกดที่ปุ่ม Add Scene เพื่อเพิ่มบล็อกซีนใหม่แล้วจึงเลือกเพิ่ม LED1 เข้าไปในซีน

![](/files/-LtPvUdF5r289A9SyOnQ)

7\. เพิ่มบล็อกซีนอีกอันหนึ่งเพื่อโดยในรอบนี้ให้กดที่กล่องของ LED1 เพื่อตั้งค่า Action ให้เป็น Off ดังภาพ

![](/files/-LtPwqjOQ4pK2A-KOh-L)

จะได้ไดอะแกรมดังรูป

![](/files/-LtPwvic8IWSnYsuRRqo)

8\. เพิ่มบล็อกดีเลย์ระหว่างบล็อกซีนทั้งสองเพื่อให้ระบบรอเวลาก่อนเริ่มทำงาน Scene2 เพื่อสั่งให้ไฟปิด

![](/files/-LtrhgJqUH1OElUJ4FYi)

9\. ทำซ้ำอีกครั้งหนึ่งและตั้งค่าเวลาที่ต้องรอเป็น 1 วินาที

![](/files/-LtrpIcYh_q7ZojZQ_w-)

10\. เชื่อมต่อบล็อกทั้งหมดเข้าด้วยกัน จะได้ไดอะแกรมที่สมบูรณ์ดังภาพ

![](/files/-Ltrpc-olgvxlW-ZCjJZ)

![](/files/-LtrphPGBUxD7_JDjaZx)

11\. กดปุ่มอัพโหลดที่มุมขวาบน เมื่ออัพโหลดสำเร็จสามารถดูผลลัพธ์การทำงานบนบอร์ดได้ทันที

![](/files/-Ltrqs-EAJgr6Um3QOBJ)

สำหรับวิธีการเชื่อมต่อไดอะแกรมโดยละเอียด สามารถศึกษาเพิ่มเติมได้จากลิงค์ด้านล่างนี้

{% content-ref url="/pages/-LtOevGlW9smUd8a321k" %}
[เมกเกอร์เพลย์กราวน์ไดอะแกรม](/intro/component/diagram)
{% endcontent-ref %}


# แนะนำซอฟต์แวร์

เมกเกอร์เพลย์กราวน์เป็นซอฟต์แวร์สำหรับพัฒนาระบบสมองกลฝังตัวและ IoT แบบครบวงจร ตั้งแต่ขั้นตอนของการทดสอบและเรียนรู้การทำงานอุปกรณ์, การออกแบบการเชื่อมต่อวงจร, การเขียนโปรแกรมควบคุมอุปกรณ์และการอัพโหลดโปรแกรมไปยังบอร์ด เมกเกอร์เพลยกราวน์ใช้การต่อไดอะแกรมเพื่ออธิบายผลลัพธ์การทำงานที่ต้องการ จากนั้นระบบจะทำการสร้างซอร์สโค้ดและภาพแสดงการเชื่อมต่อวงจรให้สำหรับบอร์ดพัฒนาหลากหลายแพลตฟอร์มอาทิบอร์ด Arduino (AVR), บอร์ดพัฒนาที่ใช้ชิป ESP8266 และ ESP32 และบอร์ด Raspberry Pi

{% embed url="<https://www.youtube.com/watch?v=Fxjhn8D7I9A>" %}


# ขั้นตอนการติดตั้ง

## สำหรับระบบปฎิบัติการ Windows 10 รุ่น 64 บิต

1.ดาวน์โหลดไฟล์ติดตั้งจากหน้า[เว็บไซต์](https://www.makerplayground.io/#installer-section)

2\. ดับเบิ้ลคลิกเพื่อเปิดไฟล์ติดตั้งชื่อ MakerPlayground-<เลขเวอร์ชั่น>.exe จะเห็นหน้าต่างดังรูปให้กด 'Next >' และทำตามขั้นตอนที่ปรากฏขึ้นบนหน้าจอ

3\. หากต้องการสร้างไอคอน shortcut ให้คลิกที่ตัวเลือก 'Create a desktop shortcut' จากนั้นคลิกที่ปุ่ม 'Next >'

4\. จากนั้นคลิกที่ปุ่ม 'Install' โปรแกรมจะเริ่มถูกติดตั้งทันที

5\. เมื่อติดตั้งโปรแกรมสำเร็จแล้ว คลิกที่ 'Finish' เป็นอันเสร็จสิ้น

## สำหรับระบบปฎิบัติการ macOS 10.13+

{% hint style="warning" %}
เครื่องคอมพิวเตอร์จำเป็นต้องเชื่อมต่ออินเทอร์เน็ตระหว่างการติดตั้งในครั้งแรกเพื่อดาวน์โหลดและติดตั้งไลบารี่ที่จำเป็น
{% endhint %}

1\. ดาวน์โหลดไฟล์ติดตั้งจากหน้า[เว็บไซต์](https://www.makerplayground.io/#installer-section)

2\. ดับเบิ้ลคลิกเพื่อเปิดไฟล์ติดตั้งชื่อ MakerPlayground-<เลขเวอร์ชั่น>.pkg จะเห็นหน้าต่างดังรูปให้กด 'Continue' และทำตามขั้นตอนที่ปรากฏขึ้นบนหน้าจอ

3\. ก่อนเริ่มการติดตั้งระบบจะแสดงหน้าต่างให้กรอกรหัสผ่าน ให้กรอกรหัสผ่านที่ใช้ในการล็อกอินเข้าเครื่องคอมพิวเตอร์

4\. เมื่อติดตั้งสำเร็จจะปรากฎหน้าต่างดังรูปและสามารถเรียกใช้งานซอฟต์แวร์ได้ทันที

ทั้งนี้หากตัวติดตั้งแสดงคำเตือนดังรูป ให้ทำการตรวจสอบการเชื่อมต่ออินเทอร์เน็ตและเริ่มการติดตั้งใหม่อีกครั้ง


# ส่วนประกอบของซอฟต์แวร์

ซอฟต์แวร์เมกเกอร์เพลย์กราวน์ประกอบไปด้วย 3 ส่วนหลักดังนี้..

### 0. ปุ่มควบคุมในแถบด้านบน

![รูปแสดงลักษณะของปุ่มควบคุมในแถบด้านบน](/files/-LtypKfFoBLPHXhmViAd)

#### 1. เมนูเพื่อทำการเลือกพอร์ทอนุกรมเพื่ออัพโหลดโปรแกรม

#### 2. ปุ่ม เริ่ม/หยุด การทำงานโหมดทดลองแบบตอบโต้

#### 3. ปุ่มอัพโหลด

### 1. อุปกรณ์ (Device)

ในส่วนของอุปกรณ์ ทำหน้าที่คัดเลือกประเภทของอุปกรณ์ควบคุมและอุปกรณ์ต่อพ่วง

![](/files/-LtycSxz3Jy0mcW78QxM)

### 2. เมกเกอร์เพลกราวน์ไดอะแกรม (Diagram)

พื้นที่เพื่อการวาดไดอะแกรมเพื่อสร้างชุดคำสั่ง

![](/files/-LtycH4LSfhmNqZTRN4d)

### 3. ระบบมอนิเตอร์ (Device Monitor)

แสดงผลสถานะหรือค่าที่อ่านได้ของอุปกรณ์ต่อพ่วงขณะที่อุปกรณ์กำลังทำงานอยู่

![](/files/-Ltyc715U7PTnSJDLGKI)


# อุปกรณ์

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

![รูปแสดงหน้าต่างการตั้งค่าอุปกรณ์](/files/-Ltyq1JF0QYeSWXfBpFZ)

#### 1. หน้าต่างตั้งค่าอุปกรณ์ (Device Configuration)

#### 2. หน้าต่างค้นหาอุปกรณ์ (Device Explorer)


# หน้าตั้งค่าอุปกรณ์

![](/files/-LtytShsZLVzqxj6hG6Z)

### 1. เลือกอุปกรณ์ควบคุม

กำหนดประเภทของอุปกรณ์ควบคุมและเลือกรุ่นที่ต้องการใช้งาน ซึ่งจะส่งผลต่อประเภทหรือรุ่นของเซนเซอร์ที่สามารถเลือกมาใช้งานในหน้าค้นหาอุปกรณ์

### 2. เลือกอุปกรณ์ต่อพ่วงและพอร์ทการเชื่อมต่อ

เมื่อกดเพิ่มอุปกรณ์ต่อพ่วงในหน้าต่างค้นหาอุปกรณ์เรียบร้อยแล้ว รายการอุปกรณ์ที่ทำการเพิ่มจะปรากฎในหน้านี้เพื่อให้ผู้ใช้ทำการเลือกพอร์ทการเชื่อมต่อกับอุปกรณ์ควบคุมหรือลบออกเมื่อไม่ใช่งาน

### 3. ส่วนแสดงผลการเชื่อมต่อวงจรเสมือนจริง

ส่วนการแสดงผลการเชื่อมต่อวงเสมือนจริงจะปรับเปลี่ยนหน้าตาและรูปแบบการเชื่อมต่อของวงจรทันทีตามที่ผู้ใช้ได้เลือกอุปกรณ์และพอร์ทเชื่อมต่อจากขั้นตอนก่อนหน้า ผู้ใช้สามารถดูตำแหน่งการเชื่อมต่อของสายไฟเพื่อทำการเชื่อมต่อตามได้ทันที&#x20;


# หน้าค้นหาอุปกรณ์

![](/files/-Ltz-egVDvoajOk6foKG)

### 1. กล่องข้อความใส่คำไขเพื่อทำการค้นหาอุปกรณ์

รองรับการค้นทางอุปกรณ์ตามประเภท, รุ่น และยี่ห้อผู้ผลิตสินค้า

### 2. ปุ่มสลับการจัดเรียงรายการอุปกรณ์ต่อพ่วง

สามารถสลับหมวดการแสดงผลของอุปกรณ์ได้ตามประเภทหรือยี่ห้อผู้ผลิตสินค้า

### 3. รายการอุปกรณ์ต่อพ่วง

แสดงผลรายการอุปกรณ์ทั้งหมดที่เมกเกอร์เพลย์กราวน์รองรับหรือผลการค้นหาที่ผู้ใช้งานได้ทำการกรอกคำไข

### 4. ส่วนแสดงผลการเชื่อมต่อวงจรเสมือนจริง

ส่วนการแสดงผลการเชื่อมต่อวงเสมือนจริงจะปรับเปลี่ยนหน้าตาและรูปแบบการเชื่อมต่อของวงจรทันทีตามที่ผู้ใช้ได้เลือกอุปกรณ์และพอร์ทเชื่อมต่อจากขั้นตอนก่อนหน้า ผู้ใช้สามารถดูตำแหน่งการเชื่อมต่อของสายไฟเพื่อทำการเชื่อมต่อตามได้ทันที&#x20;


# การใช้งานหน้าต่างอุปกรณ์

แนวทางการเลือกและตั้งค่าอุปกรณ์ควบคุมและอุปกรณ์ต่อพ่วง

#### 1. เลือกอุปกรณ์ควบคุม

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

![](/files/-Lu2lEENrlSG_TtWDSJP)

เมื่อเลือกอุปกรณ์ที่ต้องการสำเร็จแล้ว รูปภาพเสมือนจริงของอุปกรณ์ควบคุมจะแรากฏทางด้านขวา

![](/files/-Lu2lsoxCROp9eefNkFv)

#### 2. เลือกอุปกรณ์ต่อพ่วง

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

![](/files/-Lu2no9vnka04CMI3f89)

1. ผู้ใช้สามารถป้อนคำไขเพื่อทำการค้นหาอุปกรณ์ต่อพ่วงได้ทันที รอบรับทั้งยี่ห้อ, รุ่น และคำไขของประเภทอุปกรณ์ต่อพ่วง
2. ผู้ใช้สามารถสลับวิธีการแสดงผลระหว่างการเรียงตามประเภท (Type) และยี่ห้อ (Brand)

เมื่อค้นพบอุปกรณ์ต่อพ่วงที่ต้องการแล้ว&#x20;

![](/files/-Lu2pLCa4-CE0EwNA7Sq)

1. กดปุ่ม + เพื่อเพิ่มอุปกรณ์เข้าสู่รายการที่จะนำมาใช้ และรายการของอุปกรณ์ต่อพ่วงที่ถูกเพิ่มเข้าไปแล้วจะไปปรากฏในหน้า Device Configuration เพื่อให้ผู้ใช้เลือกพอร์ทที่ต้องการนำมาเชื่อมต่อกับอุปกรณ์ควบคุม
2. กดปุ่มลูกโลกเพื่อทำการเปิด datasheet สืบค้นข้อมูลเกี่ยวกับตัวอุปกรณ์ โดยที่ซอฟต์แวร์เมกเกอร์เพลย์กราวน์จะเปิดเว็บบราวเซอร์เพื่อแสดง online datasheet ของอุปกรณ์ต่อพ่วง

หลังจากเพิ่มอุปกรณ์ต่อพว่งที่ต้องการเข้าระบบแล้ว รูปอุปกรณ์เสมือนจริงจะปรากฏขึ้นดังตัวอย่างรูปด้านล่าง

![](/files/-Lu2q4r5XJZWJsit5Ugq)

สลับหน้าต่างไปที่หน้า Device Configuration เพื่อทำการเลือกพอร์ทเชื่อมต่อและแรงดันไฟฟ้าให้อุปกรณ์ต่อพ่วง

![](/files/-Lu2rrZ9IOz8_TLX0xyI)

สามารถกดปุ่ม Auto Select เพื่อให้ซอฟต์แวร์เมกเกอร์เพลย์กราวน์เลือกการตั้งค่าให้โดยอัตโนมัติ

![](/files/-Lu2sGLNMmj3-USqv-g8)

เมื่อทำการเลือกวิธีการเชื่อมต่ออุปกรณ์ต่อพ่วงเรียบร้อยแล้ว รูปอุปกรณ์เสมือนจริงจะแสดงผลการเชื่อมสายไฟตามที่ผู้ใช้เลือก


# โหมดทดลองแบบตอบโต้

เพื่อการทดสอบและเข้าใจการทำงานร่วมกันของอุปกรณ์โดยที่ผู้ใช้สามารถเห็นภาพได้ชัดเจนและตรงไปตรงมา

#### 1. เลือกอุปกรณ์ควบคุมและอุปกรณ์ต่อพ่วง

#### 2. กำหนดพอร์ทของอุปกรณ์ต่อพ่วง

#### 3. กดปุ่มเริ่มสีเขียวด้านบนขวาในหน้าต่างหลักดังรูป

![](/files/-Lu6yxNV75mOo1kaVy9W)

#### 4. เมกเกอร์เพลย์กราวน์ซอฟต์แวร์จะทำการอัพโหลดข้อมูลไปยังอุปกรณ์ควบคุม

#### 5. เมื่อการอัพโหลดเสร็จสมบูรณ์ แถบความคืบหน้าในการอัพโหลดจะหายไป เหลือเพียงปุ่มหยุดสีแดง

#### 6. ทดลองควบคุมหรืออ่านค่าที่ได้จากอุปกรณ์ต่อพ่วง

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

![](/files/-Lu71cot2VR5QekkORR8)

![](/files/-Lu71pBYaVCj8nkZY9bV)

![](/files/-Lu72RKyRxT3mtknV58g)


# เมกเกอร์เพลย์กราวน์ไดอะแกรม

##

## แนะนำการทำงานของไดอะแกรม (Diagram)

การทำงานของ ไดอะแกรม (Diagram) จะเริ่มต้นทำงานจากบล็อกเริ่มต้น (Begin) ไปยังบล็อกสุดท้าย และกลับมายังจุดเริ่มต้นอีกครั้ง โดยสามารถสังเกตได้จากบล็อกสุดท้ายจะขึ้นข้อความ "Back to Begin" ดงัที่แสดงในภาพ

![](/files/-LuXkxpAGBTGBc57PXFM)

ตัวอย่างการทำงาน : หากต้องการสั่งงานให้หลอดไฟติดและดับสลับกันทุกๆ 1 วินาที จะต้องสร้างบล็อกซีนจำนวน 2 บล็อก และบล็อกหน่วงเวลา (Delay) จำนวน 2 บล็อก เพื่อชะลอความเร็วในการเปลี่ยนสถานะของหลอดไฟ LED ระหว่างการเปิด-ปิดให้สามารถสังเกตได้ทัน

![](/files/-LuXmT5Vc2WPGjZzkgYj)

ตั้งค่าหน่วงเวลา : การตั้งค่าหน่วงเวลา ให้ใช้บล็อกหน่วงเวลา (Delay) โดยที่หน่วยของเวลาสามารถปรับตั้งได้ 2 หน่วย คือ วินาที และ มิลลิวินาที(1/1000 วินาที) โดยในตัวอย่างนี้จะใช้ค่าหน่วงเวลาในการเปิด และปิดหลอดไฟ LED ขั้นตอนละ 100 มิลลิวินาที (ms)

![](/files/-LuXnXbrD1CrdEjVPn9O)

จากนั้นเชื่อมบล็อกทั้งหมดเข้าด้วยกัน จะได้ไดอะแกรมที่สมบูรณ์ดังรูป

![](/files/-LuXnnAOecQQtNkGHF9w)

## แนะนำการเชื่อมต่อไดอะแกรมแบบหลายเงื่อนไข

สำหรับการทำงานที่ซับซ้อนมากขึ้น ผู้ใช้สามารถสร้างบล็อกเงื่อนไขหลายๆ อันในไดอะแกรม เพื่อสร้างระบบที่มีการทำงานหลากหลายรูปแบบ ตามค่าที่อ่านได้จากเซนเซอร์ หรือการสั่งงานจากภายนอก สำหรับตัวอย่างด้านล่าง จะเป็นการสร้างไฟเปิด - ปิดอัตโนมัติตามสภาพแสงโดยรอบ โดยเมื่อแสงโดยรอบสว่างมาก หลอดไฟจะปิด และเมื่อแสงโดยรอบสว่างน้อยไฟจะเปิด

![](/files/-LuXpyUBI7pEFUTQtGqT)

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

![](/files/-LuXqbu-QHbyPfGZ_CKF)

รองรับการสร้างเงื่อนไขที่ซับซ้อน

![](/files/-LuXux2DXExfUU5-kqrH)

## การวนลูป

โดยปกติแล้ว เมื่อการทำงานในบล็อกสุดท้ายของไดอะแกรมจบลง จะกลับมาสู่ บล็อกเริ่มต้น (Begin) โดยอัตโนมัติ

แต่ถ้าหากผู้ใช้งานต้องการสร้างการวนลูปด้วยตนเอง ก็สามารถทำได้ โดยลากเส้นให้วนกลับมายังจุดที่ต้องการได้

![](/files/-LuXw7FJcnlWF4t5cZG5)


# Scene

### แนะนำบล็อกซีน (Scene)

บล็อกซีน เป็นบล็อกที่ใช้สำหรับการสั่งงานอุปกรณ์นำออก เช่น หลอดไฟ, ลำโพง หรือ มอเตอร์ เป็นต้น โดยมีส่วนประกอบ ดังนี้

![](/files/-Luf6wkCZ4NTc42nuGhj)

1. ชื่อของบล็อกซีน
2. ปุ่มลบซีน
3. รายการอุปกรณ์ที่ต้องการสั่งการในซีนนี้
4. ปุ่มเพิ่มอุปกรณ์เข้ามาในซีน

### การสั่งงานอุปกรณ์&#x20;

จะต้องเพิ่มอุปกรณ์เข้ามาในบล็อกซีนและตั้งค่าการกระทำที่จะสั่งให้อุปกรณ์นั้น ๆ ทำในบล็อกซีนนี้ ตัวอย่างเช่น บล็อกด้านล่างจะสั่งงานให้หลอดไฟ LED เปิด ก่อนที่จะไปทำงานในบล็อกซีนหรือบล็อกเงื่อนไขที่เชื่อมอยู่ทางด้านขวาต่อไป

![](/files/-Luf8Qd9fDUUStbgqZnp)

ตัวอย่างเช่น ไดอะแกรมด้านล่างนี้จะสั่งให้หลอดไฟ LED1 เปิด, รอ 1 วินาที, สั่งให้หลอดไฟ LED1 ปิด และรอ 1 วินาที จากนั้นกลับไปสู่ Begin อีกครั้งหนึ่ง

![](/files/-LufBwTuGRrXWuhKwrK_)

เราสามารถสั่งงานอุปกรณ์หลายๆอย่างได้พร้อมๆกัน โดยเพิ่มอุปกรณ์เหล่านั้นเข้ามาในบล็อกซีนเดียวกัน ตัวอย่างเช่น บล็อกซีนด้านล่างนี้ประกอบด้วยการสั่งงานให้หลอดไฟ LED1 เปิด และ ลำโพงเปียโซส่งเสียงร้องในเวลาเดียวกัน

![](/files/-LufCW-3gVyihwoVIFPb)

### การตั้งค่าอุปกรณ์ในบล็อกซีน

วิธีการตั้งค่าอุปกรณ์นำออกในบล็อกซีนนั้นสามารถทำได้โดยการนำเคอร์เซอร์เลื่อนไปบนไอค่อนของอุปกรณ์ที่ต้องการตั้งค่า จากนั้นหน้าต่างการตั้งค่าอุปกรณ์จะปรากฏขึ้นดังรูป

![](/files/-LufG40J1sDYeN177z9y)

โดยทั่วไปแล้ว 'แอคชั่น' (Action) ของอุปกรณ์จะประกอบด้วยสถานะเปิด และ สถานะปิด แต่จะมีบางอุปกรณ์ที่มีคุณสมบัติและสถานะที่แตกต่างออกไป เช่น ลำโพงบัซเซอร์ และ เซอร์โวมอเตอร์ เป็นต้น

นอกจากนี้ การปรับตั้งค่าโดยละเอียดสามารถทำได้กับบางแอคชั่น อย่างเช่นปรับความสว่างของหลอดไฟ LED, ปรับความถี่ของเสียงของลำโพงเปียโซบัซเซอร์, ความเข้มสีแต่ละสีของหลอดไฟ RGB LED และองศาการหมุนของเซอร์โวมอเตอร์

การปรับตั้งค่าการแสดงผลของอุปกรณ์นำออก สามารถทำได้โดย 2 ทางหลักๆคือ

#### 1.การแสดงผลด้วยค่าคงที่ด้วยตัวเลข (Number)

ตัวอย่างการใช้งาน : การปรับความสว่างของหลอดไฟ LED ด้วยค่าคงที่

แก้ไขค่าคงที่โดยการคลิ๊กให้เกิดเคอร์เซอร์ในบล็อกสีฟ้าที่เป็นตัวเลขเพื่อแก้ค่าคงที่ที่อยู่ภายใน หากคลิ๊กให้เกิดเคอร์เซอร์ในตำแหน่งช่องว่างสีขาว จะเป็นการลบบล็อกตัวเลข (Number), บล็อกแวลู่ (Value) และบล็อกเครื่องหมายทางคณิตศาสตร์ และผู้ใช้งานสามารถคลิ๊กที่บล็อกด้านล่าง เพื่อเพิ่มบล็อกกลับมา กรณีที่บล็อกหายไปจากช่อง Brightness&#x20;

![](/files/-LufeO3ocDhzHfAiJJAI)

#### 2.การแสดงผลโดยสัมพันธ์กับค่าที่ได้รับจากอุปกรณ์นำเข้า (Value)

ตัวอย่างการใช้งาน : แสดงผลส่วนต่างของระยะทางที่อ่านได้จาก 2 เซนเซอร์ไปที่จอ 7-Segment

![](/files/-LufjdSJOgeMeeikAn8D)

เมื่อเพิ่มบล็อกแวลู่ (Value) และคลิ๊กที่บล็อก (Value) จะปรากฏอุปกรณ์นำเข้าให้เลือก เมื่อมีอุปกรณ์นำเข้าเพิ่มเข้ามาในระบบเรียบร้อยแล้วในหน้า Device&#x20;

![](/files/-LufkXhKV8ZAO_5GYIel)


# Condition

## แนะนำบล็อกเงื่อนไข (Condition)

บล็อกเงื่อนไข เป็นบล็อกที่ใช้ในการควบคุมการทำงานของโปรแกรมตามค่าที่อ่านได้จากเซนเซอร์ หรือการสั่งงานจากภายนอกโดยจะต้องนำไปเชื่อมต่อคั่นระหว่างบล็อกซีน&#x20;

ตัวอย่างที่ 1 จะเป็นการสั่งให้ไฟเปิดหลังจากที่กดปุ่ม โดยเลือกเงื่อนไข 'Press'

![](/files/-Luft4D_fKxG6y0HZMru)

หากในบล็อกเงื่อนไขมีอุปกรณ์มากกว่า 1 ตัว นั่นหมายความว่า เงื่อนไขที่ตั้งไว้สำหรับอุปกรณ์แต่ละตัวในบล็อกจะต้องเป็นจริงเพื่อให้การกระทำที่เชื่อมต่ออยู่หลังบล็อกเงื่อนไขทำงาน&#x20;

ตัวอย่างที่ 2 ที่ปุ่ม Button1 จะต้องถูกกด และเซนเซอร์ Distance1 อ่านค่าได้ในช่วง 100 ถึง 200 เซนติเมตร หลอดไฟ LED1 จะติดสว่าง

![](/files/-Lug1ztBhT2AdeAgG6Yx)

โดยส่วนมากแล้ว การสร้างเงื่อนไขที่มีช่องโหว่อาจทำให้การแสดงผลผิดพลาดและไม่เป็นไปตามการออกแบบ ตัวอย่างเช่น การสร้างไดอะแกรมเพื่อเปิดไฟเมื่อปุ่มถูกกด และไฟจะต้องดับลงเมื่อปล่อยปุ่ม ดังนั้นการสร้างเงื่อนไขเพื่อตรวจสอบสถานะของปุ่มกดจึงต้องแบ่งแยกออกเป็น 2 ชุด

ตัวอย่างที่ 3 สวิทช์เปิด-ปิดไฟ เมื่อ Button1 ถูกกด หลอดไฟ LED1 จะสว่าง และเมื่อ Button1 ไม่ถูกกด หลอดไฟ LED1 จะดับ

![](/files/-Lug6gNbSEKswOOOdgkg)

สำหรับเซนเซอร์ที่มีการอ่านค่าอย่างต่อเนื่อง เช่น อุณหภูมิ, ระยะทาง, ความเร่ง, กระแสไฟฟ้า, ลูกบิด ฯลฯ สามารถสร้างเงื่อนไขการเปรียบเทียบได้ 2 ทางเลือก คือ

1. Basic
2. Custom

1.ตัวเลือก Basic เป็นการเปรียบเทียบค่าอย่างง่ายได้โดยใช้แถบเลื่อน หรือ กรอกค่าที่ต้องการเพื่อเลือกช่วงที่ต้องการจะเปรียบเทียบ โดยเลือกช่วงของค่าที่ถือว่าต้องการให้ผ่านไปทำงานในซีนถัดไปได้&#x20;

![](/files/-LugFBb1S4gyQWFq65KA)

2\. ตัวเลือก Custom เป็นตัวเลือกที่สามารถกำหนดช่วงค่าที่จะนำมาเปรียบเทียบได้อย่างอิสระ

![](/files/-LugFPITMk6XHg6PaWAO)

![](/files/-LugFcYsjMsLXJQ2FLW4)

ผู้ใช้สามารถตั้งค่าการเปรียบเทียบเป็นช่วงที่สนใจโดยการเปลี่ยนเครื่องหมายสมการและอสมการในตัวเลือกด้านหน้าและใส่ค่าคงที่ตามต้องการ

![](/files/-LugGBFFWwAyWL_yvgnd)

นอกจากนี้ยังสามารถเลือกใช้ค่าที่อ่านได้จากอุปกรณ์นำเข้าหรือใช้งานร่วมกับการสร้างสมการคณิตศาสตร์ได้อีกด้วย

![](/files/-LugGuR2pAuJHBUPIzCp)

ยังสามารถกดปุ่ม + เพื่อเพิ่มข้อเปรียบเทียบ

![](/files/-LugHJPa3bw1c34TJmLy)


# Begin


# ระบบมอนิเตอร์

![](/files/-LvBZG3q07kLDFL5_oi2)

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

ผู้ใช้สามารถเลือกระดับของข้อมูลที่จะนำมาแสดงผลได้ในเมนู Log Level

![](/files/-LvBZiJKr48mGeC-vD-t)

และยังคงเลือกจำนวนอุปกรณ์มาแสดงผลได้ด้วย

![](/files/-LvB_DKrso9egEfIZ7KU)

ในส่วนของพื้นที่ด้านขวาของหน้าต่างมอนิเตอร์ เป็นพื้นที่เพื่อแสดงผลข้อมูลโดยใช้กราฟ

![](/files/-LvB_lHD2B4piP-xTG3Y)

1. เมนู Plot สามารถเลือกอุปกรณ์เพื่อให้พล็อตกราฟได้ และปุ่ม Clear เพื่อล้างค่าที่ถูกพล็อตไปยังกราฟทั้งหมดของอุปกรณ์ทุกตัว
2. สามารถกดปุ่มใต้กราฟเพื่อล้างค่าที่ถูกพล็อตสำหรับอุปกรณ์แต่ละตัว


# เชื่อมต่ออุปกรณ์ IoT

ซอฟต์แวร์เมกเกอร์เพลย์กราวน์รองรับการใช้งานร่วมกับอุปกรณ์ IoT จำนวนสองรูปแบบ ประกอบด้วย

### [1. Blynk](/intro/iot/blynk)

### [2. NETPIE](/intro/iot/netpie)


# ใช้งานร่วมกับ Blynk

**Blynk** อ่านว่า “บลิ้ง” คือ ชุดของแอปพลิเคชั่นบนสมาร์ตโฟนที่ทำให้การสร้างงาน IoT ทำได้ง่ายอย่างเบ็ดเสร็จ มีการเชื่อมต่อกับอุปกรณ์ที่อยู่ไกลผ่านเครือข่ายอินเทอร์เน็ต โดยใช้สมาร์ตโฟนเป็นอุปกรณ์หลักในการติดต่อกับผู้ใช้งานและอุปกรณ์ควบคุมปลายทาง ผู้พัฒนา IoT ไม่ต้องจัดเตรีบมสิ่งใดเพิ่มเติม ไม่ว่าจะเป็นเว็บเซิร์ฟเวอร์, หน้าเว็บแสดงผลและควบคุม รวมถึงซอฟต์แวร์เพื่อการเชื่อมต่อใดๆ

&#x20;         **Blynk ([www.blynk.cc](http://www.blynk.cc))** เป็นผลงานของกลุ่มคนรุ่นใหม่ที่เสนอโครงการเข้าใน Kickstarter โดยผู้ก่อตั้งคือ Mr. Pavel Baiborodin โดยระดมทุนได้ 49,000 เหรียญสหรัฐ (US$) Blynk ได้เปิดตัวใช้งานตั้งแต่เดือนพฤษภาคม คศ. 2015 ที่ผ่านมา

&#x20;         Blynk ช่วยให้การพัฒนางาน IoT ง่าย โดยผู้พัฒนาไม่จำเป็นที่ต้องมีความรู้ด้านระบบฮาร์ดแวร์และซอฟต์แวร์ทางคอมพิวเตอร์มากมาย ตัวแอปพลิเคชั่นใช้งานกับฮาร์ดแวร์ที่เป็นที่นิยม ทั้งบอร์ด Arduino, ESP8266, Raspberry PI, Particle Core เป็นต้น

&#x20;           **จุดแข็งของ** **Blynk คือ การจัดเตรียมระบบคลาวด์เซิร์ฟเวอร์ที่เสถียรมากให้กับผู้ใช้งาน** นอกเหนือจากนั้น Blynk อนุญาตให้ผู้ใช้สามารถสร้างเซิร์ฟเวอร์ Blynk ขึ้นเองบนเครื่องคอมพิวเตอร์หรือบอร์ด Raspberry Pi ทำให้สามารถเก็บทุกสิ่งที่พัฒนาไว้กับเครื่องของตนเองได้อีกด้วย

![](/files/-LxWY4ybbUMcGG1ggZLE)

### โครงสร้างของ Blynk

Blynk มีองค์ประกอบหลัก 3 ส่วน ได้แก่&#x20;

* Blynk App คือ แอปพลิเคชั่นบนสมาร์ตโฟนที่ทำหน้าที่ติดต่อผู้ใช้งานและอุปกรณ์เพื่อการควบคุมและแสดงผลหลากหลาย โดยอุปกรณ์ที่เรียกว่า “วิดเก็ต” (Widget) ตัวแอปพลิเคชั่นใช้งานได้ทั้งระบบปฏิบัติการ iOS และ แอนดรอยด์&#x20;
* Blynk Server คือ เซิร์ฟเวอร์ที่มีหน้าที่สื่อสารระหว่างสมาร์ทโฟนกับอุปกรณ์ควบคุมปลายทาง โดยที่เซิร์ฟเวอร์นี้มีลักษณะเป็นคลาวด์สาธารณะ (Public Cloud) ที่เรียกใช้ได้กับ Blynk App หรือผู้ใช้สามารถติดตั้ง Blynk Server ไว้เป็นส่วนตัวได้ เนื่องจากเป็นแบบ Open Source และยังสามารถติดตั้งเซิร์ฟเวอร์นี้ลงบนบอร์ด Raspberry Pi ได้ด้วย&#x20;
* Blynk Libraries คือ ส่วนของโปรแกรมสนับสนุนที่นำไปใช้กับบอร์ดไมโครคอนโทรลเลอร์ยอดนิยม เช่น Arduino, Raspberry Pi เป็นต้น

![](/files/-LxWYGXoXHuc637eXu9-)


# เตรียมพร้อมการใช้งาน Blynk

### การติดตั้ง Blynk บนสมาร์ตโฟน

ดาวน์โหลด Blynk App โดยไม่มีค่าใช้จ่ายจาก App Store หรือ Google Play เมื่อดาวน์โหลดและติดตั้งเรียบร้อย ทำการเรียกใช้งานที่หน้าจอสมาร์ทโฟน

![](/files/-LxWHbGE6LuQGxuzM3D_)

หน้าแรกของแอปพลิเคชั่นคือ การเข้าถึง Blynk App โดยการลงทะเบียนเข้าเป็นผู้ใช้ โดยใช้อีเมล์หรือสมัครผ่าน Facebook การสมัครจะต้องมีอีเมล์ของผู้ใช้งานเป็นตัวยืนยัน เนื่องจากเวลาสร้างงาน ตัวระบบจะส่งรหัสแสดงสิทธิ์ใช้งาน หรือ Auth Token เพื่อเชื่อมโยงระบบไปยังอีเมล์ที่ลงทะเบียนไว้

![](/files/-LxWHjaNN_iKKe5w1e6o)

### เตรียมการใช้งาน Blynk App บนสมาร์ตโฟน

หลังจากติดตั้ง Blynk App ลงในสมาร์ตโฟนเรียบร้อยแล้ว ลำดับต่อไปเป็นการตั้งค่าต่างๆ ให้กับ Blynk App และการสร้าง Project เพื่อเริ่มต้นใช้งาน


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

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

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

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

ขึ้นตอนการทดลอง&#x20;

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

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&#x20;

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&#x20;

![](/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)


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

![](/files/-LxWkEVKOdT4ULMdF_x1)

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

![](/files/-LxWkT5T8fHnSRscWT93)

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

![](/files/-LxWku0NvYfUu_3AT4KD)

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

![](/files/-LxWl7ZOSoeAfXQIO9XN)

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

![](/files/-LxWm8-WhKYXeYQwWtGt)

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

![](/files/-LxWomPt9FLfbDK3fn2M)

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

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

![](/files/-LxWpjmX9h3TPcYib5BT)

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

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

![](/files/-LxWr1wA5L6EmGXshymi)

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

![](/files/-LxWr8mCQet_qL0SAreN)

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

![](/files/-LxWrlWG49bWkyH0fEG8)

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

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

![](/files/-LxWs7CspedN0NHXqF5n)

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

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

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

{% hint style="info" %}

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

![](/files/-LxWsv-xpytlovldbDfn)

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

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

![](/files/-LxWsoq_qTLxn-MUCjM5)

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

![](/files/-LxWw2WZ5EkmF5WORXam)

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

![](/files/-LxWwVi0PElo7TSJ95-6)

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

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

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

![](/files/-LxWxC0RutEcM0e0kZMO)

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

![](/files/-LxWxkHEMR3-P2lNbh8x)

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

![](/files/-LxWy3XtwJnfN4PNiTdb)

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

![](/files/-LxWyKP2GENHD2UQuoTx)

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

![](/files/-LxWylgjqQkR8V0gW0e1)

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

![](/files/-LxWzZyLT6GQRgH40igA)

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

![](/files/-LxX-AgA0eoVYs3EQ5IU)

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

![](/files/-LxX-YeWjM0bCs4EpUae)

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

![](/files/-LxX0IHZSsl6Tmf_fW7h)

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

![](/files/-LxX1L_rFwEipMe1kRNh)


# ใช้งานร่วมกับ NETPIE

### รู้จักกับ NETPIE IoT Platform

NETPIE เป็นคลาวด์แพลตฟอร์มสำหรับพัฒนาระบบ Internet of Thing (IoT) ที่พัฒนาขึ้นโดยศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติและให้บริการโดยไม่มีค่าใช้จ่ายโดยสวทช. สำหรับการใช้งานจำนวนน้อยกว่า 100 อุปกรณ์ NETPIE มีส่วนประกอบหลักคือ

1\. NETPIE คลาวด์เซิร์ฟเวอร์ทำให้หน้าที่เป็น Distributed MQTT Brokers หรือศูนย์กลางเพื่อให้อุปกรณ์ต่าง ๆ เข้ามาเชื่อมต่อและแลกเปลี่ยนข้อมูลระหว่างกันได้ผ่านเครือข่ายอินเทอร์เน็ตและ

2\. ไลบารี่ Microgear ซึ่งเป็นไลบารี่สำหรับติดตั้งลงในอุปกรณ์ต่าง ๆ เพื่ออำนวยความสะดวกในการเชื่อมต่อเข้ากับเซิร์ฟเวอร์ของ NETPIE ปัจจุบันมี Microgear สำหรับภาษา Python, HTML5, Javascript (Node.js), Java และ C# รวมถึงไมโครคอนโทรลเลอร์ ESP8266, ESP32\*, Arduino MEGA (Ethernet Shield) และระบบปฏิบัติการ Android โดยไลบารี่ Microgear ทั้งหมดมีสัญญาอนุญาตให้ใช้สิทธิแบบเปิดชนิด ISC License และสามารถดาวน์โหลดมาใช้ได้โดยโดยไม่มีค่าใช้จ่ายที่ <https://github.com/netpieio> จุดเด่นของ NETPIE คือ เป็นแพลตฟอร์มที่มีการส่ง-รับข้อมูลที่รวดเร็ว มีความปลอดภัยสูง และทำงานบนอุปกรณ์ที่สามารถเชื่อมต่ออินเตอร์เน็ตได้เกือบทุกอุปกรณ์

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

### รู้จักกับ NETPIE Freeboard

freeboard.io เป็นเว็บไซต์สำหรับสร้างแดชบอร์ดเพื่อแสดงผลข้อมูลหรือปฏิสัมพันธ์กับอุปกรณ์ต่าง ๆ ได้อย่างง่าย โดยการลากวางวิดเก็ต (อุปกรณ์แสดงผล) สำเร็จรูปที่มีให้เลือกใช้อย่างหลากหลายอาทิ วิดเก็ตแสดงภาพ, วิดีโอ, กราฟเส้น, กราฟแท่ง, หน้าปัด, ตัวเลขและปุ่มกด freeboard เป็นซอฟต์แวร์โอเพ่นซอร์สที่พัฒนาขึ้นโดย Bug Labs, Inc สามารถดาวน์โหลดมาใช้ได้โดยไม่มีค่าใช้จ่ายจาก <https://github.com/> Freeboard/freeboard ปัจจุบัน freeboard รองรับการเชื่อมต่อกับแหล่งข้อมูลหลากหลายเช่น dweet.io และเว็บเซอร์วิสทั่วไป

ในช่วงเริ่มต้น NETPIE เป็นคลาวด์แพลตฟอร์มที่ไม่มีส่วนแสดงผลของตนเอง การพัฒนาส่วนติดต่อผู้ใช้ผู้พัฒนาจึงต้องทำการพัฒนาเว็บเพจด้วยตนเองโดยใช้ไลบารี่ Microgear ด้วยภาษา HTML5 และ Javascript ซึ่งมีความซับซ้อนและใช้เวลานาน จนเมื่อเดือนพฤษภาคม พ.ศ. 2560 ทีมพัฒนา NETPIE ได้พัฒนาต่อยอด freeboard ให้รองรับการเชื่อมต่อกับแพลตฟอร์ม NETPIE ได้โดยสะดวกยิ่งขึ้นในชื่อ NETPIE Freeboard และเปิดให้ดาวน์โหลดใช้งานได้ฟรีจาก <https://github.com/netpieio/netpie-freeboard> และหากผู้ใช้ไม่ต้องการที่จะทำการโฮสแดชบอร์ดไว้บนเซิฟต์เวอร์ของตนเองก็สามารถสร้างแดชบอร์ดได้บนเซิฟต์เวอร์ของ NETPIE ได้ทันที


# การสมัครใช้งาน NETPIE

1. ไปยังเว็บไซต์ <https://netpie.io/sign_up> จะปรากฏหน้าเว็บดังรูปที่... ให้กรอกข้อมูลให้เรียบร้อย จากนั้นจึงกดปุ่ม SIGN UP เพื่อยืนยันการลงทะเบียน

![](/files/-Lvl3Gw8depCl7SdYDjr)

1. รอรับ SMS จากทาง NETPIE ที่ได้ส่งไปยังหมายเลขโทรศัพท์มือถือที่ได้ลงทะเบียนไว้
2. คลิกที่เมนู LOG IN เพื่อเข้าสู่ระบบ โดยใส่อีเมลที่ได้ลงทะเบียนไว้ในช่อง USERNAME และนำรหัสผ่านที่ได้รับจาก SMS ใส่ในช่อง PASSWORD แล้วคลิกที่ปุ่ม LOG IN
3. เพื่อความสะดวกและความปลอดภัยแนะนำให้เปลี่ยนรหัสผ่าน โดยคลิกที่รูปไอคอนผู้ใช้งานที่มุมซ้ายบน จากนั้นจึงเลือกไปที่เมนู CHANGE PASSWORD ใส่รหัสผ่านเดิมในช่อง CURRENT PASSWORD จากนั้นป้อนรหัสผ่านใหม่ที่ต้องการลงในช่อง NEW PASSWORD และช่อง CONFIRM PASSWORD แล้วคลิกปุ่ม SAVE เพื่อยืนยันการเปลี่ยนรหัสผ่าน

![](/files/-Lvl43gkxglAoLhsmtWH)


# การสร้างแอปพลิเคชัน NETPIE

ในการสร้างระบบ IoT โดยใช้คลาวด์แพลตฟอร์ม NETPIE ผู้พัฒนาจะต้องสร้างแอปพลิเคชันขึ้นในเว็บไซต์ของ NETPIE ก่อน โดยชื่อของแอปพลิเคชันจะต้องไม่ซ้ำกับผู้ใช้รายอื่น จากนั้นจึงเชื่อมต่ออุปกรณ์ต่าง ๆ เข้ากับ NETPIE เซิร์ฟเวอร์ผ่านทางกุญแจที่สร้างขึ้นจากตัวแอปพลิเคชัน

1. คลิกที่แถบเมนู RESOURCES จากนั้นจึงเลือก APPLICATIONS เพื่อเข้าสู่หน้า APPLICATION MANAGEMENT

![](/files/-Lvl4br2IL8a-TyM3u9k)

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

![](/files/-Lvl51kOEC-MYP3efBOP)

3\. ใส่ชื่อแอปพลิเคชันตามที่ต้องการ โดยชื่อที่ตั้งจะต้องไม่ซ้ำกับชื่ออื่นที่มีอยู่แล้ว ทั้งนี้ชื่อที่ตั้งจะถูกใช้เป็นรหัสประจำตัวของแอปพลิเคชันซึ่งเป็นข้อมูลหนึ่งที่ต้องนำไปใส่ในอุปกรณ์ร่วมกับกุญแจที่จะสร้างขึ้นในขั้นตอนถัดไปเพื่อเชื่อมต่ออุปกรณ์เข้ากับ NETPIE

![](/files/-Lvl5VS-W31bmHm7JJ75)

![](/files/-Lvl5ex4M4854r7D3UEQ)

4\. หลังจากสร้างแอปพลิเคชันสำเร็จระบบจะนำไปยังหน้าจัดการแอปพลิเคชันโดยอัตโนมัติดังรูป

![](/files/-Lvl5p0qz_9LgcfdTNXk)

5\. สร้างกุญแจสำหรับเชื่อมต่ออุปกรณ์เข้ากับ NETPIE โดยกดที่ปุ่ม + บริเวณมุมขวาบนของแถบ APPLICATION KEY

6\. ตั้งชื่อและเลือกชนิดของกุญแจ โดยหากต้องการเชื่อมต่อเข้ากับบอร์ดไมโครคอนโทรลเลอร์ให้เลือกเป็น Device Key และหากต้องการเชื่อมต่อกับแดชบอร์ดหรือหน้าเว็บไซต์ที่ใช้ HTML5 Microgear ให้เลือกเป็น Session Key

7\. ในที่นี้จะทดลองสร้างกุญแจทั้งสิ้น 2 กุญแจสำหรับตัวอุปกรณ์และแดชบอร์ด เมื่อสร้างกุญแจเสร็จสิ้นสามารถกดดูรายละเอียดของกุญแจได้โดยกดที่ชื่อกุญแจในแถบ APPLICATION KEY โดย Key เป็นกุญแจที่อุปกรณ์ใช้ในการเชื่อมต่อกับ NETPIE และ Secret เป็นรหัสลับที่ต้องใช้คู่กับ Key เพื่อทำให้อุปกรณ์นั้นสามารถเชื่อมต่อกับ NETPIE ได้

![](/files/-Lvl867e2__QIox4DNLD)


# การสร้างแดชบอร์ดด้วย NETPIE Freeboard

ในขั้นตอนนี้จะทดลองสร้างแดชบอร์ดในรูปแบบของ freeboard ใหม่ โดยใช้บริการโอสติ้งของ NETPIE ทำให้เราไม่จำเป็นต้องตั้งเว็บเซิร์ฟเวอร์ด้วยตนเอง นอกจากนี้ทีมผู้พัฒนา NETPIE ยังได้พัฒนาแอปพลิชัน NETPIE ในสมาร์ทโฟนทั้งในระบบปฎิบัติการ iOS และ Android สำหรับให้ผู้ใช้เข้าถึงแดชบอร์ดที่สร้างขึ้นได้ผ่านทางสมาร์ทโฟนอีกด้วย

1. คลิกที่แถบเมนู RESOURCES จากนั้นจึงเลือก FREEBOARDS เพื่อเข้าสู่หน้าสำหรับบริหารจัดการแดชบอร์ด

![](/files/-LxH0vBHQNcGIlVPAPOr)

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

![](/files/-LxH1ohPoI51tNGChhN0)

3\. จากนั้นก็สามารถกดชื่อแดชบอร์ดที่สร้างขึ้นใหม่เพื่อเข้าสู่หน้าจัดการแดชบอร์ดของ freeboard ได้ทันที

![](/files/-LxH2-QyO6bTFJ3eFmXa)


# ทดลองแสดงผลค่าจาก POT ผ่าน Gauge บน Freeboard

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

1. Maker Playground Baseboard&#x20;
2. Maker Playground POT module

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


# คำถามที่พบบ่อย


