項(xiàng)目4任務(wù)2-Web展示網(wǎng)關(guān)上報(bào)的溫濕度

2相關(guān)知識(shí)34任務(wù)小結(jié)與練習(xí)1任務(wù)實(shí)施任務(wù)引入與目標(biāo)Web展示網(wǎng)關(guān)上報(bào)的溫濕度一、任務(wù)引入與目標(biāo)任務(wù)目標(biāo)任務(wù)2通過Node-RED流程設(shè)計(jì),接收網(wǎng)關(guān)上報(bào)的MQTT消息,將消息中溫濕度字段的值解析后,通過Web頁面展示出來。解析展示的過程,與APP中的設(shè)計(jì)很像,都需要掌握J(rèn)SON解析的知識(shí)。注意,在任務(wù)2中,Node-RED創(chuàng)建了MQTT客戶端,與網(wǎng)關(guān)、APP中創(chuàng)建的MQTT客戶端的地位是相等的。網(wǎng)關(guān)用項(xiàng)目3中的程序,將周期上報(bào)間隔改為1分鐘,其他內(nèi)容不變,包括消息的主題和消息的載荷。任務(wù)引入項(xiàng)目3將網(wǎng)關(guān)上報(bào)的MQTT消息經(jīng)過解析,在APP上展示了溫濕度的值。有了Node-RED工具之后,我們也可以將硬件檢測(cè)的溫濕度值在Web上展示出來,這樣數(shù)據(jù)可視化的形式就更加豐富了。二、相關(guān)知識(shí)dashboard節(jié)點(diǎn)Node-RED中常用的圖形化節(jié)點(diǎn)叫做dashboard,它主要用于快速創(chuàng)建實(shí)時(shí)數(shù)據(jù)儀表板。在安裝節(jié)點(diǎn)的輸入框內(nèi)輸入“dashboard”,找到名為“node-red-dashborad”的控件并點(diǎn)擊安裝即可。Web頁面布局總體來看,通過dashboard設(shè)計(jì)的Web頁面布局分為三級(jí),分別是:tab、group、spacer。儀表板的布局依賴于tab和group屬性,tab可以理解為頁面,group是分組,spacer即控件。一個(gè)頁面里可以有多個(gè)分組,建議使用多個(gè)分組,而不是一個(gè)大組,因?yàn)閐ashboard可以根據(jù)頁面的大小動(dòng)態(tài)調(diào)整分組的位置。三、任務(wù)實(shí)施實(shí)施設(shè)備部署了Node-RED和Arduino開發(fā)環(huán)境的計(jì)算機(jī)。網(wǎng)關(guān)和溫濕度傳感器各一個(gè)。實(shí)施過程1.Node-RED接收MQTT消息為了完成本任務(wù)中溫濕度顯示的功能,需要在Node-RED中創(chuàng)建MQTT客戶端,接收MQTT消息,設(shè)計(jì)流程如圖4-12所示。圖4-12打印溫濕度值流程三、任務(wù)實(shí)施流程中的2個(gè)節(jié)點(diǎn),分別是mqttin(用于mqtt請(qǐng)求)和debug(用于打印調(diào)試信息)。對(duì)于mqttin節(jié)點(diǎn),設(shè)置主題為網(wǎng)關(guān)上報(bào)的消息,如圖4-13所示。接下來在mqttin節(jié)點(diǎn)中設(shè)置要連接的MQTT服務(wù)器,如圖4-14所示。圖4-13編輯mqttin節(jié)點(diǎn)圖4-14編輯MQTT節(jié)點(diǎn)的服務(wù)器三、任務(wù)實(shí)施然后設(shè)置debug節(jié)點(diǎn),輸出調(diào)試信息,如圖4-15所示。網(wǎng)關(guān)連接溫濕度傳感器,運(yùn)行,使用的程序以及硬件連接與項(xiàng)目3保持一致,這里不再介紹。部署Node-RED流程,打開debug窗口,查看結(jié)果,如圖4-16所示。圖4-15編輯debug節(jié)點(diǎn)圖4-16打印調(diào)試結(jié)果三、任務(wù)實(shí)施2.Web頁面通過gauge展示溫度我們既可以用文本顯示消息載荷,也可以用圖表顯示網(wǎng)關(guān)上報(bào)的溫度值。將前面的節(jié)點(diǎn)設(shè)為無效,MQTT節(jié)點(diǎn)復(fù)制后還要再用。增加一個(gè)“switch”和“gauge”節(jié)點(diǎn)?！皊witch”判斷溫度解析值非空,即判斷MQTT消息中是否有“temperature”字段,如圖417所示?！癵auge”放在“健康監(jiān)測(cè)中心”頁面(對(duì)應(yīng)Web的一個(gè)菜單)的一個(gè)“溫度”組中。顯示的內(nèi)容是{{msg.payload.temperature}},即提取消息載荷的temperature字段的值,如圖4-18所示。圖4-17編輯switch節(jié)點(diǎn)圖4-18編輯gauge節(jié)點(diǎn)三、任務(wù)實(shí)施結(jié)果如圖4-19所示。網(wǎng)址是:1880/ui,用的是本機(jī)IP;如果Node-RED應(yīng)用服務(wù)器部署在公網(wǎng),可通過公網(wǎng)IP訪問;如果部署在局域網(wǎng),同一局域網(wǎng)里的計(jì)算機(jī)可以通過局域網(wǎng)IP訪問。可以發(fā)現(xiàn)采用了二次解析過程,第一次判斷非空,第二次再解析展示,與之前APP和網(wǎng)關(guān)對(duì)MQTT消息解析過程相同。二次解析過程可以避免以下情況:如果上報(bào)的是濕度消息,解析為空,展示錯(cuò)誤圖4-19gauge展示環(huán)境溫度三、任務(wù)實(shí)施3.Web頁面通過折線圖展示溫度“健康監(jiān)測(cè)中心”頁面新增group,名稱為“溫度曲線”。流程中需要增加一個(gè)change和chart節(jié)點(diǎn),如圖4-20所示。設(shè)置change節(jié)點(diǎn)的載荷(即輸出到chart節(jié)點(diǎn)的載荷),為輸入此節(jié)點(diǎn)的載荷的temperature的值,如圖4-21所示。圖4-20流程中增加溫度曲線圖4-21編輯change節(jié)點(diǎn)三、任務(wù)實(shí)施在chart節(jié)點(diǎn)中,設(shè)置顯示10分鐘的值。折線圖中的標(biāo)簽為“十分鐘溫度變化”。范圍、顏色等根據(jù)喜好確定即可,如圖4-22所示。部署Node-RED流程,然后查看結(jié)果,如圖4-23所示。圖4-22編輯chart節(jié)點(diǎn)圖4-23gauge和chart顯示溫度三、任務(wù)實(shí)施關(guān)于UI布局,可以在tab的layout里進(jìn)行設(shè)計(jì),如圖4-24所示?？梢栽O(shè)置寬度、高度及部件的相對(duì)位置,如圖4-25所示。圖4-24流程的UI布局圖4-26溫度監(jiān)控界面完成后重新部署,結(jié)果如圖4-26所示。圖4-25設(shè)置UI屬性三、任務(wù)實(shí)施4.Web頁面通過gauge、折線圖展示溫度、濕度參照溫度顯示,分別以儀表盤和折線圖的形式顯示網(wǎng)關(guān)上報(bào)的濕度值。流程如圖4-27所示,不再詳細(xì)分析。調(diào)整布局,運(yùn)行一段時(shí)間之后的結(jié)果如圖4-28所示。圖4-27流程中增加濕度監(jiān)控圖4-28溫濕度監(jiān)測(cè)情況四、任務(wù)小結(jié)與練習(xí)任務(wù)小結(jié)任務(wù)2在Node-RED中設(shè)計(jì)流程,分別實(shí)現(xiàn)了Node-RED接收MQTT消息