大家好，去年，一位客戶在其工業設施的出入口安裝了安全路樁，并要求我設計一個電子系統，以便通過控制塔經由 TCP/IP 控制這些路樁。

本教程描述了我所遵循的過程，從初步構思、制作原型，到最終交付給客戶的版本。

為工業用途設計設備需要精心準備，并且必須使用經批準用于工業用途的材料和組件進行構建。

在本教程中，我將重點介紹使原型與具有商業或工業質量的產品之間產生差異的關鍵點。

雖然從技術角度來看，問題的解決方案簡化為控制一對繼電器，而且我們在市場上可以找到無數現成的此類產品。但制作定制產品和滿足客戶需求是一個稍微復雜的過程。

對我來說，區分原型和商業版本質量的關鍵在于圖形用戶界面（GUI）的設計，這也是本教程中將詳細介紹的部分。

這里展示的想法可以修改并適應任何可以通過繼電器控制的機電設備：水泵、車庫門、百葉窗、電動門等。

如果您有改進建議，請告訴我。

讓我們開始吧。

第一步：背景

“路樁是一種短柱，用于創建防護或建筑圍欄。當主要作為視覺引導安裝時，路樁可以引導交通并標記邊界。它們有各種各樣的形狀和風格，以突出或在其環境中視覺上脫穎而出。路樁也可以設計成物理上阻止車輛入侵，保護人員和財產。這些安全路樁可能具有裝飾元素，或被選擇以與景觀相協調，但其主要考慮因素是抗沖擊力。路樁可以由幾乎任何材料制成，具體取決于其所需功能，但最常見的路樁材料是金屬、石頭、水泥或塑料?！?/span>

“自動路樁”

“這種類型的路樁也稱為上升式或伸縮式路樁。這些是可伸縮的安全島護柱，它們可以升出地面以阻擋交通，或者收回地面以讓交通通過。大多數能在幾秒鐘內伸展到最大高度，是管理交通和保護行人安全的一種有效、靈活的方式。自動系船柱可由氣動、液壓或電動控制。這種選擇通常取決于特定地點的應用和用途。這些護柱由碳鋼或不銹鋼制成，通常有多種不同的表面。自動路樁永久安裝在地下，需要定期維護。自動安全島路樁的主要用途自動安全島路樁非常適合交通流量不斷變化的情況，入口和出口可能會隨時發生變化。自動路樁的實際應用的一個例子可能是停車庫或停車場。它們也非常適合用在博物館、動物園或其他公共設施的入口處，這些地方在特定時間后禁止進入。”

第二步：客戶訪談

在研究了所有關于路樁的信息后，我要求與客戶進行第一次訪談，以收集能讓我了解客戶需求的信息。

在與客戶會面前，準備一份簡要的技術規格書，說明項目構想，以便客戶對他將要接收的產品有一個大致的了解。

接下來，向客戶詢問以下信息：

路樁的品牌和型號

路樁安裝手冊的副本

要安裝的路樁數量

路樁的安裝位置

如何以及由誰控制設施的出入口

設施和設備的標識或名稱

所需控制系統的要求

系統交付時間

第三步：分析客戶信息 - （內容）

客戶向我提供了要安裝的路樁的品牌和型號及其手冊。

客戶型號是帶有液壓驅動的 Access PRO Bollard XB220H06K。該路樁有一個控制箱，用于處理液壓泵和一個執行上下移動的活塞?；钊袃蓚€限位開關，一個位于完全縮回位置，另一個位于完全伸出位置，用于向控制系統指示其位置。它還有兩個連接口，用于放置手動操作鍵盤。閱讀手冊后，確定了手動鍵盤的連接點，以及縮回位置的限位開關。

第四步：分析客戶信息 - （位置）

客戶場所的兩個出入口控制區將安裝 7 個路樁。主出入口控制區（ACCESS AREA “A”）由三條車輛通行路線組成：一條入口路線和一條出口路線，每條路線各有三個出入口車道。該區域將安裝 4 個路樁：入口區 2 個，出口區 2 個。

第二個出入口控制區（ACCESS AREA “B”）由三條單車道通行路線組成：一條入口、一條出口和一條雙向路線。該區域將安裝 3 個路樁。

出入口控制亭之間的距離為一公里。

根據這些數據，為每個路樁分配了一個 ID。該標識由客戶制定：

ACCESS AREA "A"

入口區:

路樁1 ID: CAS01-B01-EA

路樁2 ID: CAS01-B02-ET

出口區:

