OpenPLC 初體驗 /03/ - OpenPLC 階梯圖（LD）和結構化文本程式（ST）實作範例（ESP826 as Modbus Slave Devices）

網頁最後修改時間：2020/11/25

經過了前面幾篇部落格關於 OpenPLC 的介紹和開發環境的建置，從現在開始要進入到實作的部分。如果您只想看看，那麼可直接跳過這裡的說明，直接進入到章節中；反之，若是以學習 OpenPLC 為目的，請先準備好需要的東西，再跟著網頁一起做！

本篇網頁的目標：使用 OpenPLC 的階梯圖（Ladder Diagram, 簡稱 LD）和結構化文本程式（Structured Text Programming, 簡稱 ST）以 NodeMCU（板載 ESP8266, ESP-12E 模組）開發板上的按鈕，控制兩顆 LEDs 亮/滅；每按一次 FLASH 按鈕，兩顆 LED 將會依序點亮、同時點亮和同時熄滅。

要達到這樣的目的，下面是需要完成的部分：

1. NodeMCU 要轉換為 Modbus TCP Server（Slave Device）；

2. 撰寫 OpenPLC 程式；

3. 新增 Slave Device 和上傳 OpenPLC 程式到 OpenPLC Runtime；

4. 建立 SCADA 與 OpenPLC Runtime 的連線和人機介面；

** 詳細的過程，請看（5）整體測試裡的影片。

本文以從底部基礎一直往上搭建的方式來做說明，整篇分為以下幾個部分：

• （01）創建 Modbus Slave Devices（以 NodeMCU 為例）
• （01-01）修改接腳定義
• （01-02）修改韌體程式
• （01-03）燒錄 NodeMCU ESP8266 Modbus TCP Server 韌體程式
• （01-04）新增 Slave Devices（從裝置或受控端）到 OpenPLC Runtime
• （02）撰寫 OpenPLC 程式
• （02-01）結構化文本程式
• （02-02）階梯圖
• （02-03）上傳 OpenPLC Editor 程式到 OpenPLC Runtime
• （03）啟動 OpenPLC Runtime
• （04）建立人機介面
• （04-01）Modbus Poll
• （04-02）ScadaBR
• （04-02-01）設定 ScadaBR HTML Component
• （04-02-02）設定 ScadaBR Binary graphic Component
• （04-02-03）設定 ScadaBR Button (write) Component
• （04-03）VTScada
• （04-03-01）建立 Tags
• （04-03-01-01）新增 TCP/IP Port (Modbus TCP) tag
• （04-03-01-02）新增 Modbus Compatible Device (NodeMCU) tag
• （04-03-01-03）新增 I/O and Calculations tags
• （04-03-02）建立圖形開發介面
• （05）整體測試

/*-/--*-*/*/*/*/***//-*-*-**-*/*-*-/*/*/*-*-/-////--/**/**--**/--///--//**----**//--**//**----***//*-**//*

OpenPLC 是個不錯的專案項目！

不過正如同其它開源項目一樣，該網站的維護是作者其個人獨自奉獻。

為了讓 OpenPLC 網站和這項目能夠持續改善以及維持下去，
若覺得這專案對您有所助益和幫助，請加入每月支援該網站的行列！

OpenPLC Project 網站公告：OpenPLC Forum is shutting down - what can you do to help avoid that

/*-/--*-*/*/*/*/***//-*-*-**-*/*-*-/*/*/*-*-/-////--/**/**--**/--///--//**----**//--**//**----***//*-**//*

*********************************************************************************

• 繼電器相關商品訂購
• Modbus Slave Devices 相關商品

*********************************************************************************

【（01）創建 Modbus Slave Devices（以 NodeMCU 為例）】

OpenPLC Runtime，支援內部運行 Modbus（RTU Slave / TCP Server）通訊協定的裝置（也就是 Slave Devices（本文稱受控端或從裝置））來作 I/O 點的擴充，因此不管是直接購買市售品或是自行開發，只要符合這個條件的裝置都能拿來用。

本篇的受控端裝置，採用板載 ESP-12E 的 NodeMCU 開發板，因為它的板子上面就有兩顆 LED 和一顆按鈕可以用，毋須再另外佈線，省時省工！

若不是 NodeMCU 開發板也沒關係！只要是內載 ESP8266 晶片，且有釋出 <GPIO0>、<GPIO2> 和 <GPIO16> 這三隻接腳可以接線的 ESP 模組，都可以參考下面的電路圖進行接線。

ESP8266 參考接線圖

OpenPLC Runtime 針對 NodeMCU 作為 Modbus Slave Devices 提供了教學與說明網頁：OPENPLC ON ESP8266，您完全可以依照著網頁上面的說明，自己一步一步地完成這部分（但是程式碼要改），或是跟著下面網頁來做都可以。

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （01-01）修改接腳定義：

