IOT > Internet of Thing ESP32 | ESP8266 : แสดงค่าความชื้นและอุณภูมิด้วย Anto

แสดงค่าความชื้นและอุณภูมิด้วย Anto
Anto สามารถรับค่าที่ส่งมาจากบอร์ดเข้ามาเป็นตัวเลขได้ โดยสามารถแสดงค่าข้อมูลเป็นตัวเลขหรือแสดงผลเป็นวิตเจ็ตที่เป็นเกจในกรณีที่ค่าที่ส่งมาเกิดจากการวัดปริมาณต่าง ๆ ทำให้ผู้ใช้งานสามารถสะดวกในการอ่านค่ายิ่งขึ้น สำหรับผู้ที่ยังไม่ได้สมัครใช้งาน Anto สามารถศึกษาขั้นตอนได้จากงานครั้งที่ 36 [iot#11 Anto ] เริ่มต้นการใช้งาน Anto (ควบคุม LED) และในงานครั้งนี้เป็นการส่งค่าอุณหภูมิและความชื้นซึ่งการเขียนโค้ดที่บอร์ดควบคุมจำเป็นต้องมีไลบรารี่ท่านใดยังไม่ได้ดำเนินการให้ศึกษาขั้นตอนได้ในงานครั้งที่ 8 การเขียนโปรแกรมอ่านค่าอุณหภูมิและความชื้นด้วย DHT22 เบื้องต้น

คอนเซ็ปต์หลักของงาน
บอร์ดส่งค่าตัวเลขชนิดที่มีทศนิยม (float) ขึ้นเซิร์ฟเวอร์เพื่อแสดงผลหน้าเวปไซต์

[ขั้นตอนการดำเนินการ]
-สร้าง Thing
-สร้าง Channel (Channel คือช่องทางการสื่อสารซึ่งอยู่ภายใน Thing)
-สร้าง Key รหัสลับของ Thing
-นำค่า Thing, Channel, Key มาเขียนโค้ดเพื่อส่งข้อมูลขึ้นเซิร์ฟเวอร์
-ออกแบบหน้าเวปสำหรับใช้สื่อสารกับบอร์ด
-เขียนโค้ดเพื่อใช้งาน

ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini

2. งานครั้งนี้เป็นการแสดงค่าอุณหภูมิและความชื้นสัมพัทธ์โดยเป้าประสงค์ต้องการแสดงเป็นเกจดังรูป

ส่วนจัดการเวปไซต์
3. เริ่่มจากสร้าง Thing โดยคลิกที่ Thing (1) และ Create new thing (2) ดังรูป

4. ป้อนรายละเอียด Thing(1) โดยในช่อง Name เป็นชื่อ Thing ที่ต้องนำไปใช้ในโค้ดโปรแกรม เมื่อป้อนเรียบร้อยแล้วคลิกที่ Add new (2)

5. รายการ Thing ที่สร้างขึ้นใหม่ ( 1 ) ทำการสร้าง Channel เพื่อเป็นช่องในการสื่อสารข้อมูลโดยคลิกตรงแว่นขยาย (2)

6. ผลจากการคลิกสร้าง Channel ในข้อที่ผ่านมาจะเป็นดังรูป ให้ทำการคลิกสร้างตามขั้นตอนดังรูป

7. สร้าง Channel แรกเป็นช่องสำหรับแสดงค่าอุณหภูมิโดยต้องตั้งค่าให้แสดงเป็นตัวเลขชนิดทศนิยม (Float)โดยดำเนินการดังนี้
(1) ตั้งชื่อ Channel (ชื่อนี้จะต้องเอาไปใส่ในโค้ดโปรแกรม) ช่องนี้สร้างเพื่อใช้แสดงค่าที่เป็นอุณหภูมิ
(2) คำอธิบาย Channel
(3) ค่าข้อมูลที่ต้องการใช้งาน ในที่นี้ต้องการแสดงค่าเป็นตัวเลขที่มีทศนิยม

8. สร้าง Channel ถัดมาเป็นช่องสำหรับแสดงค่าความชื่นสัมพัทธ์โดยต้องตั้งค่าให้แสดงเป็นตัวเลขชนิดทศนิยม (Float)โดยดำเนินการดังนี้
(1) ตั้งชื่อ Channel (ชื่อนี้จะต้องเอาไปใส่ในโค้ดโปรแกรม)
(2) คำอธิบาย Channel
(3) ค่าข้อมูลที่ต้องการใช้งาน ในที่นี้ต้องการแสดงค่าเป็นตัวเลขที่มีทศนิยม

9. เมื่อสร้าง Channel เสร็จจะมีรายการอยู่ 2 รายการ โดยค่าที่รับมาแล้วแสดงผลจะอยู่ใน Current Value

10. สร้างคีย์ของ Channel โดยคลิกที่ Key (1) และคลิกสร้างที่ Create new key (2)

11. ป้อนคำอธิบายของคีย์ที่ต้องการสร้าง (1) แล้วคลิกเลือกการอ่านค่าและอัพเดจใน Channel ที่ต้องการ (เป็น Channel ใน Thing ที่สร้างขึ้นในครั้งนี้)

เตรียมค่าที่เอาไปใช้ในการเขียนโค้ดโปรแกรม
ซึ่งต้องนำค่าจากเวปไซต์ไปใส่ในโค้ดจำนวน 4 อย่างได้แก่
-USERNAME
-Key (Token)
-Thing
-Channel

12. UserName ดูได้จากเมนู Account ดังรูป

13. Key (Token) ต้องเลือกรายการ Key ที่สร้างให้เชื่อมโยงใน Thing ที่ต้องการใช้งาน
(1) เข้าไปที่เมนู Key
(2) คลิกคัดลอก จากคีย์ที่ถูกสร้างใช้งานในครั้งนี้ (สังเกตจากคำอธิบาย) แล้วนำไปวางในโค้ดโปรแกรม

14. Thing คลิกที่เมนู Thing เลือกชื่อที่ต้องการนำไปเขียนโปรแกรม

15. Channel สามารถเข้าไปดูรายการได้โดยคลิกที่แว่นขยายของ Thing

ส่วนจัดการโค้ด
16. แก้ค่าต่าง ๆ ของโค้ดโปรแกรมดังนี้
(1) ใส่รายละเอียดของไวไฟที่บอร์ดควบคุมใช้เชื่อมต่อ
(2) ใส่ค่า user(UserName), token(key),thing(Thing) ที่คัดลอกมาจากเวปไซต์จากข้อ 12-15

17. ฟังก์ชั่นที่ใช้สำหรับส่งค่าขึ้นเซิร์ฟเวอร์ Anto เป็นดังรูป
(1)(3) ชื่อ Channel ที่ต้องการส่งค่า
(2)(4) ค่าที่ต้องการส่งขึ้น ในตัวอย่างนี้เป็นการส่งค่าจากตัวแปร temp และ humid ซึ่งทั้งสองตัวแปรเป็น float

โค้ดโปรแกรม

โค๊ด: [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 ดูผลการเชื่อมต่อกับเซิร์ฟเวอร์หากเชื่อมต่อได้จะเป็นดังรูป

19. สามารถดูค่าได้จาก Channel ทั้ง 2 ที่สร้างขึ้น

*หมายเหตุ การเชื่อมต่อกับเซิร์ฟเวอร์ได้หรือไม่ สามารถดูได้จากตัวแจ้งเตือนดังรูป
(1) เชื่อมต่อได้ สามารถใช้งานได้ตามปกติ
(2) เชื่อมต่อไม่ได้ หากเกิดจากฝั่งเซิร์ฟเวอร์ให้รอสักระยะจนกว่าจะเชื่อมต่อได้จึงจะสามารถใช้งานได้

ออกแบบหน้า DashBoard เพื่อแสดงผลแบบเกจ
20. การออกแบบหน้า DashBoard เพื่อให้ผู้ใช้งานสะดวกในการอ่านค่า
(1) เข้าไปที่เมนู Dashboard
(2) คลิกสร้างใหม่