ใส่ใจ 7. เตรียมความพร้อมก่อนการใช้ Blynk App

ควบคุม “ใส่ใจ” ด้วย Application บน Mobile IOS และ Android

คิดถึงสมัยก่อนช่วงที่มีอินเตอร์เนตใหม่ๆ จะเข้าไปดูกล้องวงจรปิดที่บ้านของตัวเองต้องตั้งค่า NAT จาก ROUTER ด้วย ต้องมีความรู้ด้วยนะว่ามันใช้พอร์ตอะไรบ้าง เพราะต้องตั้งค่า FORWARD แพคเกจเอง การที่จะมี SERVER ส่วนตัวไว้ใช้เองที่บ้านและสามารถเข้าถึงจากนอกบ้านได้นั้นต้องอาศัยแอพพลิเคชันเข้ามาช่วย เช่น DYNDNS หรือ No-IP เพื่อบอกว่าตอนนั้น ROUTER มัน IP เท่าไหร่ มันวุ่นวายไม่ใช่น้อยเลย

TCP/IP , UDP พอร์ตเท่าไหร่ ???

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

BLYNK SERVER ก็ถือว่าเป็น IoT CLOUD ด้วยนะครับ มันจะคอยรอรับการติดต่อจาก IoT NODE เช่น ESP8266 / ESP32 / RASPBERRY PI หรืออื่นๆ หลังจากเชื่อมต่อได้แล้ว เราก็สามารถใช้ BLYNK APP ที่มีทั้งบน Android และ IOS ควบคุมอุปกรณ์ IoT NODE ได้เลย สะดวกรวดเร็วและง่ายดายมาก

รู้จัก BLYNK SERVER

BLYNK SERVER ถูกพัฒนามาจากภาษา JAVA มันสามารถทำงานภายใต้ OS อะไรก็ได้ไม่ว่าจะเป็น WINDOWS / MAC / LINUX แต่ถ้าแนะนำให้ติดตั้งบน LINUX OS (UBUNTU) จะดีที่สุดเพราะมีการนำไปใช้งานแล้วจำนวนมาก ผู้เขียนเองก็ได้ทดสอบติดตั้ง BLYNK SERVER ด้วยตัวเองโดยใช้ LINUX OS (UBUNTU) ที่ DigitalOcean เลือกสเปค Standard Droplets ที่ต่ำสุด (1vCPU 25GB-SSD DISK) ใช้งานจริงมาแล้วมากกว่า 2 ปี มีจำนวน NODE ที่เชื่อมต่อมากกว่า 500 ตัว ไม่เคย Hang ไม่จุกจิก มีเพียงแต่อัพเดท BLYNK SERVER ให้เป็นเวอร์ชันใหม่เท่านั้นที่เข้าไปยุ่งกับ SERVER

เนื่องจากตัวมันต้องการใช้ทรัพยากรที่ไม่สูงมาก RAM 30MB ก็ทำงานได้แล้ว ดังนั้นเราสามารถนำไปติดตั้งในบอร์ด SBC เช่น Raspberry Pi เพื่อใช้งานเองที่บ้านได้ด้วย ผู้เขียนเองก็มีเวอร์ชันที่ติดตั้งบน Raspberry Pi ใช้งานเองด้วยเช่นกัน

ส่ิงที่ทำให้ผู้เขียนชอบมากๆ เกี่ยวกับ BLYNK SERVER ก็คือ มันเป็น OPEN-SORCE แบบ GNU GENERAL PUBLIC LICENSE ที่เราสามารถนำไปใช้งานได้จริง สามารถนำไปต่อยอดเพื่อการค้า แก้ไขปรับปรุงโค๊ดจากต้นฉบับ นำไปคัดลอกแจกจ่ายเผยแพร่ ได้ เรียกว่ายอดเยี่ยมมากๆ สำหรับของฟรีและดีที่มีอยู่จริง

ผู้ที่สนใจ สามารถเข้าไปดูรายละเอียดโปรเจคเพิ่มเติมได้ที่ [BLYNK SERVER] และดูเอกสารออนไลน์ ตัวอย่างโค๊ดที่ทำไว้อย่างละเอียดได้ที่ [BLYNK DOC]

แต่ถ้าไม่อยากติดตั้ง Server เองทาง Blynk ก็มีบริการให้ใช้ Server ของเขาฟรีด้วยนะครับ