要達到每按下一次 FLASH 按鈕切換兩顆 LED 的亮滅狀態，要修改 OPENPLC ON ESP8266 網頁提供的程式碼中，所定義的兩隻接腳的 Modbus I/O 功能。

NodeMCU Modbus TCP Server DI/DO/AI/AO 接腳定義
原始圖片來源：https://www.openplcproject.com/runtime/esp8266/

如上圖所示，灰色圖塊框住的接腳是原始定義，旁邊的部分則是我重新修改和加上去的，而需要修改的兩支接腳為：

• <GPIO0>
  %QXn.3 改為 %IX#.0
• <GPIO2>
  %IXn.0 改為 %QXn.3

其中 # 代表暫存器的地址。OpenPLC Runtime v3 是從 100 開始分配（OpenPLC Runtime v2 則是從 0 開始）。若是 OpenPLC Runtime 控制端接了多個 Modbus Slave Devices，那麼每一台裝置就會分配到不同的起始地址。關於詳細的暫存器地址分配，還是要實際去看 "Slave Devices" 頁面中的分配表比較保險，避免用了出現錯誤或是沒有反應！

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （01-02）修改韌體程式：

下載官網的 OpenPLC Firmware for the ESP8266。解壓縮後，在 Arduino IDE 打開它。

首先在程式開頭處，修改並填入欲連線的無線網路名稱和密碼。

#include <ESP8266WiFi.h>

/*********NETWORK CONFIGURATION*********/

const char *ssid = "無線網路名稱";
const char *password = "無線網路密碼";

/***************************************/

再往下幾行，修改 pinMask_DIN[] 和 pinMask_DOUT[] 陣列的初始化定義跟下面一樣。

// uint8_t pinMask_DIN[] = { NODE_PIN_D4, NODE_PIN_D5, NODE_PIN_D6, NODE_PIN_D7 };
uint8_t pinMask_DIN[] = { NODE_PIN_D3, NODE_PIN_D5, NODE_PIN_D6, NODE_PIN_D7 };
// uint8_t pinMask_DOUT[] = { NODE_PIN_D0, NODE_PIN_D1, NODE_PIN_D2, NODE_PIN_D3 };
uint8_t pinMask_DOUT[] = { NODE_PIN_D0, NODE_PIN_D1, NODE_PIN_D2, NODE_PIN_D4 };
uint8_t pinMask_AIN[] = { A0 };
uint8_t pinMask_AOUT[] = { NODE_PIN_D8 };

最後，修改 pinConfig() 函式裡面的程式碼跟下面一樣。

void pinConfig()
{
    pinMode(NODE_PIN_D0, OUTPUT);
    pinMode(NODE_PIN_D1, OUTPUT);
    pinMode(NODE_PIN_D2, OUTPUT);
    // pinMode(NODE_PIN_D3, OUTPUT);
    pinMode(NODE_PIN_D4, OUTPUT);
    
    // pinMode(NODE_PIN_D4, INPUT);
    pinMode(NODE_PIN_D3, INPUT);
    pinMode(NODE_PIN_D5, INPUT);
    pinMode(NODE_PIN_D6, INPUT);
    pinMode(NODE_PIN_D7, INPUT);
    
    pinMode(NODE_PIN_D8, OUTPUT);
}

如（01）開頭所提及的，這程式並不侷限於 NodeMCU 開發板；現在您可以編譯並上傳程式了！

打開 Serial Moditor，若一切順利，就會顯示無線網路連線之後所分配到的 IP 地址。

openplc on esp8266 程式輸出

作為參考，您若是想使用固定 IP，那麼在 WiFi.begin(...) 下面新增一行下面這指令就可以了。

WiFi.config(IPAddress local_ip, IPAddress gateway, IPAddress subnet);

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （01-03）燒錄 NodeMCU ESP8266 Modbus TCP Server 韌體程式：

如果您的 ESP8266 模組或開發板的記憶體配置是 32Mbit 或就是 NodeMCU 開發板，那麼可以直接用下面的方法燒錄（01-02）所編譯出來的韌體。

相關資料如下，使用前請先自行下載。

• （01-02）編譯之韌體下載
• Flash Download Tools 下載網頁

解壓縮韌體檔案，再解壓縮 Flash Download Tools 後開啟軟體，照著下圖進行相關的參數設定。

Flash Download Tools NodeMCU 韌體燒錄設定       

最後插上 NodeMCU 並選擇好 COM  Port，按下 START 開始燒錄。

完成後請記得開啟 Serial Monitor 確認輸出是否與（01-02）的結果相同？

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （01-04）新增 Slave Devices（從裝置或受控端）到 OpenPLC Runtime：

