ขั้นตอน การสร้างและใช้งาน Node-Red Dashboard · 4. ล าดับถัดมาให้สร้าง Layout ของ Dashboard

จดท ำโดย นำยกฤษฎำ แกวผดผอง วนทจดท ำเอกสำร 5 ก.ค. 2562 งำนเทคโนโลยสำรสนเทศ หอสมดและคลงควำมรมหำวทยำลยมหดล

หนำ 1 จำก 22

ขนตอน

การสรางและใชงาน Node-Red Dashboard

เบองตน



ขนตอนการสรางและใชงาน 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



2. กำรเลอกใชงำน Flow-based แตละรำยกำรสำมำรถคลกเลอกจำกเมนฝงดำนซำย แลวลำกมำวำงใชงำนบน

dashboard เพอใหเชอมตอกนไดเลย แลวก ำหนดคำกำรใชงำนของตวแปรใหแตละประเภท ตวอยำงเชน

สรำง input แบบ http เพอสรำงกำรแสดงผลแบบ web services โดยคลกทปม http แลวลำกมำวำง

แกไขกำรตงคำปม http ตำมภำพดำนลำง เลอก Method แบบ POST และสรำง URL ตำมตองกำร และคลกปม

Done เพอบนทกกำรตงคำ จะไดปมชอ [post]/s1

127.0.0.1



3. สรำง output แบบ debug เพอใชส ำหรบ monitor ขอมลตำง ๆ ของ flows โดยคลกทปม debug แลวลำก

มำวำงทำงดำนขวำมอ

แกไขกำรตงคำปม debug ตำมภำพดำนลำง ชอง Output เลอกเปน msg. และในชองกรอกขอมลใหพมพ

payload และคลกปม Done เพอบนทกกำรตงคำ จะไดปมชอ msg.payload

127.0.0.1



4. ล าดบถดมาใหสราง Layout ของ Dashboard เพอก าหนดการแสดงผลขอมลบนหนาเวบไซต โดยสรำง

ชอ Group ใหม เรมตนโดยกำรคลกทปมเมนทำงดำนขวำบน ขำงปม Deploy และคลก Configuration nodes

และคลกทปม Dashboard ตำมตวอยำงในภำพ

ภำพแสดงตวอยำง Tabs & Links ทหนำ Layout (ทไดมกำรตงคำไวแลว)

เปนตวอยางทมาจากการสราง dashboard แบบ

gauge และแบบ chart แลวเลอกใหอยใน

GroupTemp เมอสรางแลวกจะขนมาใหใน

Tabs & Links โดยอตโนมต



เรมสรำง Layout โดยคลกทแถบเมน Dashboard -> Layout และคลกทปม +tab จะปรำกฎชอ Tab 1

ขนมำใหม สำมำรถแกไขไดโดยคลกทปม edit

จะปรำกฎหนำตำงใหแกไขกำรตงคำ จำกตวอยำงในภำพ ทดลองแกไขชอง Name เปนชอ Temp หำกแกไขเสรจ

แลวใหคลกปม Update เพอบนทกกำรแกไข



ล ำดบถดมำทดลองเพมกลมเขำไปท Tab ชอ Temp โดยคลกปม +group และแกไข Group 1 ทเพมมำใหม

โดยคลกทปม edit

ทดลองแกไขในชอง Name เปนชอ GroupTemp เมอแกไขเสรจแลวใหคลกปม Update

เมอแกไขเสรจแลวจะได Tabs & Links ตำมตวอยำงภำพดำนลำง หำกแกไขในสวนตำง ๆ ของ Dashboard

เสรจแลว หรอภำยหลงกำรบนทกคำใน dashboard แตละครง ใหคลกทปม Deploy ดวย เพอใหโปรแกรม

กำรท ำงำนทงหมดใน dashboard ท ำกำร update ขอมลใหเปนปจจบน



5. สรำง dashboard แบบ text โดยลำกออกมำวำง

แกไขกำรตงคำปม text ตำมภำพดำนลำง โดยในชอง Group เลอก [Temp] GroupTemp ทสรำงไวกอนหนำ

น และชอง Label แกไขเปนชอ data (หรอตงชอตำมตองกำร) และคลกปม Done เพอบนทกกำรตงคำ จะได

ปมชอ data

127.0.0.1



6. สรำงปม json โดยคลกทแถบเมน Function -> json แลวลำกมำวำง



และแกไขกำรตงคำ โดยดบเบลคลกทปม json ทสรำงขนใหม ก ำหนดกำรตงคำในชอง Action เปนแบบ

Convert between JSON String & Object และ Property เปน msg.payload ตำมภำพดำนลำง

และคลกปม Done เพอบนทกกำรแกไข จะไดปมชอ json ดงภำพดำนลำง

127.0.0.1



7. สรำงปม temp โดยคลกทแถบเมน Function -> change แลวลำกมำวำง

และแกไขกำรตงคำ โดยดบเบลคลกทปม change ทสรำงขนใหม ในชอง Name ตงคำเปนชอ temp ในชอง

Rules ตงคำแบบ Set และเลอกแบบ msg. และพมพ payload และอกชองดำนลำงเลอก msg. และพมพ