BLYNK ทำงานอย่างไร ?

แสดงสถาปัตยกรรมการทำงานของ BLYNK (ที่มา: http://docs.blynk.cc)

ผู้เขียนจะเร่ิมอธิบายจากปลายทางคือ IoT NODE ไปยังปลายทางคือ BLYNK APP จากรูปข้างบน IoT NODE ก็คือ Arduino / ESP8266 / ESP32 หรือ RASPBERRY ที่เชื่อมต่ออินเตอร์เนตผ่าน WIFI / 3G / 4G / LoRa หรือสายแลน การที่จะทำให้ IoT NODE เหล่านี้รู้จัก BLYNK SERVER ได้ก็ต้องติดตั้งไลบรารี่ BLYNK เสียก่อน

หรือจะลองเช็คอุปกรณ์ที่ BLYNK รองรับก่อนก็ได้ [hardware support] แต่เท่าที่ผู้เขียนดู อุปกรณ์หลักๆ ที่รู้จักส่วนใหญ่ก็รองรับหมดแล้ว

หน้าควบคุม “ใส่ใจ” บนมือถือ

BLYNK SERVER จะใช้รหัส TOKEN ในการแยกแยะอุปกรณ์ที่เชื่อมต่อเข้าหามันว่าเป็นตัวไหน รหัสนี้จะได้มาจากการลงทะเบียนใน BLYNK APP ที่เราติดตั้งไว้บนมือถือ รหัสนี้เปรียบเสมือนรหัสประจำตัวประชาชนของเรา เอาไว้สำหรับยืนยันตัวตนว่าเป็นอุปกรณ์ตัวไหน รหัส TOKEN แต่ละตัวจะไม่ซ้ำกัน เราจะต้องระบุรหัส TOKEN นี้ไว้ในโค๊ด Arduino Sketch แล้วแก้ไขชื่อ SSID กับรหัสผ่าน WiFi จากนั้นอัพโหลดโปรแกรมเข้า IoT NODE แค่นี้อุปรณ์ก็สามารถเชื่อมต่อกับ BLYNK SERVER ได้แล้ว

เปิด BLYNK APP ที่ติดตั้งไว้บนมือถือ แล้วเพิ่ม WIDGET ปุ่มต่างๆ ที่ต้องการแล้วระบุขาใช้งานให้ตรงกับที่เราเขียนโปรแกรมไว้ เช่น V7 เป็นปุ่ม ปิด เปิดไฟ , V10 เป็นค่าเปอร์เซ็นต์สัญญาณ WiFi หรือถ้าต้องการพล๊อตกราฟก็ให้เลือก WIDGET superChart แล้วเลือกประเภทของกราฟที่ต้องการแสดง เช่น Bar /Column / Line เป็นต้น จากนั้นสั่ง RUN โปรแกรมโดยคลิ๊กที่รูปสามเหลี่ยมขวาบน แค่นี้ก็เราสามารถควบคุม IoT NODE ได้แล้ว

การติดตั้ง BLYNK APP

BLYNK เป็น APP ฟรี รองรับการทำงานทั้ง Android และ IOS เร่ิมด้วยการค้นหา ชื่อ APP ให้พิมพ์คำว่า “blynk” ใน STORE ของแต่ละ OS ก็จะพบกัน BLYNK APP ทั้งนี้เวอร์ชันอาจแตกต่างกันไปบ้าง เพราะผู้พัฒนาอัพเดทรุ่นใหม่เสมอ เจอแล้วก็ให้ติดตั้งเลย

รูปแสดง APP Blynk ใน Android และ IOS

หลังจากที่ติดตั้งเสร็จเรียบร้อย ให้เปิด Blynk APP ขึ้นมาเพื่อทำการสร้างผู้ใช้งานใหม่ ในขั้นนตอนนี้ผู้เขียนขออธิบายเพิ่มเติมว่า Blynk เป็น APP ให้ใช้งานฟรีก็จริงแต่เราจะได้รับ Blynk energy มาแค่ 1,000 เท่านั้นถ้าใช้ Server ของเขา

Blynk energy คืออะไร ?

รูปแสดง Widget ของ Blynk APP

ถ้าใครเคยเล่นเกมส์ฟรีในมือถือ คงจะพอคุ้นๆ ว่าเขาจะให้เหรียญหรือแต้มมาให้ด้วยหลังติดตั้งโปรแกรมครั้งแรก แต่ก็ได้มาแค่นิดหน่อย ให้พอซื้อ item อะไรเล่นได้บ้างเพื่อสร้างความคุ้นเคยกับเกมส์ ที่เล่น แต่ถ้าต้องการซื้อ item พิเศษ ถึงเวลานี้เราต้องเสียเงินจริงซื้อมา

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

ยกตัวอย่างจำนวน energy ที่ท่านต้องใช้

Button(ปุ่ม) จะใช้ 200 energy
Label(แถบแสดงข้อมูล) จะใช้ 400 energy
SuperChart(กราฟ) จะใช้ 900 energy

แต่ถ้าท่านเอาไปใช้งานจริงๆ เหมือนตัวอย่างของ “ใส่ใจ” จำนวน energy 1,000 ที่ได้มาตอนสมัครครั้งแรกคงไม่พอแน่ๆ ต้องซื้อเพิ่มเติมอย่างแน่นอน

อยากได้ฟรี Blynk energy เยอะๆ มีไหม ?

ตอบได้เลยว่ามี เนื่องจาก BLYNK SERVER เป็น OPENSOURCE ดังน้ันเราสามารถติดตั้ง BLYNK SERVER ได้เอง ออกแรงนิดหน่อยแต่ก็คุ้ม ซึ่งจะทำให้เราสามารถกำหนด energy เองเท่าไหร่ก็ได้ ผู้เขียนได้ทำการติดตั้ง SERVER ไว้ใช้งานเองที่ DigitalOcean และ Google Cloud Server จากนั้นแจก energy ให้กับผู้สมัครคนละ 100,000 energy เรียกว่าจุใจเลย ใช้เท่าไหร่ก็ไม่หมด 555

การลงทะเบียนใช้งาน Blynk

ท่านสามารถลงทะเบียนใช้งาน Blynk ได้จาก APP ที่ติดตั้งไว้แล้วในมือถือ ให้ท่านเปิด Blynk APP ขึ้นมาแล้วคลิ๊กที่ “Create New Account” แล้วใส่อีเมล์และรหัสผ่านที่ต้องการ โดยอีเมล์ที่กรอก “ต้องใช้งานได้จริงๆ” นะครับ เพราะระบบจะส่งรหัส TOKEN ไปให้ตามอีเมล์

ตัวอย่างข้างล่างเป็นการลงทะเบียนกับ BLYNK SERVER เพียงแค่ใส่อีเมล์และรหัสผ่านจากนั้นคลิ๊กที่ปุ่ม Sign Up ก็เรียบร้อย เราจะได้ Blynk energy มาใช้งานเริ่มต้น 1,000 energy

รูปแสดงการสร้างผู้ใช้งานใหม่

ถ้าใครใช้ SERVER ของ BLYNK ให้ข้ามขั้นตอนนี้ไป”

แต่ถ้าท่านตั้ง BLYNK SERVER เอง จะต้องเพิ่มขั้นตอนขึ้นมาอีกเล็กน้อย ท่านต้องเข้าไปที่ Server Setting เพื่อไประบุ IP ของ SERVER ที่ท่านติดตั้งเอง และกำหนดพอร์ตเป็น 8443 หรือ 9443 ขึ้นอยู่กับเวอร์ชันของ SERVER ที่ติดตั้งไว้ ถ้าเป็นเวอร์ชันใหม่ๆ จะใช้พอร์ตเป็น 9443 หลังจากกำหนดค่า SERVER แล้ว ก็ให้คลิ๊กที่ปุ่ม Sign Up ก็จะพบกับหน้าสร้างโครงการใหม่ “New Project

รูปแสดงการตั้งค่า Server ที่จะเชื่อมต่อ

ขั้นตอนต่อจะเป็นการสร้างโปรเจคใหม่ ให้คลิ๊กที่ “New Project” แล้วใส่ชื่อโครงการให้เรียบร้อยจากตัวอย่างจะตั้งชื่อโครงการเป็น “MISSMT SmartIoT” แล้วเลือกประเภทของบอร์ดพัฒนา ผู้เขียนใช้บอร์ด ESP32 จึงเลือกเป็น “ESP32 Dev Board” ถ้าใครใช้บอร์ด NodeMCU หรือ ESP8266 ก็เลือกบอร์ดให้ถูกรุ่นด้วยนะครับ เพราะจะทำให้ Blynk ทำงานผิดพลาดได้ถ้าเลือกบอร์ดผิดรุ่น บอร์ดแต่ละรุ่นวางตำแหน่งขา GPIO ไม่เหมือนกันนะครับ

ส่วน THEME ก็คือสีพื้นของ APP ถ้าใครชอบสีแนวออกสว่างสีขาวก็สามารถเลือกเป็น “LIGHT” ส่วนผู้เขียนชอบพื้นสีออกโทนสีดำจึงเลือกเป็น “DARK” จากนั้นคลิ๊กที่ปุ่ม “Create” จะเป็นสร้างโปรเจค

รูปแสดงการสร้างโปรเจคใหม่

หลังจากที่สร้างโปรเจคเสร็จเรียบร้อย เราจะได้รับรหัส TOKEN ที่ Blynk Server ส่งมาให้ หน้าตาอีเมล์ก็คล้ายๆ ตามรูปตัวอย่างข้างล่าง รหัสนี้ก็คือตัวแทนของบอร์ดพัฒนานั่นเอง Blynk Server จะรู้จักบอร์ดเราได้และรู้ว่าตัวไหนอยู่ที่ไหนก็อาศัยรหัส TOKEN เป็นตัวอ้างอิงนี่ละครับ

รูปแสดงตัวอย่างอีเมล์ที่ได้รับการ Blynk Server

ตัวอย่าง การควบคุมหลอดไฟ LED ด้วย Blynk APP

เพื่อให้ภาพการทำงานมาดูตัวอย่างการใช้ BLYNK APP ควบคุมการปิด เปิดหลอดไฟ LED ดูครับ ตัวอย่างนี้จะเป็นการเชื่อมต่อ ESP32 เข้ากับ BLYNK SERVER ผลลัพธ์ที่ได้ จะสามารถควบคุมปิด เปิด หลอด LED ผ่านทางแอพพลิเคชั่นบนสมาร์ทดีไวซ์ได้ ให้ต่อวงจรทดลองตามรูปข้างล่าง ขาที่ต่อทดสอบ คือ GPIO4 //LED

แสดงรูปการต่อวงจร

ถึงเวลาที่ต้องใช้รหัส TOKEN แล้ว ให้นำไปใส่ในตัวแปร auth[] = “xxxxxxxxxxx” แล้วแก้ไขชื่อ SSID รหัสการเชื่อมต่อ WIFI ให้ถูกต้อง แก้ไขแค่ 3 จุดนี้แล้วสั่งอัพโหลดโปรแกรมได้เลย

/*
* ตัวอย่างการใช้ BLYNK APP ควบคุมการปิดเปิดหลอดไฟ LED
*/
#define BLYNK_PRINT Serial
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
char auth[] = "xxxxxxxxxx";
char ssid[] = "xxxxxxxxxx";
char pass[] = "xxxxxxxxxx";
void setup() { Serial.begin(115200); //เริ่มการเชื่อมต่อ Blynk Server
Blynk.begin(auth, ssid, pass);
}void loop() { Blynk.run();}

หลังจากอัพโหลด Sketch เข้าสู่บอร์ด ESP32 แล้ว ให้เข้าไปดูใน Serial Monitor ท่านจะพบว่าบอร์ด ESP32 ทำการเชื่อมต่อ WIFI ตามที่กำหนดไว้แล้วแสดง IP ที่ได้รับจาก Router มา จากนั้นจะเชื่อมต่อไปยัง BLYNK SERVER ถ้าเชื่อมต่อสำเร็จจะแสดงข้อความประมาณตามรูปด้านล่าง มาถึงตอนนี้บอร์ด ESP32 ก็พร้อมสำหรับการควบคุมแล้วผ่าน Blynk APP แล้วครับ

แสดงหน้า Serial Monitor

มาฝั่งทาง Blynk APP บ้าง ให้สร้าง WIDGET ปุ่มควบคุมขึ้นมา ให้คลิ๊กที่พื้นที่ว่างในโปรเจคตามรูป แล้วคลิ๊กที่สัญลักษณ์รูป +

รูปแสดงการเพิ่ม Widget

เลือก Button (200 energy) แล้วคลิ๊กที่ปุ่มเพื่อไปหน้าตั้งค่า

รูปแสดงการตั้งค่า Widget

ตั้งชื่อให้ปุ่ม Button ในที่นี่ผู้เขียนตั้งชื่อว่า “LED” ส่วนรูปหยดน้ำเป็นการเลือกสีให้กับปุ่ม Button ใครชอบสีไหนก็เลือกเอา จากนั้นไปที่ OUTPUT เลือกขา GPIO เป็นขาที่ 4 หรือ gp4 ขั้นตอนนี้สำคัญนะครับ ต้องเลือกให้ถูกต้องตามที่เราต่อวงจรไว้ มันจะได้ทำงานได้ถูกที่ ส่วนถ้าของใครขึ้นไม่เหมือนตามนี้เป็นไปได้ว่าท่านเลือกใช้บอร์ดอื่นที่ไม่ใช่ ESP32 ครับ ไม่ต้องตกใจ แต่ละบอร์ดการเรียงขาไม่เหมือนกันการเรียกชื่อก็แตกต่างกันไป

ที่ MODE มีให้เลือกคือ “PUSH” และ “SWITCH” ทั้งสองแบบนี้ทำงานต่างกัน ถ้าท่านเลือกเป็น PUSH อารมณ์จะเหมือนกับวิทยุสื่อสารทางเดียว การทำงานของมันจะเป็นแบบกดดับปล่อยดับ แต่ถ้าเลือก SWITCH จะทำงานแบบกดติด กดดับ ในตัวอย่างนี้เลือกใช้การควบคุมแบบ SWITCH

รูปแสดงการเลือกขา GPIO

เสร็จแล้วมาเร่ิมการทำงานของ APP กัน ให้คลิ๊กที่ปุ่มสามเหลี่ยม ท่านจะเห็นได้ว่ารูปสามเหลี่ยมจะเปลี่ยนเป็นรูปสี่เหลี่ยมแทน แล้วที่ปุ่ม Button จะเปลี่ยนจากคำว่า gp4 เป็น OFF แทน ท่านลองกดปุ่มดู จะพบว่าหลอดไฟ LED จะติดและดับตามการควบคุมของท่าน ง่ายมากเลยใช่ไหมครับ ไม่ต้องเขียน Mobile APP เอง

รูปแสดงการสั่งให้ Blynk APP ทำงาน

ตัวอย่าง รายงานอุณหภูมิและความชื้นด้วย Blynk APP

มาดูอีกสักตัวอย่างให้เห็นภาพมากยิ่งขึ้น ตัวอย่างนี้จะเป็นการรายงานค่าอุณภูมิและความชื้นจากเซ็นเซอร์ DHT11 แล้วแสดงกราฟข้อมูลผ่านทางแอพพลิเคชั่น Blynk บนสมาร์ทดีไวซ์ ขาที่ต่อทดสอบ คือ GPIO15 //DHT11 Sensor ให้ต่อวงจรตามรูปข้างล่าง

รูปแสดงการต่อวงจร

ใส่รหัส TOKEN ในตัวแปร auth[] = “xxxxxxxxxxx” แล้วแก้ไขชื่อ SSID รหัสการเชื่อมต่อ WIFI ให้ถูกต้อง แก้ไขแค่ 3 จุดนี้แล้วสั่งอัพโหลด Sketch ได้เลย

/*
* ตัวอย่างการรายงานค่าอุณภูมิและความชื้น แสดงกราฟข้อมูลผ่าน Blynk APP
* ตั้งเวลาส่งข้อมูลให้ Blynk Server ทุกๆ 5 วินาที
*/
#define BLYNK_PRINT Serial
#include <WiFi.h>
#include <WiFiClient.h>
#include <BlynkSimpleEsp32.h>
//โหลดไลบารี่ DHT11
#include <SimpleDHT.h>
char auth[] = "xxxxxxxxxxx";
char ssid[] = "xxxxxxxxxxx";
char pass[] = "xxxxxxxxxxx";
int LEDPIN = 4; //GPIO4 LED
int DHTSENSOR = 15; //GPIO15 (ADC2_CH3)
//ระบุรุ่นเซ็นเซอร์รุ่น
DHT11SimpleDHT11 dht11;
BlynkTimer timer;void sendSensor() { //กำหนดตัวแปรเก็บค่าอุณหภูมิ
byte temperature = 0;
//กำหนดตัวแปรเก็บค่าความชื้นสัมสัทธ์
byte humidity = 0;
//อ่านค่าจากเซ็นเซอร์
dht11.read(DHTSENSOR, &temperature, &humidity, NULL);
while (temperature == 0) { //อ่านค่าจากเซ็นเซอร์
dht11.read(DHTSENSOR, &temperature, &humidity, NULL);
Serial.println("DHT11 get failed");
delay(1500);
} //ส่งค่า humidity V1 ไปยัง blynk server
Blynk.virtualWrite(V1, humidity);
//ส่งค่า temperature V2 ไปยัง blynk server
Blynk.virtualWrite(V2, temperature);
Serial.print("Humidity: ");
Serial.print(humidity);
Serial.print("% | ");
Serial.print("Temperature: ");
Serial.print(temperature);
Serial.println("C");
}void setup() {Serial.begin(115200);//เริ่มการเชื่อมต่อ Blynk Server
Blynk.begin(auth, ssid, pass);
//ตั้งเวลาส่งข้อมูลให้ Blynk Server ทุกๆ 5 วินาที
timer.setInterval(5000L, sendSensor);
}void loop() { Blynk.run();
timer.run();
}

หลังจากอัพโหลด Sketch ให้บอร์ด ESP32 เสร็จเรียบร้อย ให้เข้าไปดูใน Serial Monitor ท่านจะพบว่าบอร์ด ESP32 ทำการเชื่อมต่อ WIFI ตามที่กำหนดไว้ แล้วแสดง IP ที่ได้รับจาก Router จากนั้นจะเชื่อมต่อไปยัง BLYNK SERVER ถ้าเชื่อมต่อสำเร็จจะแสดงข้อความประมาณตามรูปด้านล่าง

ท่านจะเห็นการรายงานเปอร์เซ็นต์ค่าความชื้น (Humidity) และอุณหภูมิ (Temperature) ทุกๆ 5 วินาที มาถึงตอนนี้บอร์ด ESP32 ก็พร้อมสำหรับการควบคุมแล้วผ่าน Blynk APP และมันจะรายงานค่าความชื้นและอุณหภูมิไปให้ Blynk Server ด้วยครับ

มาฝั่งทาง Blynk APP บ้าง ให้สร้าง WIDGET Gauge มิเตอร์แสดงผลค่าความชื้นขึ้นมา ให้คลิ๊กที่พื้นที่ว่างในโปรเจคตามรูป แล้วคลิ๊กที่สัญลักษณ์รูป + จากนั้นเลือกที่ Gauge (300 energy)

รูปแสดงการเพิ่ม Widget Gauge

คลิ๊กที่ปุ่ม Gauge เพื่อไปหน้าตั้งค่า ตั้งชื่อให้ Gauge มิเตอร์ ในที่นี้ผู้เขียนตั้งชื่อว่า “Humidity” ส่วนรูปหยดน้ำเป็นการเลือกสีให้ปุ่ม ใครชอบสีไหนก็เลือกเอา จากนั้นไปที่ OUTPUT เลือกขา Vitual เป็นขา V1 ตามที่กำหนดไว้ในโปรแกรม Arduino SKETCH ตั้งค่าเป็นต่ำสุดเป็น 0 และสูงสุดเป็น 100 ส่วนที่ LABEL จะเห็นว่ามีคำว่า /pin/ ตัวหนังสือสีเขียว อันนี้เป็นตัวแปรค่าความชื้นที่จะแสดง ส่วนตัวหนังสือสีขาวคือข้อความประกอบธรรมดา นอกจากนี้เอายังสามารถใส่ symbol เป็นรูปต่างๆ ได้อีกด้วยนะครับ

รูปแสดงการตั้งค่า Widget Guage

ให้สร้าง WIDGET Gauge มิเตอร์ แสดงผลค่าอุณหภูมิขึ้นมาให้คลิ๊กที่สัญลักษณ์รูป +

รูปแสดงการเพิ่ม Widget Guage

คลิ๊กที่ Gauge มิเตอร์ เพื่อไปหน้าตั้งค่า ตั้งชื่อให้ปุ่มในที่นี่ผู้เขียนตั้งชื่อว่า “Temperature” เลือกสีเป็นสีชมพู จากนั้นไปที่ OUTPUT เลือกขา Vitual เป็นขา V2 ตามที่กำหนดไว้ในโปรแกรม Arduino SKETCH ตั้งค่าเป็นต่ำสุดเป็น 0 และสูงสุดเป็น 50 ส่วนที่ LABEL จะเห็นว่ามีคำว่า /pin.#/ ตัวหนังสือสีเขียวอันนี้เป็นตัวแปรค่าความชื้นที่มีทศนิยม 1 ตำแหน่งที่จะแสดง ส่วนตัวหนังสือสีขาวคือข้อความประกอบธรรมดา

รูปแสดงการตั้งค่า Widget Guage

ให้สร้าง WIDGET SuperChart ขึ้นมา คลิ๊กที่สัญลักษณ์รูป + แล้วเลือก SuperChart

รูปแสดงการเพิ่ม Widget SuperChart

คลิ๊กที่ SuperChart เพื่อไปหน้าตั้งค่า สำหรับกราฟที่ต้องการแสดงนั้นจะมีอยู่ 2 ค่าคือเปอร์เซ็นของค่าความชื้นและค่าอุณหภูมิ โดยค่าทั้งสองนี้มาจากตัวเซ็นเซอร์ DHT11 ผู้เขียนเลยตั้งชื่อกราฟเป็น “DHT11” ส่วนที่ DATASTREAMS จะเป็นเส้นกราฟที่จะแสดงในที่นี้ให้กราฟเส้นแรกเป็น Humidity และเส้นที่สองเป็น Temperature ถ้ามีมากกว่านี้ก็สามารถเพิ่มได้โดยคลิ๊กที่ปุ่ม + Add DataStream

รูปแสดงการตั้งค่า Widget SuperChart

ส่วนการตั้งค่ากราฟให้คลิ๊กที่สัญลักษณ์ เส้น 3 เส้นแนวตั้ง บริเวณ DATASTREAMS ท่านจะพบกับการตั้งค่าของกราฟต่างๆ เริ่มที่

DESIGN ให้ท่านเลือกรูปแบบของกราฟที่ต้องการแสดง มีให้เลือกคือ กราฟเส้นโปร่ง กราฟเส้นทึบ กราฟแท่งและกราฟเส้น แล้วเลือกสีเส้นกราฟที่ชอบ

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

INPUT ให้เลือก V1 สำหรับค่าเปอร์เซ็นต์ความชื้น และ V2 สำหรับค่าอุณภูมิ โดยค่าทั้งสองนี้ได้มาจากการกำหนดใน Arduino SKTECH

Y-AXIS ให้เลือกเป็น VALUES เพราะค่าที่ส่งมาจากบอร์ด ESP32 อยู่ในระหว่าง 0–100 อยู่แล้ว

รูปแสดงการตั้งค่า Widget SuperChart

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

รูปแสดงการทำงานของ Blynk APP

การใช้ Blynk APP ควบคุมอุปกรณ์ นับว่าเป็นทางเลือกที่ดีสำหรับนักพัฒนา IoT มันมี Widget มาให้พร้อมในเกือบทุกด้าน ขึ้นงานได้รวดเร็ว ลดเวลาการพัฒนา APP เอง ใช้งานได้ง่าย รองรับทั้ง Android , IOS และมี API ให้เอาไปต่อยอดพัฒนา ส่วนถ้าใครที่ต้องการนำ Blynk APP เอาไปใช้งานจริงๆ ทางการค้า เช่นต้องการใส่ logo เพิ่มเติม ก็สามารถติดต่อไปยัง Blynk ได้เพื่อ Custom โปรแกรมตามที่ต้องการ

พบกับใหม่ตอนต่อไป “ตอนที่ 8 การพัฒนาโปรแกรมควบคุมใส่ใจด้วย ESP32

ผู้เขียนมีความตั้งใจที่จะถ่ายทอดประสบการณ์ การพัฒนาระบบรดน้ำต้นไม้อัจฉริยะ “ใส่ใจ” ด้วย ESP32 เพื่อให้ผู้ที่สนใจ นำไปพัฒนาต่อยอดสร้างนวกรรมใหม่ๆ ขอเป็นส่วนหนึ่งเล็กๆ น้อยๆ ช่วยผลักดันประเทศของเราให้เข้าสู่ยุคดิจิตอล Thailand 4.0

ติดตามข่าวสารเกี่ยวกับ IoT ได้ที่ facebook IoT Thailand

--

--

Responses (2)