由於下一節撰寫 OpenPLC 程式需要知道各個 I/O 的暫存器地址，所以需要在建立好 Slave Devices 後，新增此裝置到 OpenPLC Runtime 環境中，來設定它的組態並取得它的各種 I/O 被分配到的暫存器地址範圍。

啟動 OpenPLC Runtime 再打開瀏覽器，網址列輸入：

• 本地安裝
  127.0.0.1:8080 或 localhost:8080
• 遠端安裝
  IP Address:8080

登入的帳號 / 密碼：openplc / openplc

點選左邊選單 "Slave Devices" 進入到受控端裝置的列表頁面，在該頁面按下 "Add new devices" ，然後照著下圖做設定。

OpenPLC Runtime 新增 Slave Device

其中：

1. Device Name

裝置的名稱，可自行命名。

2. Device Type

連接的裝置類型。列表前四個項目，是特定的硬體且燒錄官網所提供的韌體所要做的選擇，一旦選定後，6 ~ 10 就會自動填入和鎖定，無法修改；列表後兩個，是可自行連接且組態的 Modbus 裝置。由於我們有做韌體的修改，所以要選擇 Generic Modbus TCP Device，否則連線啟動後會出問題。

Slave Device 可選擇的類型

3. Slave ID

Modbus 站號。這裡數字只對 Modbus RTU Slave 的裝置有效，Modbus TCP 不需要它，但還是需要有一個值，不然儲存不了，就用預設的 0 就好。

4. IP Address

裝置的 IP 地址。

5. IP Port

裝置的 IP Port 號碼。除非主從裝置有特別設定，否則一般就是使用預設的值 502 就可以；胡亂設為其他號碼，可能會被防火牆擋住。

6. Discrete Input

這裡是裝置的數位輸入暫存器起始地址和數量的設定，以 bit 為單位。若沒有其他特殊需求，就照著設定就好。這裡的設定概念是，假設設定 Start Address: 2 Size: 4，就是表示將裝置的 DI.2 ~ DI.5 映射到 %IX100.0 ~ %IX100.3。

7. Coils

這裡是裝置的數位輸出暫存器起始地址和數量的設定，以 bit 為單位。若沒有其他特殊需求，就照著設定就好。以現在欄位中的設定 Start Address: 0 Size: 4 ，就是將裝置的 DO.0 ~ DO.3 映射到 %QX100.0 ~ %QX100.3。 

8. Input Registers

這裡是裝置的類比輸入暫存器起始地址和數量的設定，以 byte 為單位。若沒有其他特殊需求，就照著設定就好。這裡的設定概念是，假設設定 Start Address: 1 Size: 3，就是表示將裝置的 AI1 ~ AI3 映射到 %IW100 ~ %IW102。

9. Holding Registers - Read

不是很清楚這個欄位的設定！只知道設定數量（Size）之後會一併加到 Input Registers 的暫存器範圍。例如設定 Size: 2，那麼按下 "Save device" 後，AI 的範圍就變成是 %IW100 ~ %IW104（由 Input Registers %IW102 再往上加 2）。這看起來也不是單純讀取 Holding Register，AO 只要設定在 Holding Registers - Write 這部分就能正常地被讀取和寫入，所以暫時在未知用途的情況之下，就先維持都是 0 就行，之後有人告知或是搞清楚之後再回來補充！

10. Holding Registers - Write

這裡是裝置的類比輸出暫存器起始地址和數量的設定，以 byte 為單位。若沒有其他特殊需求，就照著設定就好。這裡的設定概念是，假設設定 Start Address: 1 Size: 3，就是表示將裝置的 AI1 ~ AI3 映射到 %QW100 ~ %QW102。

最後按下 "Save device"，新增和儲存裝置組態並回到上一個頁面。

新增裝置後的 OpenPLC Runtime Slave Devices 頁面

參考頁面表格中，該裝置所分配到的 DI 和 DO 的暫存器地址，就可以開始來寫 OpenPLC 程式了。

** 若上面有不清楚之處，可自行看官網  OPENPLC AND MODBUS SLAVES 網頁裡的說明。

【（02）撰寫 OpenPLC 程式】

根據要求的功能，這一部分會用結構化文本程式和階梯圖，兩種不同形式的 OpenPLC 程式進行撰寫。

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （02-01）結構化文本程式：

結構化文本程式對於有程式語言基礎的用戶非常友善，它的語法類似 Pascal 和 C 語言，要學的語句不多，網路上有很多教學式的網頁參考資料可以看，看看就能動手開始寫。

Schneider OnePage Structured Text (PDF 格式)

「喂，別鬧啦！那個是給熟悉語法的人參考的，不是給初學者！」