路樁3 ID: CAS01-B03-ST

路樁4 ID: CAS01-B04-SA

ACCESS AREA “B”

入口區:

路樁5 ID: CAS02-B01-SA

出口區:

路樁6 ID: CAS02-B02-ST

雙向區:

路樁7 ID: CAS02-B03-E/S-AT

第五步：分析客戶信息 - 具體要求

客戶需要一個通過以太網通信網絡使用 TCP/IP 通信協議操作路樁的控制系統。該控制系統必須有一個手動鍵盤，以便在控制系統或通信網絡出現故障時能夠本地操作系統。圖形用戶界面（GUI）必須友好且易于使用，并且必須能夠監控每個路樁的狀態，以及指示溫度、可用內存和所提供控制系統的狀態。

控制系統必須有一個觸摸屏，以便能夠本地操作系統。

設備將放置在出入口控制亭內。

完成項目的時間為 40 天。

為了下訂單，客戶需要評估一個原型。

第六步：構思

在分析了客戶數據后，下一步是選擇一個能夠高效、快速且優雅地執行所有所需任務的微控制器。我選擇使用樹莓派 3B+，因為我之前曾使用該微控制器和 NODE RED 編程過一個移動機器人。因此，下一步是確定系統架構。是使用一個樹莓派控制所有路樁，還是為每個路樁使用一個樹莓派。我決定采用一個中間點，即為每 3 個路樁設計一個控制箱。

考慮到這些因素，基本設計如下：

一個帶有 3.5” LCD 觸摸屏的樹莓派、一個 8 通道 5V 繼電器模塊、一個 5 VDC 電源和用于電氣連接的接線端子，所有這些都放置在一個具有 IP65 防護等級的 ABS 塑料外殼中。

基本想法確定后，是時候規劃接下來的步驟了：

采購材料

在樹莓派上安裝軟件

編寫路樁控制程序

構建客戶評估原型

第七步：原型部件和工具

部件：

樹莓派 3B+

樹莓派 3.5" LCD 觸摸屏

8 通道 5V 繼電器模塊

5 VDC / 3 AMP 墻插電源

DIN 導軌

接線端子（Weidmuller 1020100000 WDU 4）

表面式雙孔插頭 EG78V

ABS NEMA IP66 外殼

AWG 14 電纜

工具：

電烙鐵

螺絲刀

第八步：軟件：RASPBIAN 安裝

在本節中，我將向您展示如何為樹莓派安裝操作系統。不過，我不知道您是樹莓派專家還是初學者。

如果您是專家，本節可能對您沒有太大幫助，您可以直接跳到 GUI 設計部分。但如果您是初學者，那么最好與專家一起學習。因此，我建議您下載《官方樹莓派初學者指南》雜志。

雜志的“附錄 A”介紹了如何在 micro SD 存儲卡上安裝操作系統。

第九步：軟件：NODE RED 安裝

Node-RED 是一種編程工具，用于以新穎有趣的方式將硬件設備、API 和在線服務連接在一起。

它提供了一個基于瀏覽器的編輯器，可以輕松使用調色板中的各種節點連接流程，并可以一鍵部署到運行時。

Node-RED 提供了一個基于瀏覽器的流程編輯器，可以輕松使用調色板中的各種節點連接流程。流程可以一鍵部署到運行時。

可以在編輯器中使用富文本編輯器創建 JavaScript 函數。內置庫允許您保存有用的函數、模板或流程以供重用。

NODE RED 安裝：

我們希望 Node-RED 在樹莓派啟動或重啟時運行。通過運行以下命令啟用服務自動啟動：

sudo systemctlenablenodered.service

為了在樹莓派啟動時在瀏覽器中運行程序，請在終端中輸入：

$sudo nano .bashrc

并在文件末尾添加以下內容：

chromium-browser —kiosk127.0.0.1:1880/ui/#!/1

第十步：FRED：Node Red 的字體編輯器

我們已經完成了樹莓派和 Node-RED 的安裝。

我們可以繼續在樹莓派上工作，但出于重要原因，我們建議在外部計算機上繼續開發程序，并在程序準備好并調試完成后，再將其遷移到樹莓派上。使用獨立開發計算機的原因包括：

1.這是我們正在開發的商業產品，因此我們希望樹莓派上只有客戶端程序代碼，沒有其他內容。

2.在程序開發過程中，我們通常會下載大量額外的軟件來開發程序和測試代碼，我們不希望這些程序出現在客戶端的樹莓派上。