payload[0].temp ซงชอ temp น เปนคำตวแปรทสรำงไวในไฟล .ino กอนหนำน จะตองก ำหนดใหตรงกน

ดวยเพอใหดงขอมลมำไดอยำงถกตอง เมอตงคำเสรจแลวใหคลกปม Done เพอบนทกกำรแกไข จะไดปมชอ

temp ดงภำพดำนลำง



8. สรำงปม humidity โดยคลกทแถบเมน Function -> change แลวลำกมำวำง

และแกไขกำรตงคำ โดยดบเบลคลกทปม change ทสรำงขนใหม ในชอง Name ตงคำเปนชอ humidity ใน

ชอง Rules ตงคำแบบ Set และเลอกแบบ msg. และพมพ payload และอกชองดำนลำงเลอก msg. และ

พมพ payload[0].hump ซงชอ hump น เปนคำตวแปรทสรำงไวในไฟล DHT22-HTTP-Post.ino ทใชกบ

อปกรณ DHT22 Sensor กอนหนำน จะตองก ำหนดใหตรงกนดวยเพอใหดงขอมลมำไดอยำงถกตอง เมอตงคำ

เสรจแลวใหคลกปม Done เพอบนทกกำรแกไข จะไดปมชอ humidity ดงภำพดำนลำง



9. สรำงปม Temperature โดยคลกทแถบเมน Dashboard -> gauge แลวลำกมำวำง

และแกไขกำรตงคำ โดยดบเบลคลกทปม gauge ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]

GroupTemp ชอง Type เลอกแบบ Gauge ชอง Label แลวแตเรำจะตงชอ ในทนขอตงชอเปน Temperature

ชอง Value format ตงคำเปน {{value}} ชอง Units ใสเปนตวอกษร C คอแทนสญญลกษณ องศำเซลเซยส

ชอง Range แลวแตเรำตงคำ ในทนตงคำ min ไว 0 และคำ max ตงไวท 50 เมอตงคำเสรจแลวใหคลกปม

Done เพอบนทกกำรแกไข จะไดปมชอ Temperature ดงภำพถดไป



10. สรำงปม Chart Temperature โดยคลกทแถบเมน Dashboard -> chart แลวลำกมำวำง



และแกไขกำรตงคำ โดยดบเบลคลกทปม chart ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]

GroupTemp ชอง Type เลอกตำมตองกำร ในตวอยำงนจะเลอกแบบ Line chart ชอง Label แลวแตเรำจะตง

ชอ ในทนขอตงชอเปน Chart Temperature จดอนยงไมไดตงคำใด ๆ เพมเตม เมอตงคำเสรจแลวใหคลกปม

Done เพอบนทกกำรแกไข จะไดปมชอ Chart Temperature ดงภำพถดไป



11. สรำงปม Humidity โดยคลกทแถบเมน Dashboard -> gauge แลวลำกมำวำง

และแกไขกำรตงคำ โดยดบเบลคลกทปม gauge ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]

GroupTemp ชอง Type เลอกแบบ Gauge ชอง Label แลวแตเรำจะตงชอ ในทนขอตงชอเปน Humidity

ชอง Value format ตงคำเปน {{value}} ชอง Units ใสเปนขอควำม Unit ชอง Range แลวแตเรำตงคำ ใน

ทนตงคำ min ไว 0 และคำ max ตงไวท 100 เมอตงคำเสรจแลวใหคลกปม Done เพอบนทกกำรแกไข

จะไดปมชอ Humidity ดงภำพถดไป





12. สรำงปม Chart Humidity โดยคลกทแถบเมน Dashboard -> chart แลวลำกมำวำง

และแกไขกำรตงคำ โดยดบเบลคลกทปม chart ทสรำงขนใหม ในชอง Group คลกเลอก [Temp]

GroupTemp ชอง Type เลอกตำมตองกำร ในตวอยำงนจะเลอกแบบ Line chart ชอง Label แลวแตเรำจะตง

ชอ ในทนขอตงชอเปน Chart Humidity จดอนยงไมไดตงคำใด ๆ เพมเตม เมอตงคำเสรจแลวใหคลกปม

Done เพอบนทกกำรแกไข จะไดปมชอ Chart Humidity ดงภำพถดไป





13. เมอสรำงตำมตวอยำงไปกอนหนำนทงหมดแลว ใหคลกปม Deploy อกครง เพอบนทกกำรเปลยนแปลงกำร

ตงคำทงหมด และจะได Flow-based ของกำรดงคำขอมลของอณหภมและคำควำมชนจำกอปกรณ

DHT22 Sensor ตำมแผนภำพดำนลำงน



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



หมายเหต ตวอยำงกำรแสดงผลขอมลทพบปญหำแบบดำนลำง อำจมสำเหตมำจำก 2 ลกษณะ โดยพนฐำนคอ

- เรยกใชงำนโดยไมมกำรเชอมตออปกรณ DHT22 Sensor

- มกำรเชอมตออปกรณ DHT22 Sensor ไวแลว แตกำรเชอมตอของสำยแพไมแนน หรอเสยบสำยไวหลวม

Documents

ขั้นตอน การสร้างและใช้งาน Node-Red Dashboard · 4. ล าดับถัดมาให้สร้าง Layout ของ Dashboard