「(¬‿¬)，要不看這個！」

Structured Text Tutorial to Expand Your PLC Programming Skills

「o((>ω< ))o」

「不喜歡英文，不然看這篇好了！」

MELSEC iQ-R 結構化文本(ST)程式指南（請找 PDF 格式下載）

會在這裡囉裡叭唆一大堆的原因，就是希望您花時間至少看一下或瀏覽一下這些網頁和文件。因為打從一開始，就沒打算用 LD 來寫這程式，原因是不喜歡圖形化介面拉來拉去的感覺；至於會用 ST，是因為它的寫法跟程式語言一樣，想試著寫寫看，順便學習學習！

那麼，請打開 OpenPLC Editor，點選選單 "檔案 / 新增"。

結構化文本程式操作 - 01

選擇或建立一個專案要存放的資料夾。資料夾可以自己命名或是新建，要不就跟下圖設為 NodeMCU_ST_Test 一樣的名字，最後按 "選擇資料夾" 確定。

結構化文本程式操作 - 02

回到主畫面，會出現一個 "Create a new POU" 的對話視窗，詢問您要選擇哪一個語言來撰寫 OpenPLC 程式。

OpenPLC 支援 5 種程式語言，但在這裡請選擇 Language: ST，其餘的維持原狀，再按下 "確認" 回到主畫面。

結構化文本程式操作 - 03

點一下 Unnamed，右邊選擇 "Project" 的 "Project properties" 頁簽，修改 Project Name (required): 為 NodeMCU - Open PLC（不改也可以）。

結構化文本程式操作 - 04

滑鼠點選 program0 打開程式編輯頁面。這頁面分為上下兩個部分：上面是程式裡面所有需要用到的暫存器、變數和什麼的定義處，在程式撰寫之前都必須先被定義；下面是程式撰寫的區域。

請在程式編輯頁上面的部分，新增和下圖一樣的暫存器地址和變數定義。

結構化文本程式操作 - 05

接著，在程式編輯頁下面的部分，撰寫 ST 程式碼。

結構化文本程式操作 - 06

檢查沒問題後，按下 🡻 圖示，這會開始建立給 OpenPLC Runtime 使用的程式。

結構化文本程式操作 - 07

建立的結果如下所示。

結構化文本程式操作 - 08

到此，就完成 OpenPLC ST 的程式撰寫。

結構化文本程式操作 - 09

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （02-02）階梯圖：

階梯圖是根據上一節的結構化文本程式來撰寫，您可以試著自己寫寫看，要不參考下面所寫的。

階梯圖專案建立的前面幾個步驟基本上都一樣，只有專案資料夾取名為 NodeMCU_LD(ST)_Test 和 Language: 要選擇 LD 不同而已，所以就直接進入到暫存器與變數定義的部分。

請照著下表新增這些暫存器地址和變數的定義；其中 #6 會在拉入 Block 的時候會自動建立，所以不用手動新增。

階梯圖 - 01

接著，根據下圖建立階梯圖。

階梯圖 - 02

完成後，按下 🡻 圖示，開始建立給 OpenPLC Runtime 使用的程式。

建立的結果如下所示。

階梯圖 - 03

到此，就完成 OpenPLC LD 的程式撰寫。

階梯圖 - 04

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （02-03）上傳 OpenPLC Editor 程式到 OpenPLC Runtime：

完成 OpenPLC 階梯圖和結構化文本程式的撰寫之後，要執行它，還剩最後一步：上傳！

OpenPLC Runtime 畫面點選 "Programs" 切換到程式上傳的網頁，再按下 "選擇檔案" 選擇要上傳的檔案。

OpenPLC 程式上傳 - 01

依據您在（02-01）和（02-02）所建立的 OpenPLC Editor 專案資料夾的路徑，選擇要上傳的檔案 *.st，再按下 "開啟" 選定檔案。

OpenPLC 程式上傳 - 02

回到剛剛網頁中，按下 "Upload Program" 進入到檔案資料填寫的頁面。

OpenPLC 程式上傳 - 03

上傳之前，要先對這個 OpenPLC 程式做命名（NodeMCU_ST_Test），以後執行時就知道它是做什麼；然後按下 "Upload program" 上傳並開始編譯程式。

OpenPLC 程式上傳 - 04

OpenPLC 程式必須經過編譯之後才能在 OpenPLC Runtime 環境中運行。

OpenPLC 程式上傳 - 05

若編譯一切無誤，就會出現 Compilation finish successfully! 的訊息，下方的按鈕也會變成可按的狀態。請按下 "Go to Dashboard" 回到 OpenPLC Runtime 的主網頁，準備啟動 OpenPLC 程式。

