FUXA + WOKWI ESP32 (1)

FUXA 是一款基於 Web 的開源工業視覺化軟體（SCADA/HMI），能讓使用者透過瀏覽器快速搭建工業監控儀表板、連線 PLC 設備與物聯網裝置。

核心操作 5 大步驟

要讓 FUXA 成功運作並顯示數據，請遵循以下核心流程：  

1. 配置設備連線（Devices）

• 點擊介面左側或上方的 Devices（設備）。
• 新增連線並選擇您的通訊協議。FUXA 支援 Modbus RTU/TCP、Siemens S7、OPC UA、MQTT、BACnet 等多種工業與 IoT 協議。
• 輸入設備的 IP 位址、連接埠（Port）或 Broker 資訊。 

2. 建立變數標籤（Tags）

• 在已連線的設備下方建立 Tags。
• 設定標籤名稱，並對應實際設備的記憶體位址（例如 Modbus 的 Holding Register 40001，或 MQTT 的 Topic home/sensor/temp）。
• 設定資料型態（如 INT、FLOAT、BOOLEAN）。 

3. 繪製 HMI 視覺化介面（Views）

• 切換到 Views（視圖）編輯器。
• 利用內建的豐富元件庫，將數值顯示框、儀表板、開關按鈕、趨勢圖表（Charts）、泵浦/風扇圖示拖放至畫布中。 

4. 綁定資料變數（Tag Binding）

• 點擊畫布上的元件（例如一個溫度計圖表）。
• 在右側屬性面板中，找到資料來源設定，並將其綁定（Bind）到您在步驟 2 建立的 Tag。
• 如此一來，當底層設備的數據變動時，網頁圖表就會即時更新。 

5. 設定報警與定時任務（Alarms & Scripts）

• Alarms：可設定當某個 Tag 超過設定值（如溫度 > 80 度）時觸發報警，並記錄在系統中。
• Scripts / Text：支援編寫 JavaScript 邏輯，可用來處理複雜的資料轉換或執行定時任務。

Windows 安裝步驟

1. 前往 Node.js 官方網站。
2. 點擊 LTS 版本的安裝按鈕下載 .msi 檔案。
3. 開啟下載的檔案，依據安裝精靈的指示（一路點擊「Next」或「下一步」）完成安裝。

安裝完成後，開啟您的終端機（Terminal）或命令提示字元（cmd），輸入以下指令檢查版本：

• 檢查 Node.js 是否安裝成功： node -v
• 檢查 npm 是否安裝成功：      npm -v

透過 Node.js (NPM) 安裝

使用 node.js (建議 v18.x) 安裝： 進入cmd 命令模式

1. 安裝環境：執行 npm install -g @frangoteam/fuxa-min。
2. 啟動服務：輸入 fuxa。

要啟動 FUXA，您可以根據您的安裝方式選擇對應的指令：

🖥️ 本地或 Desktop 安裝

1. 執行程式：雙擊桌面 FUXA 圖示，系統會自動啟動後台服務。 [1]
2. 開啟網頁：打開瀏覽器，輸入：
   http://localhost:1881  或 http://127.0.0.1:1881/
3. 預設登入：
   • 帳號：admin
   • 密碼：admin

FUXA設定

WOKWI ESP32 程式

#include <WiFi.h>

#include <PubSubClient.h>

#include <DHT.h>

// Wi-Fi 設定 (Wokwi 虛擬環境專用)

const char* ssid = "Wokwi-GUEST";

const char* password = "";

// MQTT Broker 設定 (使用 EMQX 公共伺服器)

const char* mqtt_server = "broker.emqx.io";

const int mqtt_port = 1883;

// 定義 MQTT 主題 (已更新為 alex9ufo 專屬代稱)

const char* topic_led = "alex9ufo/esp32/led";

const char* topic_temp = "alex9ufo/esp32/temp";

const char* topic_hum = "alex9ufo/esp32/hum";

#define DHTPIN 15

#define DHTTYPE DHT22

#define LED_PIN 2

DHT dht(DHTPIN, DHTTYPE);

WiFiClient espClient;

PubSubClient client(espClient);

unsigned long lastMsg = 0;

void setup_wifi() {

  delay(10);

  Serial.println("\nConnecting to WiFi...");

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }

  Serial.println("\nWiFi connected!");

}

// 接收來自網頁端的指令

void callback(char* topic, byte* payload, unsigned int length) {

  String message = "";

  for (int i = 0; i < length; i++) {

    message += (char)payload[i];

  }

  Serial.print("收到主題 ["); Serial.print(topic); Serial.print("] 的訊息: "); Serial.println(message);

  if (String(topic) == topic_led) {

    if (message == "ON") {

      digitalWrite(LED_PIN, HIGH);

    } else if (message == "OFF") {

      digitalWrite(LED_PIN, LOW);

    }

  }

}

void reconnect() {

  while (!client.connected()) {

    Serial.print("嘗試 MQTT 連線...");

    String clientId = "ESP32Client-" + String(random(0, 10000));

    if (client.connect(clientId.c_str())) {

      Serial.println("已連線!");

      client.subscribe(topic_led); // 訂閱 LED 控制主題

    } else {

      Serial.print("失敗, rc="); Serial.print(client.state());

      Serial.println(" 5秒後重試");

      delay(5000);

    }

  }

}

void setup() {

  Serial.begin(115200);

  pinMode(LED_PIN, OUTPUT);

  dht.begin();

  setup_wifi();

  client.setServer(mqtt_server, mqtt_port);

  client.setCallback(callback);

}

void loop() {

  if (!client.connected()) {

    reconnect();

  }

  client.loop();

  // 每 5 秒定時發送一次溫濕度數據

  unsigned long now = millis();

  if (now - lastMsg > 5000) {

    lastMsg = now;

    float h = dht.readHumidity();

    float t = dht.readTemperature();

    if (!isnan(h) && !isnan(t)) {

      client.publish(topic_temp, String(t).c_str());

      client.publish(topic_hum, String(h).c_str());

      Serial.printf("已上傳 - 溫度: %.1f °C, 濕度: %.1f %%\n", t, h);

    }

  }

}