2026年6月14日星期日

Node-Red --> MQTT --> Fuxa

Node-Red --> MQTT --> Fuxa

FUXA（一個開源的 Web HMI / SCADA 自動化監控軟體）的專案設定檔。

這份設定檔完整定義了 HMI 監控畫面的後端通訊（MQTT 連線、點位標籤）與前端網頁圖形介面（SVG 畫布、視窗排版、開關元件）。

以下為您詳細說明這支程式（專案）的核心結構與運作原理：

一、後端通訊與標籤設定 (Devices & Tags)

FUXA 透過這個區塊與外界的物聯網設備或 Node-RED 進行資料交換：

通訊客戶端 (MQTT Client)：
- 專案中配置了一個名為 mqtt1 的通訊介面，連接到公共的 MQTT 代理伺服器（Broker）：mqtt://mqttgo.io:1883。
- 系統內建了一個系統標籤 mqtt1 Connection Status，用來監測此 MQTT 連線是否正常。
點位標籤 (Tags Mapping)：專案中定義了 4 個與前端元件連動的按鈕標籤（Tags），其對應的 MQTT 主題 (Topic) 分別為：
- button1 ➔ 訂閱與發送主題：alex9ufo/btn/1/set
- button2 ➔ 訂閱與發送主題：alex9ufo/btn/2/set
- button3 ➔ 訂閱與發送主題：alex9ufo/btn/3/set
- button4 ➔ 訂閱與發送主題：alex9ufo/btn/4/set
當前端畫面上的開關被切換，或是遠端設備透過這些主題發送數據時，FUXA 都會進行雙向的同步更新。

二、前端圖形視覺介面 (Views & UI Components)

這部分定義了操作員在瀏覽器畫面上看見的 SCADA / HMI 控制面板：

畫布與主視覺設定 (Views)：
- 建立了一個名為 v_67ba4a88 的中大型監控畫面（寬 1520 像素、高 850 像素）。
- 背景顏色設定為帶有科技感的深灰色（#2A2A2A），非常符合工業自動化控制台的暗色系風格。
前端圖形元件 (SVG Elements)：畫面上配置了數個基於 SVG 向量圖形的動態控制元件，包含：
- 文字與排版：包含了標題文字，並使用特定字型（如 Arial）與色彩配置。
- 互動式切換開關 (NGX-SWITCH)：畫面上擺放了對應按鈕的網頁開關切換元件。
  - 當開關處於關閉狀態時，畫面上會渲染出紅色、並顯示 "OFF" 字樣的圓形按鈕。
  - 這些開關元件在 HTML/SVG 結構中被賦予了特定的 id，並直接與後端的 button1 ~ button4 標籤進行綁定（Binding）。

三、專案整體運作邏輯

這份設定檔在 FUXA 系統中啟動後，會實現以下物聯網（IoT）雙向控制情境：

下達控制指令（發送端）：當操作員在瀏覽器打開這個 FUXA HMI 網頁，手動點擊畫面上的開關由 OFF 變更為 ON 時，FUXA 會立刻透過 mqttgo.io 伺服器，向 alex9ufo/btn/x/set 主題發送變更訊號，藉此操控遠端的實體設備（如 PLC 或 ESP32 開發板）。
接收設備狀態（接收端）：如果遠端實體設備的狀態改變（例如由現場按鈕觸發），設備會發送最新的狀態到相同的 MQTT 主題，FUXA 收到通知後，網頁畫面上的紅色 "OFF" 開關就會自動跳轉為 ON 的狀態，達到即時監控的效果。

總結

這是一個非常標準的 Web-based HMI/SCADA（網頁型人機介面）專案設定。它利用 FUXA 的視覺化優勢，結合 MQTT 輕量化通訊協定，為管理員提供了一個跨平台、直覺且具備動態反饋的遠端設備控制面板。

Node-RED 的流程設定檔（Flows）。它的核心功能是建立一個網頁圖形介面（Dashboard），讓使用者可以用來遠端控制 4 個虛擬按鈕，並將控制指令透過 MQTT 物聯網通訊協定發送出去，用以控制現場的實體設備（如 HMI 系統 FUXA、PLC 或 LED 燈）。

以下為您詳細拆解這段程式的運作邏輯與各個節點的功能：

1. 核心運作邏輯（運作流程）

這段程式主要分為兩大邏輯區塊：