OpenPLC 程式上傳 - 06

除非要執行的 OpenPLC 程式不同，不然每次要執行新建的 OpenPLC 程式時，都是要跑上面全部的過程；若是程式之前已經有上傳過了，那麼只要進入 "Programs" 網頁點選要執行的 OpenPLC 程式，進入到下一個網頁再點選 "Launch program" 就會開始重新編譯程式，當然如果原來的程式有經過變更要重新上傳，就按下 "Update program" 上傳更新的程式就行了。

OpenPLC 程式上傳 - 07

【（03）啟動 OpenPLC Runtime】

點選進入到 OpenPLC Runtime "Dashboard" 的網頁中，按下 "Start PLC"，就能啟動選定的 OpenPLC 程式，相關啟動的過程會出現在右方的 Runtime Logs 欄位。

啟動 OpenPLC Runtime - 01

正常啟動的的過程就如下圖的 Runtime Logs 所示，過程中如果出現錯誤，請照著訊息解決它；大多都是出現在通訊設定的錯誤，又或是有裝置離線所產生的。

要確定裝置是否正常執行？只要切換到 "Monitoring" 網頁就能知道！

啟動 OpenPLC Runtime - 02

該頁面中會出現您在 OpenPLC Editor 所定義的暫存器地址、它的名稱、狀態和類型等...，也可以直接控制它（如果程式裡面已有邏輯條件的話，雖然可以強制設定，但是會被程式內部的邏輯優先處理），但是所謂正常執行，就是它要能執行您所賦予它的執行動作。

依照設計，LED_02、LED_16 和 Button_Flash_0 都是低態動作，所以程式一開始狀態會如下圖所示，NodeMCU 開發板按鈕沒被按下，且 LED 也會全滅，每按一次按鈕，兩顆 LED 會依序亮滅做變化。

實際動作請看（05）整體測試。

啟動 OpenPLC Runtime - 03

【（04）建立人機介面】

下面介紹三種可以與 OpenPLC Runtime 連線測試的 Modbus TCP Client 的軟體。

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （04-01）Modbus Poll：

這是最容易使用的軟體，且也是與 OpenPLC Runtime 測試最簡單的方法，請先下載與安裝下面這兩樣東西：

• Modbus Poll 測試版
  下載後請自行安裝。
• Modbus Poll DI / DO 定義檔
  解壓縮後會有兩個 Modbus Poll 暫存器讀寫的定義檔，存檔後把它們在 Modbus Poll 開啟即可。

檔案全部開啟後的畫面，就如下圖所示。

SCADA, Modbus Poll - 01

接著要設定它與 OpenPLC Runtime 之間的 Modbus TCP 連線。

Modbus Poll 選單選擇 "Connection / Connect..."，打開 "Connection Setup" 連線設定畫面，輸入跟下圖除了 IP 地址之外相同的設定。

SCADA, Modbus Poll - 02

IP Address or Node Name 是用來設定安裝 OpenPLC Runtime 電腦的 IP 地址。如果您的 Modbus Poll 和 OpenPLC Runtime 是安裝在同一台電腦上（假設 IP 地址：192.168.0.3），下面都是可以運行的 IP 地址。

直接使用電腦的 IP 地址。

SCADA, Modbus Poll - 03

相比要先獲得電腦 IP 才能與 OpenPLC Runtime 連線，使用 IP 地址 127.0.0.1 是最簡單的方法！

SCADA, Modbus Poll - 04

** 關於 OpenPLC Runtime 暫存器記憶體配置，可看其官網網頁 MODBUS ADDRESS MAPPING 裡的說明。

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （04-02）ScadaBR：

ScadaBR 相比於 VTScada 的 Tag 設定簡單很多，但是在 GUI  的設計上，就沒 VTScada 提供較多的圖示（icons）能作選擇。不過畫面的呈現方式，都是採差不多的設計概念，也就是可自行拼貼圖案上去。

不過在這裡，並沒有要特別展示這個部分，而是以最簡單的方式，來建立一個按鈕和兩顆 LED 的畫面。

不管是 ScadaBR 還是 VTScada，為 OpenPLC Runtime 設計人機介面前，都必須先把 Modbus TCP 的連線搞定，然後新增要監控的 I/O 點（Tag）並把組態設定好，接著就能在設計人機介面時使用它。

由於 ScadaBR 只與 OpenPLC Runtime 做單一通訊，而 OpenPLC Runtime 也只接了 NodeMCU，所以要處理的只有三個資料點：一個輸入兩個輸出。

登入到 ScadaBR（安裝在虛擬機，取得的 IP：192.168.0.16），點選 "Data sources" 圖示。

SCADA, ScadaBR - 01

