可視化界面開發(fā)Node-RED【03】——框架介紹及數(shù)據(jù)流部署

Node-RED框架介紹及數(shù)據(jù)流部署
Node-RED介紹與登入功能等基礎(chǔ)內(nèi)容在前面已經(jīng)介紹過了，今天我們就來(lái)學(xué)習(xí)開源可視化開發(fā)工具Node-RED具體框架介紹以及第一條數(shù)據(jù)流的部署。
1
界面框架介紹
數(shù)據(jù)流的編輯界面由四部分組成。最左邊是已定義的各種node的列表，我們稱之為控件區(qū)。中間是一個(gè)工作區(qū)，用戶可以拖放node到工作區(qū)來(lái)創(chuàng)建node的實(shí)例，Node-Red為每個(gè)node實(shí)例賦予了唯一的ID，通過雙擊node實(shí)例來(lái)編輯單個(gè)實(shí)例，通過連接node的in和out創(chuàng)建數(shù)據(jù)流，node實(shí)例會(huì)記錄out口連線的信息，每條線會(huì)記錄目標(biāo)node實(shí)例的信息最右邊是debug node的輸出區(qū)及node的幫助信息顯示區(qū)。右上角有“部署”按鈕，用來(lái)把編寫的程序保存到本地并執(zhí)行。
2
第一條數(shù)據(jù)流的部署
基本上所有與編程相關(guān)的教程總是喜歡從hello world開始，所以node-red第一條數(shù)據(jù)流的部署也從此開始。（1）拖拽輸入與輸出節(jié)點(diǎn)：
進(jìn)入Node-RED后將控件區(qū)內(nèi)的輸入節(jié)點(diǎn)“inject”與輸出節(jié)點(diǎn)“debug”，使用鼠標(biāo)左鍵拖入工作區(qū)內(nèi)。拖入以后發(fā)現(xiàn)“inject”變成了“時(shí)間戳”，“debug”變成了“msg.payload”，這是正?，F(xiàn)象。如果你的計(jì)算機(jī)或是樹莓派運(yùn)行在英文環(huán)境下，理所當(dāng)然，工作區(qū)內(nèi)的節(jié)點(diǎn)的名字會(huì)變成英文。
（2）更改節(jié)點(diǎn)配置：
雙擊時(shí)間戳節(jié)點(diǎn)，進(jìn)入節(jié)點(diǎn)配置界面

點(diǎn)擊內(nèi)容選項(xiàng)后的下拉菜單（小三角形），在菜單中選擇文字列，并在輸入框中輸入“hello world”。
可以看到此時(shí)“時(shí)間戳”節(jié)點(diǎn)名字顯示成“hello world”。

（3）連接輸入節(jié)點(diǎn)與輸出節(jié)點(diǎn)：在node-red中用“flow”來(lái)表示數(shù)據(jù)的流向，中文意思是“數(shù)據(jù)流”，即為數(shù)據(jù)從輸入節(jié)點(diǎn)流向輸出節(jié)點(diǎn)。使用鼠標(biāo)按住左鍵，從上圖接口1連接到接口2，即可完成輸入輸出的節(jié)點(diǎn)連接。用一條線連接輸入輸出節(jié)點(diǎn)，大概是最簡(jiǎn)單最直觀的構(gòu)建數(shù)據(jù)流的方式了。

（4）節(jié)點(diǎn)部署：
部署按鈕位于界面右上角，下拉菜單有如下幾項(xiàng)：

單擊部署后，顯示部署成功

（5）調(diào)試：時(shí)間戳節(jié)點(diǎn)左側(cè)有一個(gè)小按鈕，點(diǎn)擊按鈕可以手動(dòng)注入消息，注入的消息為輸入節(jié)點(diǎn)的文字列。在點(diǎn)擊時(shí)間戳節(jié)點(diǎn)的按鈕之前，必須確保debug節(jié)點(diǎn)是可用的，即按鈕必須是“伸出來(lái)”的，如藍(lán)框2，而不是像藍(lán)框3一樣“縮回去”，按鈕“縮回去”的debug節(jié)點(diǎn)不工作。點(diǎn)擊按鈕可以切換節(jié)點(diǎn)是否工作。

3
手動(dòng)編輯JSON格式輸出