【發送控制端】網頁開關 ➔ 發送 MQTT 指令： 當使用者在 Node-RED 網頁上切換「遠端控制按鈕」時，程式會根據開關狀態（開啟/關閉），透過 MQTT 發送數字 1 或 0 到雲端 MQTT 伺服器，用來設定遠端設備。
【接收監聽端】監聽 MQTT ➔ 偵錯輸出： 程式另外拉出了一條線，專門監聽控制按鈕 1 的主題（Topic）。只要該主題有任何資料變動，就會在 Node-RED 的後台偵錯視窗（Debug）印出數值，方便開發者確認指令是否有成功送出。

2. 節點詳細功能說明

⓵ 使用者介面（UI Dashboard 節點）

ui_tab (工業物聯網控制台) & ui_group (現場設備控制 (4按鈕))：在網頁上建立一個名為「工業物聯網控制台」的頁面，並在裡面規劃了一個寬度為 5 的區塊，專門擺放這 4 個按鈕。
ui_switch (UI 控制按鈕 1 ~ 4)：這是網頁上的 4 個切換開關（Switch）。
- 當切換到 ON (開啟)：會送出數值 1 (onvalue": "1")。
- 當切換到 OFF (關閉)：會送出數值 0 (offvalue": "0")。
- 每個按鈕都有自己獨立的 topic（分別為 "1", "2", "3", "4"），代表它們的編號。

⓶ 雲端通訊（MQTT 節點）

mqtt-broker (mqttgo)：這是通訊的基礎設定。這段程式使用了一個免費公開的 MQTT 伺服器，網址為 mqttgo.io，通訊連接埠為 1883。
mqtt out (發送控制指令至 FUXA)：當網頁按鈕被觸發時，這四個節點會負責把 1 或 0 打向雲端伺服器，它們發送的 MQTT 主題 (Topic) 分別為：
- 按鈕 1 ➔ alex9ufo/btn/1/set
- 按鈕 2 ➔ alex9ufo/btn/2/set
- 按鈕 3 ➔ alex9ufo/btn/3/set
- 按鈕 4 ➔ alex9ufo/btn/4/set (註：名稱中的 FUXA 代表這些指令預期是要給一個叫做 FUXA 的 Web HMI/SCADA 自動化監控軟體接收並執行的。)

⓷ 監聽與除錯（MQTT In & Debug 節點）

mqtt in 節點：獨立監聽了 alex9ufo/btn/1/set（按鈕 1）的主題。當任何地方（不論是網頁端或外部實體設備）更改了按鈕 1 的數值，它都會接收到。
debug (debug 392) 節點：接收到 mqtt in 的資料後，直接顯示在 Node-RED 介面右側的 Debug 欄位中，用來即時觀測按鈕 1 的狀態變化。

總結

這是一段非常標準的 IoT 設備雙向通訊/控制雛形。使用者只要啟動這個 Node-RED 流程，開啟網頁瀏覽器，就可以直接點擊畫面上的 4 個開關，透過雲端的 mqttgo.io 伺服器，對遠端的工業設備或微控制器（如 ESP32、PLC）進行開關（0與1）控制。

2026年6月10日星期三

2026年6月9日星期二

ModBus + Fuxa + MQTT

ModBus + Fuxa + MQTT

這是一個非常實用且經典的工業物聯網（IIoT）與數據可視化架構。在這個架構中，Modbus Poll 負責模擬底層工業設備（如 PLC、感測器），MQTT Broker 擔任資料交換的中台，而 FUXA 則是一套開源的 Web-based SCADA 系統，負責將資料抓回並進行動態網頁監控。

為了讓這個通訊範例能夠順利運作，我們將架構設計如下：

Modbus Poll (設備端) ──[Modbus TCP]──> FUXA (SCADA中心) ──[MQTT]──> MQTT Broker (雲端/中台)

以下為您規劃完整的環境建置與通訊設計步驟：

1. 環境準備與軟體設定

請確保您的電腦上已安裝或準備好以下軟體：

Modbus Poll：用於模擬 Modbus TCP Slave（伺服器）或 Master。在本範例中，我們將其設定為 Modbus TCP Slave（模擬一台 PLC）。
MQTT Broker：可以使用公用的 Broker（例如 broker.hivemq.com），或在本地端用 Docker 運行 Mosquitto。
FUXA：確認已啟動 FUXA 服務（通常透過 Node.js 或 Docker 執行，瀏覽器輸入 http://localhost:1881 進入畫面）。

2. 第一階段：Modbus Poll 設定 (模擬工業設備)

我們首先讓 Modbus Poll 模擬一個內含溫度與濕度資料的智能感測器。

步驟 A：建立暫存器

打開 Modbus Poll，點選選單的 Setup -> Read/Write Definition。
設定如下：
- Slave ID: 1
- Function: 03 Read Holding Registers (4x)
- Address: 0 (從 0 開始)
- Quantity: 10 (讀取 10 個暫存器)
點擊 OK。

步驟 B：啟動 Modbus TCP 伺服器

點選選單的 Connection -> Connect...。
在 Connection 下拉選單選擇 Modbus TCP/IP Server。
TCP Server Port: 預設 502（如果權限衝突，可改為 5020）。
點擊 OK 啟動監聽。

ModbusTCPTool

Modbus TCP test tool, support server and client mode, support 4 types of registers, client support regular reading data, data support hexadecimal, binary and other

步驟 C：模擬數據輸入

在編號 40001 (Address 0) 與 40002 (Address 1) 的格子點兩下，分別手動輸入數值：

40001 (Address 0): 輸入 25 (模擬溫度 $25^\circ\text{C}$ )
40002 (Address 1): 輸入 60 (模擬濕度 $60\%$ )

3. 第二階段：FUXA 設定 (SCADA 核心)

FUXA 在這裡扮演雙重角色：它既要透過 Modbus TCP 向 Modbus Poll 讀取資料，又要透過 MQTT 將資料 發布（Publish） 出去。

步驟 A：新增 Modbus TCP 驅動連線

打開 FUXA 網頁控制台，切換到 Configuration (設定) 頁面。
在 Devices 區塊點擊 + Add device。
設定參數：
- Name: Modbus_PLC
- Type: Modbus TCP
- Host: 127.0.0.1 (若在同一台電腦)
- Port: 502 (需與 Modbus Poll 設定一致)
- Slave ID: 1
點擊儲存，確認連線狀態顯示為綠色（Connected）。

步驟 B：在 FUXA 中建立標籤 (Tags)

在剛剛建立的 Modbus_PLC 設備下新增兩個 Tags：

溫度標籤 (Temperature)
- Name: Temperature
- Address: 40001 (或根據 FUXA 格式輸入 F40001 或數值類型，通常選 Int16)
濕度標籤 (Humidity)
- Name: Humidity
- Address: 40002

此時在 FUXA 的 Tag 列表中，應該就能即時看到從 Modbus Poll 傳過來的 25 與 60。

步驟 C：新增 MQTT 連線 (轉發數據)

在 FUXA 的 Devices 或 Connectivity 區塊（依版本不同），點擊 + Add device/client 並選擇 MQTT。
設定參數：
- Name: MQTT_Broker
- URL: mqtt://broker.hivemq.com:1883 (此處以公共測試 Broker 為例)
- Client ID: 可自訂（如 FUXA_Gateway_01）
儲存並確認連線成功。

步驟 D：設定 Tag 的 MQTT 發布功能

編輯剛剛建立的 Temperature 標籤。
找到 Publish 或 MQTT Export 相關設定。
啟用發布，並指定 Topic：
- Topic: factory/sensor01/temperature
同理，將 Humidity 標籤設定發布至：
- Topic: factory/sensor01/humidity

4. 第三階段：MQTT 軟體驗證 (接收端)

為了驗證數據是否成功經由 FUXA 轉發至 MQTT 網路，我們可以使用任意 MQTT 客戶端軟體（例如 MQTTX、MQTT Explorer 或 Advanced REST Client）來進行訂閱（Subscribe）。

打開您的 MQTT 軟體，連線至與 FUXA 相同的 Broker：
- Host: broker.hivemq.com
- Port: 1883
建立連線後，新增一個訂閱主題（Subscription）：
- Topic: factory/sensor01/# （使用萬用字元 # 可以同時接收該路徑下的所有資料）
驗證結果：
您將會在 MQTT 軟體的接收視窗中，看見定時推送過來的 JSON 格式或純文字訊息，例如：
JSON
{ "value": 25, "timestamp": 1780000000000 }

5. 通訊測試與連動驗證

當整體架構打通後，您可以進行以下測試來驗證通訊的即時性：

回到 Modbus Poll 軟體，將 40001 的數值從 25 修改為 28。
查看 FUXA 的畫面，確認其畫面上顯示的 Temperature 標籤數值已同步變更為 28。
查看 MQTT 軟體，確認收到一筆新的 Payload，其數值已更新為 28。

透過這個範例，您成功實作了工業現場總線（Modbus）到物聯網雲端協定（MQTT）的數據整合，這也是當前工業 4.0 智慧工廠最核心的通訊架構之一。

Node-Red +SQLite <範例2>

直接共用原本的 student.db 設定，不需建立新資料庫檔案。

這份 JSON 程式碼構建了系統的 「第二部分：學生成績管理系統」。它與第一部分（學生資料系統）共享同一個 SQLite 資料庫檔案 student.db，並透過經典的 Node-RED Dashboard 元件，完美實現了前端數據收集、動態 SQL 拼接與後端關聯式資料庫的互動。

以下為您詳細拆解這段程式的架構與運作邏輯：

🏗️ 一、前端網頁佈局 (UI Dashboard)

這段 Flow 同樣利用 Grid（網格）系統將網頁畫面精準地切分為三個區塊，維持系統操作的一致性：

左側輸入區 (ui_grp_grade_left_form_v6，寬度 8)： 包含 3 個核心元件：一個下拉選單（選擇國文、英文或數學）與兩個文字輸入框（學號、分數）。
右側按鍵區 (ui_grp_grade_right_btn_v6，寬度 4)： 垂直排列 5 個功能實體按鈕（建立成績表、同步名單、登記/更正、結算顯示、單生查詢）。
下方大面板 (ui_grp_grade_bottom_table_v6，寬度 12)： 放置一個 7 欄位的表格元件 (ui_table)，用來完整呈現包含姓名與計算結果的成绩單。

🔄 二、數據流程與暫存機制

與第一部分相同，為了避免使用者每打一個字就去衝擊資料庫，系統採用了「非同步暫存」設計：

當使用者在網頁左側操作「選擇科目」、「輸入學號」或「輸入分數」時，這三個節點會將各自的數值發送到 「即時暫存成績欄位資料」（Change 節點）。
Change 節點會以各自的 msg.topic（selected_subject、student_id、score）作為鑰匙，將數值存入 Node-RED 的記憶體環境變數 flow.grade_form 中。
同時，它會將資料複製一份送往右上方的 「debug 391」 節點，方便您在除錯視窗即時監看目前輸入的暫存內容是否正確。

🧠 三、核心 Function 邏輯解析 (`func_grade_core_v6`)

當使用者點擊右側 5 個按鈕中的任意一個時，按鈕會發送專屬的 msg.topic 指令（如 ADD、UPDATE_GRADE 等）進入大腦 Function 節點。

Function 節點會從記憶體中取出暫存的科目、學號與分數，並根據點擊的按鈕執行 switch(action) 進行 SQL 字串拼接。以下是各個按鍵觸發的 SQL 邏輯：

鍵 1：建立成績資料表 (`CREATE_GRADE_TABLE`)

SQL
CREATE TABLE IF NOT EXISTS grades (
    student_id TEXT PRIMARY KEY,
    chinese REAL DEFAULT 0,
    english REAL DEFAULT 0,
    math REAL DEFAULT 0,
    total REAL GENERATED ALWAYS AS (chinese + english + math),
    average REAL GENERATED ALWAYS AS ((chinese + english + math) / 3.0),
    FOREIGN KEY(student_id) REFERENCES students(student_id) ON DELETE CASCADE
);

說明： 這裏完美應用了您指定的 SQLite 進階技術。total 與 average 欄位被設定為 GENERATED ALWAYS AS（產生欄位）。這代表總分與平均完全不需要寫程式去計算，SQLite 驅動層會在分數寫入的瞬間自動在底層算好。

鍵 2：從學生系統同步(匯入)名單 (`SYNC_STUDENTS`)

SQL
INSERT OR IGNORE INTO grades (student_id) SELECT student_id FROM students;

說明： 這行指令解決了「名單必須由第一系統取得」的需求。它會直接去學生基本資料表（students）把所有人的學號撈出來並倒進成績表（grades）中。使用 INSERT OR IGNORE 可以確保重複點擊時不會因為主鍵衝突而報錯。

鍵 3：登記 / 更正該科成績 (`UPDATE_GRADE`)

JavaScript
msg.topic = "UPDATE grades SET " + subject + " = " + score + " WHERE student_id = '" + student_id + "';";

說明： 這裏實現了「一科目一科目連續輸入」的設計。程式會動態讀取變數 subject 的值（chinese、english 或 math），並動態拼接成 SQL 欄位。
範例： 如果您選了國文，輸入學號 DB112203，分數 95，拼接出來就是： UPDATE grades SET chinese = 95 WHERE student_id = 'DB112203'; 因為 score 提取出來後是數字，所以拼接時它很聰明地沒有包單引號；而學號是文字，兩側確實包了單引號 '${student_id}'。

鍵 4 & 鍵 5：結算顯示與單生查詢 (`DISPLAY_ALL_GRADES` / `QUERY_GRADE`)

SQL
SELECT g.student_id, s.name AS name, g.chinese, g.english, g.math, g.total, ROUND(g.average, 2) AS average 
FROM grades g 
LEFT JOIN students s ON g.student_id = s.student_id

說明（核心技術）： 因為成績表本身只存儲學號，不存姓名。為了動態得到姓名，這裏使用了 LEFT JOIN students s ON g.student_id = s.student_id（左外部連接）。
它會實時（Real-time）根據學號去第一部分的基本資料表撈出對應的 name（姓名），並利用 ROUND(g.average, 2) 將平均分數四捨五入到小數點後兩位。

🗄️ 四、後端執行與前端表格顯示

SQLite 成績庫節點 (sqlite_node_grade_v6)： 其 SQL Type 設定為 via msg.topic（即 sqlquery: "msg.topic"），它會死死接收前面 Function 拼接好的純文字 SQL 命令並直接送入 student.db 執行。
學生成績大面板 (ui_table_grade_v6)： 當執行查詢或顯示所有時，SQLite 回傳的 7 欄位數據（學號、姓名、國文、英文、數學、總分、平均分數）會精準流入表格元件。因為表格內部設定的欄位 Key（field: "name", field: "total" 等）與 SQL 查詢出來的別名完全對齊，畫面便能毫無時差地渲染出一張精美的成績大報表。

訂閱：文章 (Atom)

2026年6月14日 星期日

Node-Red --> MQTT --> Fuxa

一、 後端通訊與標籤設定 (Devices & Tags)

二、 前端圖形視覺介面 (Views & UI Components)

三、 專案整體運作邏輯

總結

1. 核心運作邏輯（運作流程）

2. 節點詳細功能說明

⓵ 使用者介面（UI Dashboard 節點）

⓶ 雲端通訊（MQTT 節點）

⓷ 監聽與除錯（MQTT In & Debug 節點）

總結

2026年6月10日 星期三

2026年6月9日 星期二

ModBus + Fuxa + MQTT

1. 環境準備與軟體設定

2. 第一階段：Modbus Poll 設定 (模擬工業設備)

步驟 A：建立暫存器

步驟 B：啟動 Modbus TCP 伺服器

ModbusTCPTool

步驟 C：模擬數據輸入

3. 第二階段：FUXA 設定 (SCADA 核心)

步驟 A：新增 Modbus TCP 驅動連線

步驟 B：在 FUXA 中建立標籤 (Tags)

步驟 C：新增 MQTT 連線 (轉發數據)

步驟 D：設定 Tag 的 MQTT 發布功能

4. 第三階段：MQTT 軟體驗證 (接收端)

5. 通訊測試與連動驗證

Node-Red +SQLite <範例2>

🏗️ 一、 前端網頁佈局 (UI Dashboard)

🔄 二、 數據流程與暫存機制

🧠 三、 核心 Function 邏輯解析 (func_grade_core_v6)

鍵 1：建立成績資料表 (CREATE_GRADE_TABLE)

鍵 2：從學生系統同步(匯入)名單 (SYNC_STUDENTS)

鍵 3：登記 / 更正該科成績 (UPDATE_GRADE)

鍵 4 & 鍵 5：結算顯示與單生查詢 (DISPLAY_ALL_GRADES / QUERY_GRADE)

🗄️ 四、 後端執行與前端表格顯示

Node-Red --> MQTT --> Fuxa

2026年6月14日星期日

一、後端通訊與標籤設定 (Devices & Tags)

二、前端圖形視覺介面 (Views & UI Components)

三、專案整體運作邏輯

2026年6月10日星期三

2026年6月9日星期二

🏗️ 一、前端網頁佈局 (UI Dashboard)

🔄 二、數據流程與暫存機制

🧠 三、核心 Function 邏輯解析 (`func_grade_core_v6`)

鍵 1：建立成績資料表 (`CREATE_GRADE_TABLE`)

鍵 2：從學生系統同步(匯入)名單 (`SYNC_STUDENTS`)

鍵 3：登記 / 更正該科成績 (`UPDATE_GRADE`)

鍵 4 & 鍵 5：結算顯示與單生查詢 (`DISPLAY_ALL_GRADES` / `QUERY_GRADE`)

🗄️ 四、後端執行與前端表格顯示