按下下拉選單，點選 Modbus IP，再按下右方的新增按鈕，進入到新增裝置的組態設定網頁。在這個畫面中，您要建立一個新的資料來源。

SCADA, ScadaBR - 02

下圖是縮圖，可點擊看原尺寸圖。圖面上只有標示的部分需要處理，其他的維持原狀即可。

圖上方橙色的部分：

• 橙色方框
  照著下圖所示做填入和做選擇。
• 橙色底線
  Host 指的就是 OpenPLC Runtime 的 IP 地址。依之前的設定，電腦的 IP 地址就是 192.168.0.3；不過實際這裡要填入您自己的。
• 橙色文字
  完成 Modbus IP properties 的組態設定後，請依序按下 1 和 2 圖示，以儲存設組態設定和啟動連線。

SCADA, ScadaBR - 03

圖下方綠色的部分，是要用來建立監控節點的區域，有三個節點需要被建立。

先按下 3 圖示，右方會出現如下的組態設定方塊。照著上圖綠色方框中的節點資料填入下圖中，就可得到同樣的節點設定。

SCADA, ScadaBR - 04

整個綠色部分的監控節點都設定完成後，最後一步就是按下 4 圖示，啟用全部的節點（或是個別按下 Status 欄位下的圖示也可以），啟用後就會像 SCADA, ScadaBR -03 圖示下方綠色框的狀態一樣。 

按下 "Data Sources" 圖示回到 Data Source 網頁，您會看到剛剛建立的項目已經是啟用的狀態。

SCADA, ScadaBR - 05

按下 "Graphical views" 圖示，切換到人機介面設計的網頁。

SCADA, ScadaBR - 06

按下 "New view" 新建一個人機介面。

SCADA, ScadaBR - 07

其實要做的，就是先為這個人機介面取一個名字；這裡請命名為 NodeMCU Monitor（自己取也可以）。

SCADA, ScadaBR - 08

網頁的下半部屬於人機介面的編輯區，節點連結的圖示或是組態都是在這裡做設定。如果人機介面有做什麼變更，要記得！儲存、刪除和取消當次變更的按鈕都在網頁的最下方。

SCADA, ScadaBR - 09

回到網頁下半部的上方，開始建立如下的人機介面。

SCADA, ScadaBR - 10

上面的人機介面，主要分為三種 Components：

• HTML
  用來顯示文字，例如人機介面上的：Flash Button, ESP-12E LED 和 NodeMCU LED。
• Binary graphic
  用來顯示二進位（也就是數位輸入和輸出）的狀態，例如人機介面上的兩個圓形藍色燈和一個圓形綠色燈。
• Button (Write)
  除了用來顯示數位輸出的狀態之外，也可以作為按鈕，控制數位輸出。

下面就來介紹，這三種 Components 的設定方法。

**（04-02-01）設定 ScadaBR HTML Component：

當需要在人機介面上顯示文字時，利用 HTML 元件是最簡單的方式。它支援 HTML 和 CSS 語法（其它的還沒試過），可用在文字的大小、顏色和變化上。

以 Flash Button 文字建立為例：

1. 點選 Components: 下拉選單，選中 HTML；
2. 按下圖示，新增元件（Component），人機介面編輯區就會出現一個寫著 HTML 的圖示；
3. 滑鼠移動到剛新增的 HTML 圖示上，圖示旁會出現一排選單，點選鉛筆進行修改；
4. 在出現的編輯視窗中，輸入下面 HTML 語法。輸入完畢，請按下右上角磁碟圖示，儲存設定；
   <Label><b><i>ESP-12E LED<i></b></Label>

依照上面的步驟，就能設定需要的文字與格式。

SCADA, 設定 ScadaBR HTML Component 組態

**（04-02-02）設定 ScadaBR Binary graphic Component

不管是數位輸入或數位輸出，狀態的顯示可使用 Binary graphic 元件，但它不可作為數位輸出的控制。

以 NodeMCU Flash Button 狀態顯示的建立為例：

1. 點選 Components: 下拉選單，選中 Binary graphic；
2. 按下圖示，新增元件（Component）。剛增加的元件還未設定時，只能看到一個積木圖示，旁邊有一個三角驚嘆號；
3. 滑鼠移動到剛新增的積木圖示上，圖示旁會出現一排選單，點選拼圖上有鉛筆的圖示進行修改。點選 Point 下拉選單，選中 NodeMCU - CFlash_Button，最後點選視窗右上角磁碟圖示，儲存設定；
4. 接著，按下圖示選單的第三個，出現圖示顯示設定的選項。點選 Image set 下拉選單，選擇您要的圖示集，並且根據節點的邏輯選擇對應的圖示。由於 NodeMCU Flash Button 是低態動作，因此 zero image 要選擇亮色、one image 要選擇暗色。

