ขั้นตอน การสร้างและใช้งาน node-red dashboard · 4....
TRANSCRIPT
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 1 จำก 22
ขนตอน
การสรางและใชงาน Node-Red Dashboard
เบองตน
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 2 จำก 22
ขนตอนการสรางและใชงาน Node-Red Dashboard เบองตน
1. Node-Red มแนวควำมคดในกำรท ำงำนแบบ Flow-based programming for the Internet of Things
เปนเครองมอทชวยนกพฒนำโปรแกรมใหเชอมตออปกรณ Hardwareเขำกบ APIs (Application
Programming Interface) โดยม User Interface ใหเขำใชงำนไดผำน Web Browser ซงขอมลแตละสวน
สำมำรถเชอมโยงเขำถงกนไดงำย
ตวอยำงภำพ Flow-based กำรน ำคำของอณหภมและคำควำมชนทวดไดจำกอปกรณ DHT22 Sensor มำ
เชอมตอผำน Dashboard และแสดงผลลพธผำนทำง Web Browser
127.0.0.1
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 3 จำก 22
2. กำรเลอกใชงำน Flow-based แตละรำยกำรสำมำรถคลกเลอกจำกเมนฝงดำนซำย แลวลำกมำวำงใชงำนบน
dashboard เพอใหเชอมตอกนไดเลย แลวก ำหนดคำกำรใชงำนของตวแปรใหแตละประเภท ตวอยำงเชน
สรำง input แบบ http เพอสรำงกำรแสดงผลแบบ web services โดยคลกทปม http แลวลำกมำวำง
แกไขกำรตงคำปม http ตำมภำพดำนลำง เลอก Method แบบ POST และสรำง URL ตำมตองกำร และคลกปม
Done เพอบนทกกำรตงคำ จะไดปมชอ [post]/s1
127.0.0.1
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 4 จำก 22
3. สรำง output แบบ debug เพอใชส ำหรบ monitor ขอมลตำง ๆ ของ flows โดยคลกทปม debug แลวลำก
มำวำงทำงดำนขวำมอ
แกไขกำรตงคำปม debug ตำมภำพดำนลำง ชอง Output เลอกเปน msg. และในชองกรอกขอมลใหพมพ
payload และคลกปม Done เพอบนทกกำรตงคำ จะไดปมชอ msg.payload
127.0.0.1
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 5 จำก 22
4. ล าดบถดมาใหสราง Layout ของ Dashboard เพอก าหนดการแสดงผลขอมลบนหนาเวบไซต โดยสรำง
ชอ Group ใหม เรมตนโดยกำรคลกทปมเมนทำงดำนขวำบน ขำงปม Deploy และคลก Configuration nodes
และคลกทปม Dashboard ตำมตวอยำงในภำพ
ภำพแสดงตวอยำง Tabs & Links ทหนำ Layout (ทไดมกำรตงคำไวแลว)
เปนตวอยางทมาจากการสราง dashboard แบบ
gauge และแบบ chart แลวเลอกใหอยใน
GroupTemp เมอสรางแลวกจะขนมาใหใน
Tabs & Links โดยอตโนมต
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 6 จำก 22
เรมสรำง Layout โดยคลกทแถบเมน Dashboard -> Layout และคลกทปม +tab จะปรำกฎชอ Tab 1
ขนมำใหม สำมำรถแกไขไดโดยคลกทปม edit
จะปรำกฎหนำตำงใหแกไขกำรตงคำ จำกตวอยำงในภำพ ทดลองแกไขชอง Name เปนชอ Temp หำกแกไขเสรจ
แลวใหคลกปม Update เพอบนทกกำรแกไข
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 7 จำก 22
ล ำดบถดมำทดลองเพมกลมเขำไปท Tab ชอ Temp โดยคลกปม +group และแกไข Group 1 ทเพมมำใหม
โดยคลกทปม edit
ทดลองแกไขในชอง Name เปนชอ GroupTemp เมอแกไขเสรจแลวใหคลกปม Update
เมอแกไขเสรจแลวจะได Tabs & Links ตำมตวอยำงภำพดำนลำง หำกแกไขในสวนตำง ๆ ของ Dashboard
เสรจแลว หรอภำยหลงกำรบนทกคำใน dashboard แตละครง ใหคลกทปม Deploy ดวย เพอใหโปรแกรม
กำรท ำงำนทงหมดใน dashboard ท ำกำร update ขอมลใหเปนปจจบน
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 8 จำก 22
5. สรำง dashboard แบบ text โดยลำกออกมำวำง
แกไขกำรตงคำปม text ตำมภำพดำนลำง โดยในชอง Group เลอก [Temp] GroupTemp ทสรำงไวกอนหนำ
น และชอง Label แกไขเปนชอ data (หรอตงชอตำมตองกำร) และคลกปม Done เพอบนทกกำรตงคำ จะได
ปมชอ data
127.0.0.1
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 9 จำก 22
6. สรำงปม json โดยคลกทแถบเมน Function -> json แลวลำกมำวำง
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 10 จำก 22
และแกไขกำรตงคำ โดยดบเบลคลกทปม json ทสรำงขนใหม ก ำหนดกำรตงคำในชอง Action เปนแบบ
Convert between JSON String & Object และ Property เปน msg.payload ตำมภำพดำนลำง
และคลกปม Done เพอบนทกกำรแกไข จะไดปมชอ json ดงภำพดำนลำง
127.0.0.1
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 11 จำก 22
7. สรำงปม temp โดยคลกทแถบเมน Function -> change แลวลำกมำวำง
และแกไขกำรตงคำ โดยดบเบลคลกทปม change ทสรำงขนใหม ในชอง Name ตงคำเปนชอ temp ในชอง
Rules ตงคำแบบ Set และเลอกแบบ msg. และพมพ payload และอกชองดำนลำงเลอก msg. และพมพ
payload[0].temp ซงชอ temp น เปนคำตวแปรทสรำงไวในไฟล .ino กอนหนำน จะตองก ำหนดใหตรงกน
ดวยเพอใหดงขอมลมำไดอยำงถกตอง เมอตงคำเสรจแลวใหคลกปม Done เพอบนทกกำรแกไข จะไดปมชอ
temp ดงภำพดำนลำง
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 12 จำก 22
8. สรำงปม humidity โดยคลกทแถบเมน Function -> change แลวลำกมำวำง
และแกไขกำรตงคำ โดยดบเบลคลกทปม change ทสรำงขนใหม ในชอง Name ตงคำเปนชอ humidity ใน
ชอง Rules ตงคำแบบ Set และเลอกแบบ msg. และพมพ payload และอกชองดำนลำงเลอก msg. และ
พมพ payload[0].hump ซงชอ hump น เปนคำตวแปรทสรำงไวในไฟล DHT22-HTTP-Post.ino ทใชกบ
อปกรณ DHT22 Sensor กอนหนำน จะตองก ำหนดใหตรงกนดวยเพอใหดงขอมลมำไดอยำงถกตอง เมอตงคำ
เสรจแลวใหคลกปม Done เพอบนทกกำรแกไข จะไดปมชอ humidity ดงภำพดำนลำง
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 13 จำก 22
9. สรำงปม Temperature โดยคลกทแถบเมน Dashboard -> gauge แลวลำกมำวำง
และแกไขกำรตงคำ โดยดบเบลคลกทปม gauge ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]
GroupTemp ชอง Type เลอกแบบ Gauge ชอง Label แลวแตเรำจะตงชอ ในทนขอตงชอเปน Temperature
ชอง Value format ตงคำเปน {{value}} ชอง Units ใสเปนตวอกษร C คอแทนสญญลกษณ องศำเซลเซยส
ชอง Range แลวแตเรำตงคำ ในทนตงคำ min ไว 0 และคำ max ตงไวท 50 เมอตงคำเสรจแลวใหคลกปม
Done เพอบนทกกำรแกไข จะไดปมชอ Temperature ดงภำพถดไป
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 14 จำก 22
10. สรำงปม Chart Temperature โดยคลกทแถบเมน Dashboard -> chart แลวลำกมำวำง
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 15 จำก 22
และแกไขกำรตงคำ โดยดบเบลคลกทปม chart ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]
GroupTemp ชอง Type เลอกตำมตองกำร ในตวอยำงนจะเลอกแบบ Line chart ชอง Label แลวแตเรำจะตง
ชอ ในทนขอตงชอเปน Chart Temperature จดอนยงไมไดตงคำใด ๆ เพมเตม เมอตงคำเสรจแลวใหคลกปม
Done เพอบนทกกำรแกไข จะไดปมชอ Chart Temperature ดงภำพถดไป
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 16 จำก 22
11. สรำงปม Humidity โดยคลกทแถบเมน Dashboard -> gauge แลวลำกมำวำง
และแกไขกำรตงคำ โดยดบเบลคลกทปม gauge ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]
GroupTemp ชอง Type เลอกแบบ Gauge ชอง Label แลวแตเรำจะตงชอ ในทนขอตงชอเปน Humidity
ชอง Value format ตงคำเปน {{value}} ชอง Units ใสเปนขอควำม Unit ชอง Range แลวแตเรำตงคำ ใน
ทนตงคำ min ไว 0 และคำ max ตงไวท 100 เมอตงคำเสรจแลวใหคลกปม Done เพอบนทกกำรแกไข
จะไดปมชอ Humidity ดงภำพถดไป
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 17 จำก 22
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 18 จำก 22
12. สรำงปม Chart Humidity โดยคลกทแถบเมน Dashboard -> chart แลวลำกมำวำง
และแกไขกำรตงคำ โดยดบเบลคลกทปม chart ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]
GroupTemp ชอง Type เลอกตำมตองกำร ในตวอยำงนจะเลอกแบบ Line chart ชอง Label แลวแตเรำจะตง
ชอ ในทนขอตงชอเปน Chart Humidity จดอนยงไมไดตงคำใด ๆ เพมเตม เมอตงคำเสรจแลวใหคลกปม
Done เพอบนทกกำรแกไข จะไดปมชอ Chart Humidity ดงภำพถดไป
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 19 จำก 22
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 20 จำก 22
13. เมอสรำงตำมตวอยำงไปกอนหนำนทงหมดแลว ใหคลกปม Deploy อกครง เพอบนทกกำรเปลยนแปลงกำร
ตงคำทงหมด และจะได Flow-based ของกำรดงคำขอมลของอณหภมและคำควำมชนจำกอปกรณ
DHT22 Sensor ตำมแผนภำพดำนลำงน
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 21 จำก 22
14. เมอสรำงตำมตวอยำงไปกอนหนำนทงหมดแลว จะได Flow-based ของกำรดงคำขอมลของอณหภมและคำ
ควำมชนจำกอปกรณ DHT 22 Sensor ดงตวอยำงในภำพดำนลำง ซงสำมำรถดผลกำรแสดงขอมลไดโดย
เปด browser และพมพไปท url http://127.0.0.1/ui ( หมายเหต ในกำรเปดใชงำนเรยก web browser ตองตรวจสอบวำ ค ำสง node-red ทท ำเปน web server
run อยหรอไม เพรำะถำไมได run อย กจะไมสำมำรถเปดหนำเวบนได )
127.0.0.1
การแสดงผลขอมลแบบ Gauge
คาของอณหภม ทวดไดเปนแบบ
Real Time
การแสดงผลขอมลแบบ Gauge
คาของความชน ทวดไดเปนแบบ
Real Time การแสดงผลขอมลแบบ Line Chart
คาของอณหภม
ทวดไดเปนแบบ Real Time
จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล
หนำ 22 จำก 22
หมายเหต ตวอยำงกำรแสดงผลขอมลทพบปญหำแบบดำนลำง อำจมสำเหตมำจำก 2 ลกษณะ โดยพนฐำนคอ
- เรยกใชงำนโดยไมมกำรเชอมตออปกรณ DHT22 Sensor
- มกำรเชอมตออปกรณ DHT22 Sensor ไวแลว แตกำรเชอมตอของสำยแพไมแนน หรอเสยบสำยไวหลวม