งานที่มอบหมาย ครูประภาส

บทความประกอบการเรียนรู้ => IOT : Internet of Thing (ESP8266, NodeMCU, WeMos D1 mini) => ข้อความที่เริ่มโดย: admin ที่ กุมภาพันธ์ 17, 2018, 03:02:55 PM

หัวข้อ: งานครั้งที่ 37 [iot#12 Anto] แสดงค่าความชื้นและอุณภูมิด้วย Anto
เริ่มหัวข้อโดย: admin ที่ กุมภาพันธ์ 17, 2018, 03:02:55 PM
งานครั้งที่ 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)

โค้ดโปรแกรม
โค๊ด: [Select]
#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)