依照上面的步驟，就能設定數位輸入和數位輸出的狀態顯示。

SCADA, 設定 ScadaBR Binary graphic Component 組態

**（04-02-03）設定 ScadaBR Button (write) Component

要用按鈕控制數位輸出，可使用 Binary graphic 元件，但它不可作為數位輸入的控制。

以建立按鈕，控制 NodeMCU ESP-12E LED 為例：

1. 點選 Components: 下拉選單，選中 Button (write)；
2. 按下圖示，新增元件（Component）。剛增加的元件還未設定時，只能看到一個積木圖示，旁邊有一個三角驚嘆號；
3. 滑鼠移動到剛新增的積木圖示上，圖示旁會出現一排選單，點選拼圖上有鉛筆的圖示進行修改。點選 Point 下拉選單，選中 NodeMCU - CESP-12E LED，最後點選視窗右上角磁碟圖示儲存設定；
4. 接著按下圖示選單的第三個，出現圖示顯示設定的選項。如圖所示，將欄位 Label (when on/true/1) 設為 OFF、Label (when off./false/0) 設為 ON、Height 和 Width 都設為 0（依文字自動調整大小；值若大於 0，就會直接應用到按鈕大小上；
   

依照上面的步驟，就是該人機介面中，所使用的按鈕設定；不過在實際測試的時候您會發現，這個按鈕是無法直接控制 LED 的，因為會被現在的 OpenPLC 程式裡的邏輯抑制住；有疑問的，可以自己試試！

SCADA, 設定 ScadaBR Button (write) Component 組態

---

這一小節 ScadaBR 人機介面的設計，主要就是以上面那三種元件組合而成，其餘的部分請自行依樣畫葫蘆去建立，完成這部分的設計。

*********************************************************************************

下面提供幾個與本小節相關的參考資料：

• ScadaBR 官方資料手冊：Manual ScadaBR English 0 Summary
• Tutorial: Querx and ScadaBR：網頁裡面的操作步驟跟上面的目的一樣，說明得也比這一節的詳細，對於上面操作步驟有所不懂的話，可以去看看！

*********************************************************************************

/*--*//**---/*///**---*-*////***--*/*///***----*///--*/*///**--*/*//**--**/*//
* （04-03）VTScada：

VTScada 的安裝、I/O Tags 和圖形開發介面（人機介面）的建立詳情，請參考部落格另一篇網頁：初試 VTScada - Arduino Nano 485 工控開發板 Modbus-RTU 通訊協議範例。

這一小節用作 VTScada Application 的範例名稱是 "NodeMCU OpenPLC Modbus TCP Demo 01"，請建立它並開啟它。開啟後的畫面如下所示，請點擊 "Overview" 進入 "Overview" 人機介面畫面。

SCADA, VTScada - 01

"Overview"（下圖）所呈現的，是這一節要建立的人機介面完成的樣子，跟上一節 ScadaBR 建立的樣子差不多，也就是著重在文字標籤和狀態指示的組態設定上。

不過，在能開始人機介面的設計前，您必須要先去新增幾個要用到的 Tags，這些 Tags 包括 Driver（用於 Modbus TCP 通訊）、裝置屬性和暫存器地址等...，採階層式的方式建立。

SCADA, VTScada - 02

** （04-03-01）建立 Tags

Tags 是人機介面建立的基礎，VTScada 與 OpenPLC Runtime 兩者以 Modbus TCP 協定相互通訊，因此 Tags 須根據此，由上往下建立，完成之後就如下圖所示。

SCADA, VTScada 建立 Tags - 01

打開 "Tag Browser" 準備建立 Tags。

** （04-03-01-01）新增 TCP/IP Port (Modbus TCP) tag

所有在 VTScada 的 Tags 都是由 \ 根目錄往下層層建立，由於 VTScada 和 OpenPLC Runtime 之間是以 Modbus TCP 協定互相通訊，通訊種類屬於 TCP/IP，所以就從這裡開始建立。

1. Tag 根目錄 \ 點擊滑鼠右鍵，開啟選單；
2. 點選 "New Child"，開啟 Tag 類型選擇視窗；
3. 選擇 "Port"，開啟該群組的細部分類；
4. 選定 "TCP/IP Port"，開啟它的屬性組態設定視窗；
5. 切換到 "ID" 頁簽，設定 TCP/IP Port 的 Tag 名稱 Name 為 Modbus TCP；
6. 切換到 "Connections" 頁簽，設定 TCP/IP Port 的連線名稱或地址 TCP/IP Name/Address 為 127.0.0.1；
7. 按下 "OK" 儲存並新增 Tag；

照著上面設定就可以，除非您有其他的需求，否則其它欄位都是使用預設值即可，毋須再做修改！

