การแสดงความชื้น/อุณหภูมิขึ้นเวปไซต์ ThingSpeak
ThingSpeak เป็นเวปไซต์ที่ให้บริการเก็บข้อมูลและแสดงผล ซึ่งสามารถนำมาใช้ในงาน iot ได้เพียงแต่มีข้อแม้ว่าข้อมูลในการส่งขึ้นไปบันทึกค่าแต่ละครั้งจะต้องไม่น้อยกว่า 15 วินาที (หากละเมิดอาจถูกแบนได้) งานครั้งนี้เป็นการแสดงค่าความชื้นและอุณภูมิบนหน้าเวปไซต์ ดังนั้นตัวบอร์ดต้องอ่านค่าจากตัวเซนเซอร์ให้ได้ก่อน ตัวเซนเซอร์ที่ใช้ในการทดลองนี้ใช้เบอร์ DHT11 ซึ่งขั้นตอนการเขียนโค้ดคำสั่งเพื่ออ่านค่าได้ทดลองผ่านมาแล้วในใบงานที่ 8 (DHT22 กับ DHT11 ใช้โค้ดตัวเดียวกันเพียงแต่แก้การกำหนดค่าเพียงคำสั่งเดียว) หากยังไม่ได้ติดตั้งไลบรารี่สำหรับเซนเซอร์ DHT ให้กลับไปศึกษาใน เขียนโปรแกรมอ่านค่าอุณหภูมิและความชื้นด้วย DHT22 เบื้องต้น สำหรับงานครั้งนี้มีขั้นตอนการดำเนินการทดลองเป็นดังนี้
[ขั้นตอนการดำเนินการ]
-ลงทะเบียนใช้งานเวปไซต์ ThingSpeak
-สร้างช่องใช้งาน
-นำค่า API Key มาเขียนโค้ดเพื่อส่งข้อมูลขึ้นเซิร์ฟเวอร์
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
ส่วนจัดการเวปไซต์
2. เข้าเวปไซต์ https://thingspeak.com คลิกที่ Sign Up เพื่อลงทะเบียนใช้งาน
3. กรอกข้อมูลลงทะเบียนใช้งาน ใช้อีเมล์จริงเนื่องจากจะต้องมีการดำเนินการยืนยันการลงทะเบียน
4. ตัวอย่างการกรอกข้อมูลลงทะเบียน
5. เปิดอีเมล์ทำการคลิกที่ปุ่มเพื่อยืนยันการลงทะเบียน
6. หน้าเวปจะแสดงผลการลงทะเบียน
7. สำหรับเวอร์ชั่นปัจจุบัน (30/1/2018) ทางเวปไซต์ให้ผู้ใช้งานลงทะเบียน MathWorsk ด้วย (ดำเนินการให้เสร็จสิ้น)
8. คลิกยอมรับ
9. คลิกสร้างช่อง (Channel) ใช้งาน
10. ตั้งค่าช่อง (Channel Settings)
(1) ชื่อกราฟ
(2) คำอธิบาย
(3) ชื่อข้อมูลของกราฟในฟิลด์ที่ 1
(4) ชื่อข้อมูลของกราฟในฟิลด์ที่ 2
*ตัวอย่างนี้แสดงผลข้อมูล 2 ชุด ซึ่งใน 1 ช่องสามารถแสดงผลข้อมูลได้สูงสุด 8 ชุด
11. คลิกที่ API Keys ทำการคัดลอกคีย์เพื่อนำไปใช้ในโค้ดโปรแกรม
ส่วนจัดการโค้ดโปรแกรมควบคุมบอร์ด
12. แก้ค่าต่าง ๆ ของโค้ดโปรแกรมดังนี้
(1) รหัส apiKey ที่คัดลอกมาจากเวปไซต์
(2) ใส่ชื่อไวไฟที่บอร์ดควบคุมใช้เชื่อมต่อ
(3) ใส่พาสเวิร์ดไวไฟ (ในกรณีที่ไวไฟมีการใช้รหัสผ่าน แต่ถ้าไม่มีให้ใช้ "")
13 รายละเอียดของ api
14 จุดที่รวมเอาค่าตัวแปรอุณภูมิและความชื้นที่ใช้ส่งขึ้นเซิร์ฟเวอร์ สามารถเพิ่มข้อมูลได้โดยส่งได้สูงสุด 8 ฟิลด์ สำหรับตัวอย่างนี้เป็นการส่งข้อมูลจำนวน 2 ฟิลด์โดยฟิลด์แรกส่งค่าตัวแปร t และฟิลด์สองส่งค่าตัวแปร h
โค้ดโปรแกรม
ทดสอบการทำงาน
15. คลิกที่ Private view
16. สังเกตผลที่ได้ จะมีข้อมูลค่อย ๆ ทะยอยเข้ามาทุก ๆ 20 วินาทีตามที่โค้ดโปรแกรมเขียนไว้
กรณีที่ต้องการชี้จุดที่วางบอร์ดเพื่อแสดงตำแหน่งของการวัด
17. เข้าเวปไซต์กูเกิลแมพ คลิกขวาที่ตำแหน่งที่ต้องการชี้จุด คลิกที่คำว่า "ที่นี่มีอะไร"
18. คลิกบริเวณตัวเลขพิกัด
19. คัดลอกพิกัด (ดับเบิลคลิกที่ตัวเลขแล้ว Ctrl+c)
20. ที่เวปไซต์ ThingSpeak คลิกที่ Channel Settings
21. วางพิกัดที่คัดลองมา
22. ผลที่ได้
23. ในกรณีที่ต้องการแชร์ข้อมูล (ผู้อื่นสามารถเห็นผลได้) ให้ทำการกำหนดสิทธิ์ที่ Sharing
24. การแชร์คลิกที่ Public View (คัดลอก URL เพื่อใช้ในการแชร์ได้)
25. การเชื่อมต่อ
ThingSpeak เป็นเวปไซต์ที่ให้บริการเก็บข้อมูลและแสดงผล ซึ่งสามารถนำมาใช้ในงาน iot ได้เพียงแต่มีข้อแม้ว่าข้อมูลในการส่งขึ้นไปบันทึกค่าแต่ละครั้งจะต้องไม่น้อยกว่า 15 วินาที (หากละเมิดอาจถูกแบนได้) งานครั้งนี้เป็นการแสดงค่าความชื้นและอุณภูมิบนหน้าเวปไซต์ ดังนั้นตัวบอร์ดต้องอ่านค่าจากตัวเซนเซอร์ให้ได้ก่อน ตัวเซนเซอร์ที่ใช้ในการทดลองนี้ใช้เบอร์ DHT11 ซึ่งขั้นตอนการเขียนโค้ดคำสั่งเพื่ออ่านค่าได้ทดลองผ่านมาแล้วในใบงานที่ 8 (DHT22 กับ DHT11 ใช้โค้ดตัวเดียวกันเพียงแต่แก้การกำหนดค่าเพียงคำสั่งเดียว) หากยังไม่ได้ติดตั้งไลบรารี่สำหรับเซนเซอร์ DHT ให้กลับไปศึกษาใน เขียนโปรแกรมอ่านค่าอุณหภูมิและความชื้นด้วย DHT22 เบื้องต้น สำหรับงานครั้งนี้มีขั้นตอนการดำเนินการทดลองเป็นดังนี้
[ขั้นตอนการดำเนินการ]
-ลงทะเบียนใช้งานเวปไซต์ ThingSpeak
-สร้างช่องใช้งาน
-นำค่า API Key มาเขียนโค้ดเพื่อส่งข้อมูลขึ้นเซิร์ฟเวอร์
ซึ่งรายละเอียดเป็นดังนี้
1. วงจรที่ใช้ทดลอง ทั้งที่เป็นบอร์ด NodeMCU และ WeMOS D1 mini
ส่วนจัดการเวปไซต์
2. เข้าเวปไซต์ https://thingspeak.com คลิกที่ Sign Up เพื่อลงทะเบียนใช้งาน
3. กรอกข้อมูลลงทะเบียนใช้งาน ใช้อีเมล์จริงเนื่องจากจะต้องมีการดำเนินการยืนยันการลงทะเบียน
4. ตัวอย่างการกรอกข้อมูลลงทะเบียน
5. เปิดอีเมล์ทำการคลิกที่ปุ่มเพื่อยืนยันการลงทะเบียน
6. หน้าเวปจะแสดงผลการลงทะเบียน
7. สำหรับเวอร์ชั่นปัจจุบัน (30/1/2018) ทางเวปไซต์ให้ผู้ใช้งานลงทะเบียน MathWorsk ด้วย (ดำเนินการให้เสร็จสิ้น)
8. คลิกยอมรับ
9. คลิกสร้างช่อง (Channel) ใช้งาน
10. ตั้งค่าช่อง (Channel Settings)
(1) ชื่อกราฟ
(2) คำอธิบาย
(3) ชื่อข้อมูลของกราฟในฟิลด์ที่ 1
(4) ชื่อข้อมูลของกราฟในฟิลด์ที่ 2
*ตัวอย่างนี้แสดงผลข้อมูล 2 ชุด ซึ่งใน 1 ช่องสามารถแสดงผลข้อมูลได้สูงสุด 8 ชุด
11. คลิกที่ API Keys ทำการคัดลอกคีย์เพื่อนำไปใช้ในโค้ดโปรแกรม
ส่วนจัดการโค้ดโปรแกรมควบคุมบอร์ด
12. แก้ค่าต่าง ๆ ของโค้ดโปรแกรมดังนี้
(1) รหัส apiKey ที่คัดลอกมาจากเวปไซต์
(2) ใส่ชื่อไวไฟที่บอร์ดควบคุมใช้เชื่อมต่อ
(3) ใส่พาสเวิร์ดไวไฟ (ในกรณีที่ไวไฟมีการใช้รหัสผ่าน แต่ถ้าไม่มีให้ใช้ "")
13 รายละเอียดของ api
14 จุดที่รวมเอาค่าตัวแปรอุณภูมิและความชื้นที่ใช้ส่งขึ้นเซิร์ฟเวอร์ สามารถเพิ่มข้อมูลได้โดยส่งได้สูงสุด 8 ฟิลด์ สำหรับตัวอย่างนี้เป็นการส่งข้อมูลจำนวน 2 ฟิลด์โดยฟิลด์แรกส่งค่าตัวแปร t และฟิลด์สองส่งค่าตัวแปร h
โค้ดโปรแกรม
โค๊ด: [Select]
#include <DHT.h>
#include <ESP8266WiFi.h>
String apiKey = "apiKey"; // thingspeak API key,
const char* ssid = "wifi name";
const char* password = "wifi password";
const char* server = "api.thingspeak.com";
#define DHTPIN D1
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
WiFiClient client;
void setup() {
Serial.begin(115200);
delay(10);
dht.begin();
WiFi.begin(ssid, password);
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
}
void loop() {
float h = dht.readHumidity();
float t = dht.readTemperature();
if (isnan(h) || isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return;
}
if (client.connect(server,80)) {
String url = "/update?api_key="+ apiKey ;
url += "&field1=" + (String)t;
url += "&field2=" + (String)h;
client.print(String("GET ") + url + " HTTP/1.1\r\n" +
"Host: " + server + "\r\n" +
"Connection: close\r\n\r\n");
Serial.print("Temp: ");
Serial.print(t);
Serial.print(" *C and Humidity: ");
Serial.print(h);
Serial.println("% ");
}
client.stop();
Serial.print("Waiting...");
delay(20000); // thingspeak needs minimum 15 sec delay between updates
}
15. คลิกที่ Private view
16. สังเกตผลที่ได้ จะมีข้อมูลค่อย ๆ ทะยอยเข้ามาทุก ๆ 20 วินาทีตามที่โค้ดโปรแกรมเขียนไว้
กรณีที่ต้องการชี้จุดที่วางบอร์ดเพื่อแสดงตำแหน่งของการวัด
17. เข้าเวปไซต์กูเกิลแมพ คลิกขวาที่ตำแหน่งที่ต้องการชี้จุด คลิกที่คำว่า "ที่นี่มีอะไร"
18. คลิกบริเวณตัวเลขพิกัด
19. คัดลอกพิกัด (ดับเบิลคลิกที่ตัวเลขแล้ว Ctrl+c)
20. ที่เวปไซต์ ThingSpeak คลิกที่ Channel Settings
21. วางพิกัดที่คัดลองมา
22. ผลที่ได้
23. ในกรณีที่ต้องการแชร์ข้อมูล (ผู้อื่นสามารถเห็นผลได้) ให้ทำการกำหนดสิทธิ์ที่ Sharing
24. การแชร์คลิกที่ Public View (คัดลอก URL เพื่อใช้ในการแชร์ได้)
25. การเชื่อมต่อ
ความคิดเห็น
แสดงความคิดเห็น