3.在開發階段，我們會進行大量在線查詢，我們不希望所有這些數據流、cookie、下載等出現在樹莓派上。

我在 Node-RED 中使用的開發工具是 FRED。

如果您還沒有 FRED（Cloud Node-RED）賬戶，請立即注冊一個。演示賬戶是免費的，可用于本教程和您可能進行的任何其他實驗。在http://fred.sensetecnic.com注冊免費賬戶。

注冊后，請務必通過電子郵件激活您的賬戶。在驗證賬戶之前，您將無法登錄。

雖然 FRED 沒有樹莓派的 GPIO 組件，但這些組件可以模擬：rpi-gpio in 節點可以用 inject 輸入節點模擬，rpi-gpio out 節點可以用 debug 輸出節點模擬。

不過，您無需安裝 FRED，也可以繼續在樹莓派的 Node-RED 上工作。

第十一步：軟件：圖形用戶界面（GUI）

我們已經安裝了操作系統和 NODE RED 編程軟件，現在可以開始編寫構成程序的代碼行了。但想法是什么？我們從哪里開始？雖然從硬件角度來看，系統非常簡單：一個控制繼電器的樹莓派，但項目中最長且最復雜的部分是圖形界面設計。

通過 TCP/IP 控制路樁的最簡單方法是使用 NODE RED 的開關組件。然而，這并不是交付 GUI 設計的專業和商業方式。我決定以最真實的方式進行圖形控制，因此設計了一個可以動畫顯示的路樁圖像，模擬其升降，并用顏色指示路樁狀態：

紅色：表示路樁正在升起或處于完全伸出位置。

綠色：表示路樁已完全縮回。

動畫通過位于界面頂部和底部的兩個按鈕激活。頂部按鈕為紅色，標有“UP”（升起），底部按鈕為綠色，標有“DOWN”（降下）。我使用了 NODE RED 的 TEMPLATE 節點，其中嵌入了 CSS 和 HTML 程序源代碼。為了更好地理解這部分代碼，讓我們看看它的三個主要部分：“style”（CSS）、“body”和“script”。

第十二步：GUI - “style” 部分

CSS 是一種描述 HTML 文檔樣式的語言。

CSS 描述了 HTML 元素應如何顯示。

CSS 可以通過三種方式添加到 HTML 元素中：

內聯：通過在 HTML 元素中使用 style 屬性。

內部：通過在 “head” 部分使用 “style” 元素。

外部：通過使用外部 CSS 文件。

我們將使用內部方式：

查看此 CSS 教程，您將找到所有屬性和選擇器的完整 CSS 參考，包括語法、示例、瀏覽器支持等。

https://www.w3schools.com/html/html_css.asp

查看此教程，了解如何一勞永逸地理解 CSS 絕對定位。

https://www.freecodecamp.org/news/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd/

要更好地了解在 “style” 部分中可以定義的圖形，請查看以下鏈接。

https://css-tricks.com/the-shapes-of-css/

分析組件

仔細觀察圖形，繪制了構成圖形界面的組件，然后我將詳細介紹每個組件的代碼。

要定義綠色按鈕（降下按鈕），我們使用以下代碼：