SCADA, VTScada 建立 Tags - 02

** （04-03-01-02）新增 Modbus Compatible Device (Modbus TCP\NodeMCU) tag

有了上層 TCP/IP tag 後，下層就可以新增 Modbus TCP 協定 tag。

1. Tag 目錄 Modbus TCP 點擊滑鼠右鍵，開啟選單；
2. 點選 "New Child"，開啟 Tag 類型選擇視窗；
3. 選擇 "Drivers"，開啟該群組的細部分類；
4. 選定 "Modbus Compatible Device"，開啟它的屬性組態設定視窗；
5. 切換到 "ID" 頁簽，設定 TCP/IP Port 的 Tag 名稱 Name 為 Modbus TCP NodeMCU；
6. 切換到 "Options" 頁簽，選擇通訊協定類型 Comm Channel 為 ◉ Open Modbus TCP；
7. 按下 "OK" 儲存並新增 Tag；

照著上面設定就可以，除非您有其他的需求，否則其它欄位都是使用預設值即可，毋須再做修改！

SCADA, VTScada 建立 Tags - 03

** （04-03-01-03）新增 I/O and Calculations tags

上面兩個 Tags 建立之後，也就代表了連接上了 OpenPLC Runtime 的 Slave Devices（現在只有　NodeMCU 一個從裝置）。接下來就可以根據裝置在 OpenPLC Runtime 受分配的暫存器地址，新增要被監控的 DI/DO/AI/AO 點位。

這個部分要新增的點位有三個：一個數位輸入的按鈕和兩個數位輸出的 LED，它們前面的 4 個步驟都一樣：

1. Tag 根目錄 \ 點擊滑鼠右鍵，開啟選單；
2. 點選 "New Child"，開啟 Tag 類型選擇視窗；
3. 選擇 "Digitals"，開啟該群組的細部分類；
4. 選定 "I/O and Calculations (Digital)"，開啟它的屬性組態設定視窗；

SCADA, VTScada 建立 Tags - 04

接下來的 5 ~ 7 步驟設定頁面都一樣，差別在於欄位值的設定，只要照著圖面上的設定就可以。

除非您有其他的需求，否則其它欄位都是使用預設值即可，毋須再做修改！

SCADA, VTScada 建立 Tags - 05

SCADA, VTScada 建立 Tags - 06

**（04-03-02）建立圖形開發介面

下圖是實作範例裡，VTScada 的人機介面設計。人機介面中，只有三個文字標籤和三個狀態指示燈，完成設計後就是 "Overview" 開啟之後的畫面。

我並不打算在這一小節做說明，剩下的只有將圖示與 Tag 做連結而已，沒有什麼複雜的動作！至於詳細的設計步驟，可以參考部落格另一篇網頁裡的 建立圖形開發介面 小節。

SCADA, VTScada 人機介面設計工具

【（05）整體測試】

「打了好機天的字，終於到了整體測試的部份了！」

我拍攝了兩個影片。

第一個是階梯圖的整體測試。影片中您會實際看到，啟動 OpenPLC Runtime 後，每次按下NodeMCU FLASH 按鈕時，Modbus Poll、ScadaBR 和 VTScada 三個軟體的數值和圖示的狀態變化。

第二個影片比較長，是結構化文本程式的整體測試。與第一個影片不同的是，這個影片是從 OpenPLC Editor 撰寫好後開始錄製，在裡面您會看到：

• OpenPLC Editor 產出 OpenPLC Runtime 程式的過程；
• 如何新增和組態 Modbus TCP 從裝置；
• 如何上傳程式到 OpenPLC Runtime；
• 如何新增和組態 ScadaBR Data Sources；
• ... 等；

第二部影片的操作步驟就是撰寫 OpenPLC 程式後，直到能夠執行 SCADA 人接介面的完整流程。

【結論】

本篇沒有很複雜的 OpenPLC 程式，主要的目的是要提供整個 OpenPLC 實作的流程，瞭解了整個過程之後，過程中的細節就是自我要去專研的部分。

.

.

---

<<部落格相關文章>>

• OpenPLC 初體驗 /00/ - OpenPLC Project 簡介
• OpenPLC 初體驗 /01/ - 安裝樹莓派 2/3/4 作業系統（Raspberry Pi OS, Released: 2020-08-20）
• OpenPLC 初體驗 /02/ - 建置開發環境
• OpenPLC 初體驗 /03/ - OpenPLC 階梯圖（LD）和結構化文本程式（ST）實作範例（ESP826 as Modbus Slave Devices）
• OpenPLC 初體驗 /04/ - Raspberry Pi（樹莓派）如何在本地端和遠端受控執行 OpenPLC 程式

.

.