งานครั้งที่ 37 [iot#12 Anto] แสดงค่าความชื้นและอุณภูมิด้วย Anto
Anto สามารถรับค่าที่ส่งมาจากบอร์ดเข้ามาเป็นตัวเลขได้ โดยสามารถแสดงค่าข้อมูลเป็นตัวเลขหรือแสดงผลเป็นวิตเจ็ตที่เป็นเกจในกรณีที่ค่าที่ส่งมาเกิดจากการวัดปริมาณต่าง ๆ ทำให้ผู้ใช้งานสามารถสะดวกในการอ่านค่ายิ่งขึ้น สำหรับผู้ที่ยังไม่ได้สมัครใช้งาน Anto สามารถศึกษาขั้นตอนได้จากงานครั้งที่ 36 [iot#11 Anto ] เริ่มต้นการใช้งาน Anto (ควบคุม LED) (http://www.praphas.com/forum/index.php?topic=347.0) และในงานครั้งนี้เป็นการส่งค่าอุณหภูมิและความชื้นซึ่งการเขียนโค้ดที่บอร์ดควบคุมจำเป็นต้องมีไลบรารี่ท่านใดยังไม่ได้ดำเนินการให้ศึกษาขั้นตอนได้ในงานครั้งที่ 8 การเขียนโปรแกรมอ่านค่าอุณหภูมิและความชื้นด้วย DHT22 เบื้องต้น (http://www.praphas.com/forum/index.php?topic=311.0)
คอนเซ็ปต์หลักของงาน
บอร์ดส่งค่าตัวเลขชนิดที่มีทศนิยม (float) ขึ้นเซิร์ฟเวอร์เพื่อแสดงผลหน้าเวปไซต์
[ขั้นตอนการดำเนินการ]
-สร้าง Thing
-สร้าง Channel (Channel คือช่องทางการสื่อสารซึ่งอยู่ภายใน Thing)
-สร้าง Key รหัสลับของ Thing
-นำค่า Thing, Channel, Key มาเขียนโค้ดเพื่อส่งข้อมูลขึ้นเซิร์ฟเวอร์
-ออกแบบหน้าเวปสำหรับใช้สื่อสารกับบอร์ด
-เขียนโค้ดเพื่อใช้งาน
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/1.png)
2. งานครั้งนี้เป็นการแสดงค่าอุณหภูมิและความชื้นสัมพัทธ์โดยเป้าประสงค์ต้องการแสดงเป็นเกจดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/2.png)
ส่วนจัดการเวปไซต์
3. เริ่่มจากสร้าง Thing โดยคลิกที่ Thing (1) และ Create new thing (2) ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/3.png)
4. ป้อนรายละเอียด Thing(1) โดยในช่อง Name เป็นชื่อ Thing ที่ต้องนำไปใช้ในโค้ดโปรแกรม เมื่อป้อนเรียบร้อยแล้วคลิกที่ Add new (2)
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/4.png)
5. รายการ Thing ที่สร้างขึ้นใหม่ ( 1 ) ทำการสร้าง Channel เพื่อเป็นช่องในการสื่อสารข้อมูลโดยคลิกตรงแว่นขยาย (2)
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/5.png)
6. ผลจากการคลิกสร้าง Channel ในข้อที่ผ่านมาจะเป็นดังรูป ให้ทำการคลิกสร้างตามขั้นตอนดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/6.png)
7. สร้าง Channel แรกเป็นช่องสำหรับแสดงค่าอุณหภูมิโดยต้องตั้งค่าให้แสดงเป็นตัวเลขชนิดทศนิยม (Float)โดยดำเนินการดังนี้
(1) ตั้งชื่อ Channel (ชื่อนี้จะต้องเอาไปใส่ในโค้ดโปรแกรม) ช่องนี้สร้างเพื่อใช้แสดงค่าที่เป็นอุณหภูมิ
(2) คำอธิบาย Channel
(3) ค่าข้อมูลที่ต้องการใช้งาน ในที่นี้ต้องการแสดงค่าเป็นตัวเลขที่มีทศนิยม
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/7.png)
8. สร้าง Channel ถัดมาเป็นช่องสำหรับแสดงค่าความชื่นสัมพัทธ์โดยต้องตั้งค่าให้แสดงเป็นตัวเลขชนิดทศนิยม (Float)โดยดำเนินการดังนี้
(1) ตั้งชื่อ Channel (ชื่อนี้จะต้องเอาไปใส่ในโค้ดโปรแกรม)
(2) คำอธิบาย Channel
(3) ค่าข้อมูลที่ต้องการใช้งาน ในที่นี้ต้องการแสดงค่าเป็นตัวเลขที่มีทศนิยม
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/8.png)
9. เมื่อสร้าง Channel เสร็จจะมีรายการอยู่ 2 รายการ โดยค่าที่รับมาแล้วแสดงผลจะอยู่ใน Current Value
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/9.png)
10. สร้างคีย์ของ Channel โดยคลิกที่ Key (1) และคลิกสร้างที่ Create new key (2)
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/10.png)
11. ป้อนคำอธิบายของคีย์ที่ต้องการสร้าง (1) แล้วคลิกเลือกการอ่านค่าและอัพเดจใน Channel ที่ต้องการ (เป็น Channel ใน Thing ที่สร้างขึ้นในครั้งนี้)
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/11.png)
เตรียมค่าที่เอาไปใช้ในการเขียนโค้ดโปรแกรม
ซึ่งต้องนำค่าจากเวปไซต์ไปใส่ในโค้ดจำนวน 4 อย่างได้แก่
-USERNAME
-Key (Token)
-Thing
-Channel
12. UserName ดูได้จากเมนู Account ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/12.png)
13. Key (Token) ต้องเลือกรายการ Key ที่สร้างให้เชื่อมโยงใน Thing ที่ต้องการใช้งาน
(1) เข้าไปที่เมนู Key
(2) คลิกคัดลอก จากคีย์ที่ถูกสร้างใช้งานในครั้งนี้ (สังเกตจากคำอธิบาย) แล้วนำไปวางในโค้ดโปรแกรม
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/13.png)
14. Thing คลิกที่เมนู Thing เลือกชื่อที่ต้องการนำไปเขียนโปรแกรม
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/14.png)
15. Channel สามารถเข้าไปดูรายการได้โดยคลิกที่แว่นขยายของ Thing
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/15.png)
ส่วนจัดการโค้ด
16. แก้ค่าต่าง ๆ ของโค้ดโปรแกรมดังนี้
(1) ใส่รายละเอียดของไวไฟที่บอร์ดควบคุมใช้เชื่อมต่อ
(2) ใส่ค่า user(UserName), token(key),thing(Thing) ที่คัดลอกมาจากเวปไซต์จากข้อ 12-15
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/16.png)
17. ฟังก์ชั่นที่ใช้สำหรับส่งค่าขึ้นเซิร์ฟเวอร์ Anto เป็นดังรูป
(1)(3) ชื่อ Channel ที่ต้องการส่งค่า
(2)(4) ค่าที่ต้องการส่งขึ้น ในตัวอย่างนี้เป็นการส่งค่าจากตัวแปร temp และ humid ซึ่งทั้งสองตัวแปรเป็น float
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/17.png)
โค้ดโปรแกรม
#include <AntoIO.h>
#include <DHT.h>
#define DHTPIN D1
#define DHTTYPE DHT11
const char *ssid = "wifi name";
const char *pass = "wifi password";
const char *user = "anto username";
const char *token = "key of thing";
const char *thing = "thing name";
AntoIO anto(user, token, thing);
DHT dht(DHTPIN,DHTTYPE);
void setup() {
Serial.begin(115200);
delay(10);
Serial.println();
Serial.println();
Serial.print("Anto library version: ");
Serial.println(anto.getVersion());
Serial.print("\nTrying to connect ");
Serial.print(ssid);
Serial.println("...");
anto.begin(ssid, pass, messageReceived);
Serial.println("\nConnected Anto done");
dht.begin();
}
void loop() {
anto.mqtt.loop();
if (!anto.mqtt.isConnected())
Serial.println("Disconnected");
float temp = dht.readTemperature();
float humid = dht.readHumidity();
Serial.print("TEMP: ");
Serial.println(temp);
Serial.print("HUMID: ");
Serial.println(humid);
if(temp >= 0){
anto.pub("Temp",temp);
}
if(humid >= 0){
anto.pub("Humid",humid);
}
delay(1000);
}
void messageReceived(String thing, String channel, String payload) {
Serial.print("Recieved: ");
Serial.print(thing);
Serial.print("/");
Serial.print(channel);
Serial.print("-> ");
Serial.println(payload);
}
ทดสอบการทำงาน
18. หลังจากการ upload โค้ด เปิดหน้า Serial monitor ดูผลการเชื่อมต่อกับเซิร์ฟเวอร์หากเชื่อมต่อได้จะเป็นดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/18.png)
19. สามารถดูค่าได้จาก Channel ทั้ง 2 ที่สร้างขึ้น
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/19.png)
*หมายเหตุ การเชื่อมต่อกับเซิร์ฟเวอร์ได้หรือไม่ สามารถดูได้จากตัวแจ้งเตือนดังรูป
(1) เชื่อมต่อได้ สามารถใช้งานได้ตามปกติ
(2) เชื่อมต่อไม่ได้ หากเกิดจากฝั่งเซิร์ฟเวอร์ให้รอสักระยะจนกว่าจะเชื่อมต่อได้จึงจะสามารถใช้งานได้
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/connect.png)
ออกแบบหน้า DashBoard เพื่อแสดงผลแบบเกจ
20. การออกแบบหน้า DashBoard เพื่อให้ผู้ใช้งานสะดวกในการอ่านค่า
(1) เข้าไปที่เมนู Dashboard
(2) คลิกสร้างใหม่
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/20.png)
21. เลือกวิตเจ็ตที่ต้องการ ในงานนี้เลือกเกจในการแสดงผล
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/21.png)
22. ตั้งค่าวิตเจ็ต
(1) ปรับขนาด
(2) ตั้งค่าเชื่อมต่อ
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/22.png)
23. ตั้งค่ารายละเอียดของเกจที่ใช้แสดงผล
(1) ชื่อเกจ
(2) Channel ที่ต้องการนำค่ามาแสดงผล
(3) ค่าต่ำสุดและสูงสุดของสเกลเกจ
-สำหรับเกจวัดอุณหภูมิ
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/23.png)
-สำหรับเกจวัดความชื้นสัมพัทธ์
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/24.png)
25. หลังตั้งค่าเสร็จเมื่อคลิก Apply สามารถใช้งานได้ทันที
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/25.png)
26. วงจรเชื่อมต่อ
(http://www.praphas.com/PhotoForum/iot/Lab-37-AntoDHT/26.jpg)