.buttonGreen_B1{ background-color:#4CAF50;/* Green */ border: none; color: white; padding:15px32px; text-align: center; text-decoration: none; display: inline-block; font-size:16px; margin:4px2px; cursor: pointer;}

要定義紅色按鈕（升起按鈕），我們使用以下代碼：

.buttonRed_B1{ background-color:#f44336;}/* Red */

要定義包含所有元素的主矩形，我們使用以下代碼：

#container_B1{ top:0px; left:0px; width:120px; height:460px; position: relative; background-color:#333333;}

要定義路樁的形狀，我們使用三個矩形（# r1_B1、# r2_B1 和 # r3_B1）。

要定義矩形 # r1_B1，我們使用以下代碼：

#r1_B1{ display: inline-block; top:10px; left:25px; width:72px; height:10px; position: absolute; border:1pxsolid black; background-color:#f44336;}

要定義矩形 # r2_B1，我們使用以下代碼：

#r2_B1{ top:10px; left:2px; width:66px; height:10px; position: absolute; border:1pxsolid black; background-color:#aaaa44;}

要定義矩形 # r3_B1，我們使用以下代碼：

#r3_B1{ display: inline-block; top:10px; left: -2px; width:70px; height:200px; position: absolute; border:1pxsolid black; background-color:#f44336;}

要模擬路樁的 LED 燈，我們使用六個點（#dot1_B1 到 #dot6_B1），我使用以下代碼：

#dot1_B1{ display: inline-block; top:2px; left: 5px; height:3px; width:3px; position: absolute; border-radius:100%; border:2pxsolid yellow; background-color:#ff0000;}#dot2_B1{ display: inline-block; top:2px; left: 15px; height:3px; width:3px; position: absolute; border-radius:100%; border:2pxsolid yellow; background-color:#ff0000;}#dot3_B1{ display: inline-block; top:2px; left: 25px; height:3px; width:3px; position: absolute; border-radius:100%; border:2pxsolid yellow; background-color:#ff0000;}#dot4_B1{ display: inline-block; top:2px; left: 35px; height:3px; width:3px; position: absolute; border-radius:100%; border:2pxsolid yellow; background-color:#ff0000;}#dot5_B1{ display: inline-block; top:2px; left: 45px; height:3px; width:3px; position: absolute; border-radius:100%; border:2pxsolid yellow; background-color:#ff0000;}#dot6_B1{ display: inline-block; top:2px; left: 55px; height:3px; width:3px; position: absolute; border-radius:100%; border:2pxsolid yellow; background-color:#ff0000;}

要定義路樁外殼，我們使用兩個矩形（# r4_B1 和 # r5_B1）。

要定義矩形 # r4_B1，我們使用以下代碼：

#r4_B1{ top:214px; left:5px; width:110px; height:10px; position: absolute; border:1pxsolid black; background-color:#666666;}

要定義矩形 # r5_B1，我們使用以下代碼：

#r5_B1{ display: inline-block; top:225px; left:22px; width:82px; height:218px; position: absolute; border:1pxsolid black; background-color:#443333; }

我們已經完成了 CSS 部分的編寫，現在讓我們進入 body 部分...

第十三步：GUI - "body" 部分

body 部分包含三個重要部分：

1.UP 和 DOWN 按鈕的定義。

UP 按鈕具有以下源代碼：

class="buttonGreen_B3 buttonRed_B3"onclick="myMoveUp_B3()"ng-click="send({payload: 2})”>__UP__

DOWN 按鈕具有以下源代碼：

DOWNbutton>

2.div 標簽：在 HTML 文檔中定義一個分區或部分。

div 元素通常用作其他 HTML 元素的容器，以便使用 CSS 對其進行樣式設置，或使用 JavaScript 執行某些任務。

然后，此標簽用于包含路樁的所有元素：

div> div> div> div> div> div> div> div>div>div> div>div> div>

3.script 部分，我們將在下一步中看到。

第十四步：GUI - "script" 部分

此部分有三個重要函數：負責獲取外部輸入值（GPIO IN）的 function(scope) 函數：

(function(scope) {scope.$watch('msg.payload',function(newValue1,oldValue1) { console.log('BOLLARD 1'); console.dir(newValue1); if(newValue1===oldValue1) { dos1(oldValue1); }else{ uno1(newValue1); } }); })(scope); functionuno1(bale1){ if(bale1 ==true){ console.dir('TRUE b1:'+bale1); myMoveUp_B1(); }else { console.dir('FALSE b1:'+bale1); myMoveDown_B1(); } } functiondos1(gale1){ console.dir('DOS b1:'+gale1); }

myMoveDown_B1() 函數，用于降下路樁：

varaltura_B1 =0;functionmyMoveDown_B1() { varelem =document.getElementById("r1_B1"); varpos =0; varid =setInterval(frame,5); functionframe() { if(altura_B1 >=214) { clearInterval(id); elem.style.backgroundColor="#4CAF50"; varelem1 =document.getElementById("r1_B1"); elem1.style.backgroundColor="#4CAF50"; }else{ altura_B1++; elem.style.top= altura_B1 +'px'; elem.style.left=10; elem.style.backgroundColor="#f44116"; } }}

myMoveUp_B1() 函數，用于升起路樁：

functionmyMoveUp_B1() { varelem1 =document.getElementById("r1_B1"); elem1.style.backgroundColor="#f44116"; varelem =document.getElementById("r1_B1"); varpos =220; varid =setInterval(frame,5); functionframe() { if(altura_B1 ==0) { clearInterval(id); }else{ altura_B1--; elem.style.top= altura_B1 +'px'; elem.style.left=10; elem.style.backgroundColor="#f44116"; } }}

第十五步：整合所有部分 - TEMPLATE 節點

現在是時候將所有代碼整合在一起了。在一個 TEMPLATE 節點中，放置以下代碼：