งานครั้งที่ 38 [iot#13 Anto] แสดงค่าสถานะของขาพอร์ตด้วย Anto
Anto สามารถรับค่าที่ส่งมาจากบอร์ดเข้ามาเป็นตัวเลข 1,0 ได้ โดยสามารถแสดงเป็นสถานะเป็นสวิตช์ ON, OFF หรือแสดงผลเป็นวิตเจ็ตที่เป็นหลอดไฟทำให้ผู้ใช้งานสามารถสะดวกในการอ่านค่ายิ่งขึ้น สำหรับผู้ที่ยังไม่ได้สมัครใช้งาน Anto สามารถศึกษาขั้นตอนได้จากงานครั้งที่ 36 [iot#11 Anto ] เริ่มต้นการใช้งาน Anto (ควบคุม LED) (http://www.praphas.com/forum/index.php?topic=347.0)
คอนเซ็ปต์หลักของงาน
บอร์ดส่งสถานะของขาพอร์ตซึ่งเป็นค่า 0, 1 ขึ้นเซิร์ฟเวอร์เพื่อแสดงผลหน้าเวปไซต์
[ขั้นตอนการดำเนินการ]
-สร้าง Thing
-สร้าง Channel (Channel คือช่องทางการสื่อสารซึ่งอยู่ภายใน Thing)
-สร้าง Key รหัสลับของ Thing
-นำค่า Thing, Channel, Key มาเขียนโค้ดเพื่อส่งข้อมูลขึ้นเซิร์ฟเวอร์
-ออกแบบหน้าเวปสำหรับใช้สื่อสารกับบอร์ด
-เขียนโค้ดเพื่อใช้งาน
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/1.png)
2. งานครั้งนี้เป็นการแสดงสถาะนะลอจิกที่ขาพอร์ตโดยเป้าประสงค์ต้องการแสดงเป็นหลอดไฟดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/2.png)
ส่วนจัดการเวปไซต์
3. เริ่่มจากสร้าง Thing โดยคลิกที่ Thing (1) และ Create new thing (2) ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/3.png)
4. ป้อนรายละเอียด Thing(1) โดยในช่อง Name เป็นชื่อ Thing ที่ต้องนำไปใช้ในโค้ดโปรแกรม เมื่อป้อนเรียบร้อยแล้วคลิกที่ Add new (2)
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/4.png)
5. รายการ Thing ที่ถูกสร้างขึ้นใหม่ ทำการสร้าง Channel เพื่อเป็นช่องในการสื่อสารข้อมูลโดยคลิกตรงแว่นขยาย
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/5.png)
6. ทำการสร้าง Channel โดยตามขั้นตอนดังรูป ในตัวอย่างนี้ทำการสร้างทั้งหมด 2 Channel เพื่อใช้แสดงสถานะของขาพอร์ตจำนวน 2 ขา
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/6.png)
7. เมื่อสร้าง Channel เสร็จจะมีรายการอยู่ 2 รายการ โดยสถานะของขาพอร์ตจะแสดงในรูปแบบของสวิตช์ On/Off
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/7.png)
8. สร้างคีย์ของ Channel โดยคลิกที่ Key ในเมนูด้านซ้ายมือ และคลิกสร้างที่ Create new key
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/8.png)
9. ป้อนคำอธิบายของคีย์ที่ต้องการสร้าง (1) แล้วคลิกเลือกการอ่านค่าและอัพเดจใน Channel ที่ต้องการ (เป็น Channel ใน Thing ที่สร้างขึ้นในครั้งนี้)
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/9.png)
เตรียมค่าที่เอาไปใช้ในการเขียนโค้ดโปรแกรม
ซึ่งต้องนำค่าจากเวปไซต์ไปใส่ในโค้ดจำนวน 4 อย่างได้แก่
-USERNAME
-Key (Token)
-Thing
-Channel
10. UserName ดูได้จากเมนู Account ดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/10.png)
11. Key (Token) ต้องเลือกรายการ Key ที่สร้างให้เชื่อมโยงใน Thing ที่ต้องการใช้งาน
(1) เข้าไปที่เมนู Key
(2) คลิกคัดลอก จากคีย์ที่ถูกสร้างใช้งานในครั้งนี้ (สังเกตจากคำอธิบาย) แล้วนำไปวางในโค้ดโปรแกรม
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/11.png)
12. Thing คลิกที่เมนู Thing เลือกชื่อที่ต้องการนำไปเขียนโปรแกรม
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/12.png)
13. Channel สามารถเข้าไปดูรายการได้โดยคลิกที่แว่นขยายของ Thing
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/13.png)
ส่วนจัดการโค้ด
14. แก้ค่าต่าง ๆ ของโค้ดโปรแกรมดังนี้
(1) ใส่รายละเอียดของไวไฟที่บอร์ดควบคุมใช้เชื่อมต่อ
(2) ใส่ค่า user(UserName), token(key),thing(Thing) ที่คัดลอกมาจากเวปไซต์จากข้อ 12-15
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/14.png)
15. ฟังก์ชั่นที่ใช้สำหรับส่งค่าขึ้นเซิร์ฟเวอร์ Anto เป็นดังรูป
(1) ชื่อ Channel ที่ต้องการส่งค่า
(2) ค่าที่ต้องการส่งขึ้น ในตัวอย่างนี้เป็นการส่งค่าสถานะของขาพอร์ตจากการอ่านค่าที่ขาพอร์ตโดยตรง
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/15.png)
โค้ดโปรแกรม
#include <AntoIO.h>
const char *ssid = "wifi_name";
const char *pass = "wifi_password";
const char *user = "anto_userName";
const char *token = "thing_key";
const char *thing = "thing_name";
AntoIO anto(user, token, thing);
void setup()
{
Serial.begin(115200);
delay(10);
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");
pinMode(D1,OUTPUT);
pinMode(D2,OUTPUT);
pinMode(D3,INPUT_PULLUP);
pinMode(D4,INPUT_PULLUP);
attachInterrupt(D3,stageD1,FALLING);
attachInterrupt(D4,stageD2,FALLING);
}
void stageD1(){
digitalWrite(D1,!digitalRead(D1));
}
void stageD2(){
digitalWrite(D2,!digitalRead(D2));
}
void loop() {
anto.mqtt.loop();
if (!anto.mqtt.isConnected())
Serial.println("Disconnected");
Serial.print("Status of Pin D1: ");
Serial.println(digitalRead(D1));
Serial.print("Status of Pin D2: ");
Serial.println(digitalRead(D2));
anto.pub("PinPortD1",digitalRead(D1));
anto.pub("PinPortD2",digitalRead(D2));
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);
}
16. หลังจากการ upload โค้ด เปิดหน้า Serial monitor ดูผลการเชื่อมต่อกับเซิร์ฟเวอร์หากเชื่อมต่อได้จะเป็นดังรูป
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/16.png)
17. สามารถดูค่าได้จาก Channel ทั้ง 2 ที่สร้างขึ้น
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/17.png)
ออกแบบหน้า DashBoard เพื่อแสดงผลหลอดไฟแสดงสถานะ
18. การออกแบบหน้า DashBoard เพื่อให้ผู้ใช้งานสะดวกในการอ่านค่า
(1) เข้าไปที่เมนู Dashboard
(2) คลิกสร้างใหม่
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/18.png)
19. เลือกวิตเจ็ตที่ต้องการ ในงานนี้เลือกหลอดไฟในการแสดงผล
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/19.png)
20. ตั้งค่าวิตเจ็ต
(1) ปรับขนาด
(2) ตั้งค่าเชื่อมต่อ
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/20.png)
21. ตั้งค่ารายละเอียดของหลอดไฟที่ใช้แสดงผล (ทำทั้ง 2 หลอด)
(1) ข้อความที่ใช้แสดง
(2) ตั้งค่า Channel ในการรับค่าเพื่อแสดงผล
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/21.png)
22. หลังตั้งค่าเสร็จเมื่อคลิก Apply สามารถใช้งานได้ทันที
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/22.png)
23. วงจรเชื่อมต่อ
(http://www.praphas.com/PhotoForum/iot/Lab-38-AntoStatus/23.jpg)