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

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

為工業(yè)用途設(shè)計設(shè)備需要精心準(zhǔn)備，并且必須使用經(jīng)批準(zhǔn)用于工業(yè)用途的材料和組件進(jìn)行構(gòu)建。

在本教程中，我將重點(diǎn)介紹使原型與具有商業(yè)或工業(yè)質(zhì)量的產(chǎn)品之間產(chǎn)生差異的關(guān)鍵點(diǎn)。

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

對我來說，區(qū)分原型和商業(yè)版本質(zhì)量的關(guān)鍵在于圖形用戶界面（GUI）的設(shè)計，這也是本教程中將詳細(xì)介紹的部分。

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

如果您有改進(jìn)建議，請告訴我。

讓我們開始吧。

第一步：背景

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

“自動路樁”

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

第二步：客戶訪談

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

在與客戶會面前，準(zhǔn)備一份簡要的技術(shù)規(guī)格書，說明項目構(gòu)想，以便客戶對他將要接收的產(chǎn)品有一個大致的了解。

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

路樁的品牌和型號

路樁安裝手冊的副本

要安裝的路樁數(shù)量

路樁的安裝位置

如何以及由誰控制設(shè)施的出入口

設(shè)施和設(shè)備的標(biāo)識或名稱

所需控制系統(tǒng)的要求

系統(tǒng)交付時間

第三步：分析客戶信息 - （內(nèi)容）

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

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

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

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

第二個出入口控制區(qū)（ACCESS AREA “B”）由三條單車道通行路線組成：一條入口、一條出口和一條雙向路線。該區(qū)域?qū)惭b 3 個路樁。

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

根據(jù)這些數(shù)據(jù)，為每個路樁分配了一個 ID。該標(biāo)識由客戶制定：

ACCESS AREA "A"

入口區(qū):

路樁1 ID: CAS01-B01-EA

路樁2 ID: CAS01-B02-ET

出口區(qū):

路樁3 ID: CAS01-B03-ST

路樁4 ID: CAS01-B04-SA

ACCESS AREA “B”

入口區(qū):

路樁5 ID: CAS02-B01-SA

出口區(qū):

路樁6 ID: CAS02-B02-ST

雙向區(qū):

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

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

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

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

設(shè)備將放置在出入口控制亭內(nèi)。

完成項目的時間為 40 天。

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

第六步：構(gòu)思

在分析了客戶數(shù)據(jù)后，下一步是選擇一個能夠高效、快速且優(yōu)雅地執(zhí)行所有所需任務(wù)的微控制器。我選擇使用樹莓派 3B+，因?yàn)槲抑霸褂迷撐⒖刂破骱?NODE RED 編程過一個移動機(jī)器人。因此，下一步是確定系統(tǒng)架構(gòu)。是使用一個樹莓派控制所有路樁，還是為每個路樁使用一個樹莓派。我決定采用一個中間點(diǎn)，即為每 3 個路樁設(shè)計一個控制箱。

考慮到這些因素，基本設(shè)計如下：

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

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

采購材料

在樹莓派上安裝軟件

編寫路樁控制程序

構(gòu)建客戶評估原型

第七步：原型部件和工具

部件：

樹莓派 3B+

樹莓派 3.5" LCD 觸摸屏

8 通道 5V 繼電器模塊

5 VDC / 3 AMP 墻插電源

DIN 導(dǎo)軌

接線端子（Weidmuller 1020100000 WDU 4）

表面式雙孔插頭 EG78V

ABS NEMA IP66 外殼

AWG 14 電纜

工具：

電烙鐵

螺絲刀

第八步：軟件：RASPBIAN 安裝

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

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

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

第九步：軟件：NODE RED 安裝

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

它提供了一個基于瀏覽器的編輯器，可以輕松使用調(diào)色板中的各種節(jié)點(diǎn)連接流程，并可以一鍵部署到運(yùn)行時。

Node-RED 提供了一個基于瀏覽器的流程編輯器，可以輕松使用調(diào)色板中的各種節(jié)點(diǎn)連接流程。流程可以一鍵部署到運(yùn)行時。

可以在編輯器中使用富文本編輯器創(chuàng)建 JavaScript 函數(shù)。內(nèi)置庫允許您保存有用的函數(shù)、模板或流程以供重用。

NODE RED 安裝：

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

sudo systemctlenablenodered.service

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

$sudo nano .bashrc

并在文件末尾添加以下內(nèi)容：

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

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

我們已經(jīng)完成了樹莓派和 Node-RED 的安裝。

我們可以繼續(xù)在樹莓派上工作，但出于重要原因，我們建議在外部計算機(jī)上繼續(xù)開發(fā)程序，并在程序準(zhǔn)備好并調(diào)試完成后，再將其遷移到樹莓派上。使用獨(dú)立開發(fā)計算機(jī)的原因包括：

1.這是我們正在開發(fā)的商業(yè)產(chǎn)品，因此我們希望樹莓派上只有客戶端程序代碼，沒有其他內(nèi)容。

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

3.在開發(fā)階段，我們會進(jìn)行大量在線查詢，我們不希望所有這些數(shù)據(jù)流、cookie、下載等出現(xiàn)在樹莓派上。

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS 描述了 HTML 元素應(yīng)如何顯示。

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

內(nèi)聯(lián)：通過在 HTML 元素中使用 style 屬性。

內(nèi)部：通過在 “head” 部分使用 “style” 元素。

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

我們將使用內(nèi)部方式：

查看此 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/

分析組件

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

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

.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 燈，我們使用六個點(diǎn)（#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; }

我們已經(jīng)完成了 CSS 部分的編寫，現(xiàn)在讓我們進(jìn)入 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 標(biāo)簽：在 HTML 文檔中定義一個分區(qū)或部分。

div 元素通常用作其他 HTML 元素的容器，以便使用 CSS 對其進(jìn)行樣式設(shè)置，或使用 JavaScript 執(zhí)行某些任務(wù)。

然后，此標(biāo)簽用于包含路樁的所有元素：

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

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

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

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

(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() 函數(shù)，用于降下路樁：

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() 函數(shù)，用于升起路樁：

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 節(jié)點(diǎn)

現(xiàn)在是時候?qū)⑺写a整合在一起了。在一個 TEMPLATE 節(jié)點(diǎn)中，放置以下代碼：