用樹莓派Node-RED快速開發觸控螢幕的圖形控制介面
2023/08/01 ｜By G小編
隨著自動化控制與物聯網技術的蓬勃發展，人機介面系統（HMI）的設計也愈來愈偏向直觀好用的觸控式圖形控制介面。相較於傳統型態的按鈕、旋鈕、拉桿等控制元件，使用觸控螢幕來操縱/監控機器生產過程更具備下列優點：
- 易於使用：圖形介面直觀易於理解，有助於新人快速上手
- 便於更新：以軟體為基礎的GUI 可以隨時新增控制項，有利於隨時依據產線需求修正操控功能
- 安全性更強：傳統型的人機介面利用鑰匙來做操控動作的管制，而觸控的圖形控制介面可以利用軟體做警語提醒、二次輸入確認以及密碼解鎖動作等管制，對於機器操作的安全管制更強。
雖然觸控人機介面設計是一項專業課題，但使用樹莓派與自由軟體Node-RED來設計觸控圖形介面卻簡單易學，不需要太多程式設計能力，一般人也可以在家快速創建一個小型的觸控人機介面。現在就跟著我們一起來做智慧家庭的觸控HMI吧!
1. 安裝Node-RED
Node-RED是IBM基於Node.js所開發的視覺化程式設計軟體，利用拖拉圖標的方式，就可以建立流程編碼，大大減少開發者撰寫程式的負擔，由於軟體免費而且上手快速，目前廣泛應用於物聯網的應用程式開發。
樹莓派作業系統Raspberry Pi OS 32bits已經內建有Node-RED應用程式，打開樹莓派選單，在Programming中，即可以找到Node-RED。
若是在樹莓派使用其它版本的作業系統，則可以打開Terminal，輸入下列指令，手動安裝Node-RED（Node-RED 安裝說明）
bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)
⏺ 開啟Node-RED
① 點擊Node-Red圖標，啟動Node-RED
② 開啟Chromium ⇨ 在網址列輸入 本機IP:1880，在此的本機IP為 192.168.101.251:1880 (Node-RED的預設連接埠為1880)
🎁 備註：如何查詢樹莓派本機IP
打開Terminal ⇨ 輸入 hostname -I
2. 增加Node-RED 節點
安裝好的Node-RED只包含一些基本節點，若是希望開發控制連接樹莓派GPIO腳位裝置的流程，則需要載入更多的節點。
⏺ 安裝儀表板顯示所需的節點：點擊右上角的選單，選擇 [manage palette] ⇨點選 [install] ⇨ 輸入”dashboard＂搜尋 ⇨ 選擇安裝 [node-red-dashboard]
⏺ 安裝樹莓派gpio腳位的相關節點：輸入”gpio”搜尋 ⇨選擇安裝 [node-red-node-pi-gpio]（註：樹莓派專用版Node-RED已內附此套節點）
⏺ 安裝DHT感測器的節點：輸入”dht” 搜尋 ⇨ 選擇安裝 [node-red-contrib-dht-sensor] (註:本範例使用DHT-11感測器)
⏺ 安裝儀表板的LED節點：輸入”ui-led” 搜尋 ⇨ 選擇安裝 [ node-rede-contrib-ui-led]
⏺ 安裝timer節點：輸入”timer” 搜尋 ⇨ 選擇安裝 [node-red-contrib-timer]
🎁 備註：在Node-Red網站可以找尋更多有用的節點與流程範本 https://flows.nodered.org/search?type=node
3. 控制GPIO裝置 on/off
我們可以在Node-RED設計儀表板的開關按鈕，用來開啟或關閉連接在樹莓派GPIO腳位上的LED燈。
⏺ 硬體安裝
將紅色LED燈連接至樹莓派的GPIO15腳位與GND腳位
⏺ 軟體設定
依下列步驟，在Node-RED設計一個控制LED燈開關的流程：
① 在左側欄dashboard內，尋找 button 節點並拖拉至中間的flow1頁面
② 點擊button 二下開啟設定視窗，新增一個顯示面板群組、輸入所欲顯示的按鍵名，以及點擊時送出number=1
③ 拖拉一個rpi-gpio out 節點至頁面，並指定其BCM GPIO腳位、勾選腳位的預設值為0。
④ 參考步驟①新增一個LED OFF的button，連接至PIN 10;另外由dashboard中拖拉LED節點至頁面並聯結至兩個button節點。設定LED 節點：收到number=1 時顯示紅色、收到number=0時 顯示灰色。
⑤ 設計儀表板的版面：開啟右上角的選單，點選Dashboard 選單，在dashboard設定選單中，點選［layout］按鈕即可開啟儀表格的圖形設計頁面。
在右上角Width 設定儀表板的寬度，同時拖拉/縮放各節點至所需要的位置。(註：節點size若為預設的auto則無法拖拉縮放，須先設定一個尺寸)
⑥ 儀表格設計完成後，點選右上角的［Deploy］按鈕採用。點選dashboard按鈕前往儀表板的前台頁面，即可看到控制LED開關的按鈕。在觸控螢幕上點擊LED ON 、LED OFF來開啟/關閉紅色LED燈。
4. 讀取並顯示GPIO 感測器資料
Node-RED能讀取GPIO上的感測器，並將資料顯示為儀表或圖表。以樹莓派常用的温濕度計 DHT-11為例，設計一個觀測/記錄房間温濕度的儀表板。
⏺ 硬體安裝
將DHT-11的電源腳VCC接到樹莓派3.3V腳位
將DHT-11的接地腳GND接到樹莓派GND腳位
將DHT-11的訊號腳SIG接到樹莓派GPIO 04腳位
⏺ 軟體設定
設計讀取並顯示感測器的新流程，新增並連結這些節點
① 由common 新增一個［inject］節點，設定為每3秒間隔的timestamp
② 由Raspberry Pi類別中，拖拉一個rpi-dht22 節點，設定訊號腳位為GPIO 04
③ 設定資料函數：温度留白、濕度須設定為msg.payload=msg.humidity
④ 設定儀錶外觀：儀錶名稱、顯示數值範圍與單位、顯示顏色變化。
⑤ 設定顯示圖表：設定XY軸的顯示格式。
⑥ 按[layout]，調整儀表板版面。
⑦ 點選［Deploy］後，至儀表板查看DHT-11温濕度與趨勢圖。
5. 設定GPIO 的定時開關
利用timer節點可建立一個定時器，點選儀表板的按鈕啟動定時器來開啟GPIO裝置，並在定時器時間結束時自動關閉。
⏺ 硬體安裝
將藍色LED燈連接到樹莓派GND腳位與GPIO24腳位
⏺ 軟體設定
建立一個流程如右圖：
① 新增一個點擊產生true的按鈕
② 設定60秒的定時器，送出1 或 0
③ 設定GPIO裝置的連接腳位並設預設值為0
④ 設定LED顯示燈號
⑤ 用gauge節點做定時器的倒數讀秒
⑥ 點選［layout］設計儀表板版面後，點選［Deploy］採用
⑦ 在儀表板點擊按鈕，打開藍色LED並計時、60秒後關閉
6. 用滑桿控制LED亮度
Dashboard的slider節點為滑桿控制項，可以用來做為控制GPIO電流量的輸入項；簡單設計一個滑桿，來操控LED燈的亮暗。
⏺ 硬體安裝
將綠色LED燈連接到樹莓派GND腳位與GPIO12腳位
⏺ 軟體設定
建立一個流程如右圖：
① 新增一個timestamp節點，設定送出起啟值為0
②新增slider節點，設定名稱與0~255的範圍
③ 設定gpio out 節點為GPIO12，選擇類型為PWM output
④ 設定gauge 節點的顯示方式如下
⑤ 將這些節點指定為新group ，點擊［layout］設定版面
⑥ 點擊［Deploy］後，在儀表板以滑桿調整綠色LED的亮度
7. 總結
Norde-RED流程開發完成後，記得在Terminal中輸入下列命令，設定樹莓派開機自動執行Node-RED。
sudo systemctl enable nodered.service
開機後只須開啟瀏覽器，點擊Node-RED dashboard 網站，便能立即查看感測資料、控制裝置開關。
利用Node-RED開發觸控圖形控制介面簡單又有趣，趕快試試讓觸控操作的專業儀表板為你的創客專題大大加分！
