เริ่มต้นเนื้อหา
การเชื่อมต่อบอร์ดพัฒนา Dustation Dev Kit V.2 กับ Blynk.clound ตอนที่1
การเชื่อมต่อบอร์ดพัฒนา Dustation Dev Kit V.2 กับ Blynk.clound
แผนผังการเชื่อมต่อฝั่ง Blynk.clound กับฝั่ง Esp32
การเตรียมการฝั่ง Blynk.clound
- สมัครบัญชีผู้ใช้งานของ Blynk
- สร้าง Template
- สร้าง Datastreams virtual pin
- สร้าง Web dashboard
- สร้าง Device
1. สมัครบัญชีผู้ใช้งานของ Blynk
เปิดเว็บไซต์ https://blynk.cloud แล้วคลิกปุ่ม Create new account เพื่อสร้างบัญชีผู้ใช้ใหม่
![]()
ป้อนอีเมลล์สำหรับสมัครใช้งานแล้วคลิกปุ่ม Sign Up
![]()
เช็คกล่องจดหมายเข้า ในเนื้อหาให้คลิกปุ่ม Create Password เพื่อสร้างรหัสผ่านสำหรับเข้าใช้งาน Blynk.Console
![]()
พิมพ์รหัสผ่านที่ต้องการจากนั้นคลิกปุ่ม Next
ป้อนชื่อโปรไฟล์คลิกปุ่ม Done เป็นการเสร็จขั้นตอนการสมัครบัญชีผู้ใช้งานของ Blynk
2.สร้าง Template
Login เข้าสู่ระบบจากนั้นคลิกเมนู Templates แล้วคลิกปุ่ม New Template
![]()
ป้อนข้อมูลต่อไปนี้แล้วคลิกปุ่ม Done
NAME : ป้อนชื่อ Template
HARDWARE : เลือก ESP32
CONNECTION TYPE : เลือก WiFi
DESCRIPTION : ป้อนคำอธิบายเกี่ยวกับ Template
![]()
คลิกปุ่ม Save เพื่อบันทึก
2.1 สร้าง Datastreams virtual pin
![]()
ทำการสร้าง Virtual pin V0-V5 ตามวิธีการดังนี้
คลิกเมนู Templates เลือก Dustation dev board แล้วคลิกแท็บ Datastreams แล้วคลิกปุ่ม New Datastream
![]()
เลือก Virtual Pin
![]()
ป้อนข้อมูลดังต่อไปนี้แล้วคลิกปุ่ม Create เพื่อสร้าง Virtual pin V0
NAME : PM2
ALIAS: PM2
PIN : เลือก V0
DATA TYPE: Integer
UNIT: Microgram Per Cubic Meter, µg/m3
MIN: 0
MAX : 999
DEFAULT VALUE: 0
![]()
คลิกปุ่ม New Datastream เพื่อสร้าง Virtual pin ที่เหลือให้ครบ
![]()
สร้าง V0-V5 ที่เหลือให้ครบโดยใส่ข้อมูลตามตารางด้านล่าง
|
NAME |
ALIAS |
PIN |
DATA TYPE |
UNIT |
MIN |
MAX |
DEFAULT VALUE |
|
PM2 |
PM2 |
V0 |
Integer |
µg/m3 |
0 |
999 |
0 |
|
PM1 |
PM1 |
V1 |
Integer |
µg/m3 |
0 |
999 |
0 |
|
PM10 |
PM10 |
V2 |
Integer |
µg/m3 |
0 |
999 |
0 |
|
TEMP |
TEMP |
V3 |
Integer |
℃ |
0 |
100 |
0 |
|
HUMI |
HUMI |
V4 |
Integer |
% |
0 |
100 |
0 |
|
RELAY |
RELAY |
V5 |
Integer |
None |
0 |
1 |
0 |
คลิกปุ่ม Save เพื่อบันทึกข้อมูล
2.2 สร้าง Web dashboard
คลิกเมนู Templates แล้วคลิกแท็บ Web Dashboard แล้วคลิกปุ่ม Edit
![]()
เลือก Widget สำหรับแสดงผล Datastream PM2(V0) และกำหนดค่าตามด้านล่าง แล้วคลิกปุ่ม Save
![]()
เลือก Widget สำหรับแสดงผล Datastream PM1(V1) และกำหนดค่าตามด้านล่าง แล้วคลิกปุ่ม Save
![]()
เลือก Widget สำหรับแสดงผล Datastream PM10(V2) และกำหนดค่าตามด้านล่าง แล้วคลิกปุ่ม Save
![]()
เลือก Widget สำหรับแสดงผล Datastream TEMP(V3) และกำหนดค่าตามด้านล่าง แล้วคลิกปุ่ม Save
![]()
เลือก Widget สำหรับแสดงผล Datastream HUMI(V4) และกำหนดค่าตามด้านล่าง แล้วคลิกปุ่ม Save
![]()
เลือก Widget สำหรับแสดงผล Datastream RELAY(V5) และกำหนดค่าตามด้านล่าง แล้วคลิกปุ่ม Save
3. สร้าง Device
คลิกเมนู Search แล้วคลิก My Devices คลิกปุ่ม New Device เลือก From template
![]()
เลือก Template ที่สร้างไว้ก่อนหน้านี้ แล้วคลิกปุ่ม Create
TEMPLATE: Dustation dev board
DEVICE NAME: Dustation1
![]()
เสร็จแล้วจะมี Device ที่สร้างเสร็จในรายการ คลิกแท็บ Device Info จะมีเห็นโค๊ดสำหรับ Copy ไปใช้เขียนโปรแกรมลง Esp32
การเตรียมการฝั่ง Esp32 (Arduino IDE Sketch)
- เขียนโค๊ดเชื่อมต่อ Esp32 กับ Blynk device
- ดาวน์โหลดและติดตั้งไลบรารี่ Blynk เวอร์ชั่นล่าสุด
- สร้างไฟล์ Sketch และใส่โค๊ดที่ได้จากขั้นตอนการสร้าง Blynk device ไว้ส่วนบนสุด
- ใส่โค๊ด Blynk setup และ Blynk loop และทดสอบการเชื่อมต่อ
- เขียนโค๊ดส่งข้อมูลจาก Esp32 ไปยัง Virtual pin ของ Blynk device
- สร้างตัวเพื่อส่งค่าจาก Esp32 ไปยัง Virtual pin
- เขียนโค๊ดสำหรับเชื่อมต่อตัวแปรในข้อ 2.1 กับ virtual pin ของ Blynk deivce
1.เขียนโค๊ดเชื่อมต่อ Esp32 กับ Blynk device
เปิดโปรแกรม Arduino IDE จากนั้นดาวน์โหลดและติดตั้งไลบรารี่ Blynk เวอร์ชั่นล่าสุด
![]()
สร้างไฟล์ Sketch และใส่โค๊ดที่ได้จากขั้นตอนการสร้าง Blynk device ไว้ส่วนบนสุด
#define BLYNK_TEMPLATE_ID “xxxxxxxxx”
#defineBLYNK_DEVICE_NAME“Dustation dev board”
#defineBLYNK_AUTH_TOKEN“xxxxxxxxyyyyyyyyyzzzzzz”
voidsetup(){
//
}
voidloop(){
//
}
เพิ่มโค๊ด Blynk setup และ Blynk loop และทดสอบการเชื่อมต่อ
#define BLYNK_TEMPLATE_ID “xxxxxxxxx”
#define BLYNK_DEVICE_NAME “Dustation dev board”
#define BLYNK_AUTH_TOKEN “xxxxxxxxyyyyyyyyyzzzzzz”
// Comment this out to disable prints and save space
#define BLYNK_PRINT Serial
#include <WiFi.h>
#include <BlynkSimpleEsp32.h>
char auth[] = BLYNK_AUTH_TOKEN;
BlynkTimer timer;
// Your WiFi ssid and password
char ssid[] = “yourSSID”;
char password[] = “yourPASSWORD”;
void setup() {
Serial.begin(115200); // For debug
Blynk.begin(auth, ssid, password);
}
void loop() {
Blynk.run();
timer.run();
}
อัพโหลดไฟล์ Sketch และทดสอบรันโปรแกรม หากเชื่อมต่อสำเร็จจะมีข้อความใน Serail debug monitor ดังนี้
![]()
สถานะของ Blynk device จะขึ้น Online แสดงว่าเชื่อมต่อสำเร็จ
2. เขียนโค๊ดส่งข้อมูลจาก Esp32 ไปยัง Virtual pin ของ Blynk device
เพิ่มโค๊ดสร้างแปรตัวเพื่อส่งค่าจาก Esp32 ไปยัง Virtual pin
#define BLYNK_TEMPLATE_ID “xxxxxxxxx”
#define BLYNK_DEVICE_NAME “Dustation dev board”
#define BLYNK_AUTH_TOKEN “xxxxxxxxyyyyyyyyyzzzzzz”
// Comment this out to disable prints and save space
#define BLYNK_PRINT Serial
#include <WiFi.h>
#include <BlynkSimpleEsp32.h>
char auth[] = BLYNK_AUTH_TOKEN;
BlynkTimer timer;
int32_t PM1, PM2, PM10, TEMP, HUMI;
#define RELAY 23
BLYNK_WRITE(V5) // Executes when the value of virtual pin 0 changes
{
if(param.asInt() == 1)
{
// execute this code if the switch widget is now ON
digitalWrite(RELAY,HIGH); // Set digital pin 23 HIGH
}
else
{
// execute this code if the switch widget is now OFF
digitalWrite(RELAY,LOW); // Set digital pin 23 LOW
}
}
// Your WiFi ssid and password
char ssid[] = “yourSSID”;
char password[] = “yourPASSWORD”;
void myTimerEvent()
{
PM1 = random(0, 999);
PM2 = random(0, 999);
PM10 = random(0, 999);
TEMP = random(0, 99);
HUMI = random(0, 99);
Blynk.virtualWrite(V0, PM2);
Blynk.virtualWrite(V1, PM1);
Blynk.virtualWrite(V2, PM10);
Blynk.virtualWrite(V3, TEMP);
Blynk.virtualWrite(V4, HUMI);
}
void setup() {
Serial.begin(115200); // For debug
PM1 = 0;
PM2 = 0;
PM10 = 0;
TEMP = 0;
HUMI = 0;
pinMode(RELAY, OUTPUT);
Blynk.begin(auth, ssid, password);
Blynk.virtualWrite(V5, 0);
timer.setInterval(5000L, myTimerEvent);
}
void loop() {
Blynk.run();
timer.run();
}
อัพโหลดไฟล์ Sketch และทดสอบรันโปรแกรม Blynk Dashboard จะแสดงค่าที่ส่งมาจาก Esp32 และ สามารถควบคุม RELAY บน Dustation Dev Kit ผ่าน Blynk Dashboard ได้
![]()
ดาวน์โหลดโค๊ดเต็มได้ที่ลิงค์ด้านล่างนี้
https://gist.github.com/imiconsystem2/32b4bbd79b0ee0f07da8808f6869527e