2026年9月20日 星期日

Easybuilder pro + WOKWI esp32 LED (4Mode on off flash timer)

 Easybuilder pro + WOKWI esp32 LED (4Mode on off flash timer)






本專案實現使用 EasyBuilder Pro (HMI 人機介面) 透過 MQTT 通訊協定 (broker.mqtt-dashboard.com) 遠端控制 Wokwi ESP32 的 Pin 2 LED(包含 ON 常亮、OFF 關閉、FLASH 閃爍、TIMER 5秒計時 四種模式),並實時回傳狀態以點亮 HMI 上對應的指示燈。

系統架構與 JSON 資料格式定義

1. 控制命令 (HMI $\rightarrow$ ESP32)

當點擊 HMI 按鈕時,會發送 JSON 格式訊息:

  • alex9ufo/led1 $\rightarrow$ {"value": true} (開啟 LED / ON)

  • alex9ufo/led2 $\rightarrow$ {"value": true} (關閉 LED / OFF)

  • alex9ufo/led3 $\rightarrow$ {"value": true} (閃爍 LED / FLASH)

  • alex9ufo/led4 $\rightarrow$ {"value": true} (計時 5 秒亮 / TIMER)

2. 狀態回傳 (ESP32 $\rightarrow$ HMI)

當模式切換時,ESP32 會一次性更新 4 個狀態主題,採取互斥原則(當前模式為 true,其餘 3 個為 false):

  • 切換至 ONled1status 發行 {"value": true}led2~4status 發行 {"value": false} $\rightarrow$ LB-11 亮

  • 切換至 OFFled2status 發行 {"value": true}led1,3,4status 發行 {"value": false} $\rightarrow$ LB-12 亮

  • 切換至 FLASHled3status 發行 {"value": true}led1,2,4status 發行 {"value": false} $\rightarrow$ LB-13 亮

  • 切換至 TIMERled4status 發行 {"value": true}led1~3status 發行 {"value": false} $\rightarrow$ LB-14 亮(5 秒後自動切回 OFF 並更新狀態)

第一部分:EasyBuilder Pro 設定與規劃步驟

步驟 1:建立 MQTT 連線設定

  1. 開啟 EasyBuilder Pro,點選上方功能列 【常用】 $\rightarrow$ 【系統參數設定】

  2. 【裝置列表】 頁籤點選 【新增裝置...】

  3. 參數設定:

    • 裝置類型:選擇 MQTT (Client)MQTT Server/Client

    • IP / URLbroker.mqtt-dashboard.com

    • Port1883

    • Client ID:設為不重複字串(例如 HMI_Master_Client

步驟 2:規劃控制按鈕 (LB-1 ~ LB-4)

在 HMI 畫面上拖入 【MQTT 按鈕】【位元按鈕】

按鈕元件發送 MQTT Topic觸發動作 / 發送內容說明
LB-1alex9ufo/led1按下時發送 JSON:{"value": true}ON 按鈕
LB-2alex9ufo/led2按下時發送 JSON:{"value": true}OFF 按鈕
LB-3alex9ufo/led3按下時發送 JSON:{"value": true}FLASH 按鈕
LB-4alex9ufo/led4按下時發送 JSON:{"value": true}TIMER 按鈕

步驟 3:規劃狀態指示燈 (LB-11 ~ LB-14)

拖入 4 個 【位元燈 (Bit Lamp)】 元件:

  1. 雙擊位元燈進入設定,將讀取位址指定為 MQTT 訂閱

  2. 設定 JSON 解析路徑,綁定 value 欄位(當 value == true 時,位元燈顯示為狀態 1/亮起)。

指示燈元件訂閱 MQTT Topic顯示狀態
LB-11alex9ufo/led1statusvalue == true 時點亮(綠燈),false 時熄滅
LB-12alex9ufo/led2statusvalue == true 時點亮(紅燈),false 時熄滅
LB-13alex9ufo/led3statusvalue == true 時點亮(黃燈),false 時熄滅
LB-14alex9ufo/led4statusvalue == true 時點亮(藍燈),false 時熄滅

第二部分:Wokwi ESP32 Arduino 完整程式碼說明

此程式具備以下特點:

  1. 非阻塞式架構 (millis()):閃爍與 5 秒倒數不會卡住 loop(),可隨時接收新指令。

  2. JSON 格式解析:過濾與判斷 {"value": true},若收到 false 則自動忽略。

  3. 狀態互斥發行:每次狀態切換,一次性輸出 4 個 Topic 的 true/false 狀態。

  4. Serial Monitor 日誌:將 WiFi 連線、MQTT 收發主題與內文即時顯示於序列埠監控器。

#include <WiFi.h>
#include <PubSubClient.h>

// WiFi 與 MQTT 設定
const char* ssid = "Wokwi-GUEST";
const char* password = "";
const char* mqtt_server = "broker.mqtt-dashboard.com";

WiFiClient espClient;
PubSubClient client(espClient);

// 引腳定義
const int ledPin = 2;

// 運行模式列舉
enum LedMode { MODE_OFF, MODE_ON, MODE_FLASH, MODE_TIMER };
LedMode currentMode = MODE_OFF;

// 時間控制變數
unsigned long previousMillis = 0;
const long flashInterval = 300; // 閃爍間隔 300ms
unsigned long timerStartMillis = 0;
const long timerDuration = 5000; // 5秒定時
bool flashState = LOW;

// 發送 MQTT JSON 狀態訊息:指定的 activeMode 發行 true,其餘 3 個發行 false
void updateAllStatusTopics(LedMode activeMode) {
  currentMode = activeMode;

  const char* topics[4] = {
    "alex9ufo/led1status", // ON 狀態 (MODE_ON = 1)
    "alex9ufo/led2status", // OFF 狀態 (MODE_OFF = 0)
    "alex9ufo/led3status", // FLASH 狀態 (MODE_FLASH = 2)
    "alex9ufo/led4status"  // TIMER 狀態 (MODE_TIMER = 3)
  };

  LedMode modes[4] = { MODE_ON, MODE_OFF, MODE_FLASH, MODE_TIMER };

  Serial.println("----------------------------------------");
  Serial.print("[狀態更新] 當前啟用模式: ");
  switch(activeMode) {
    case MODE_ON:    Serial.println("ON (常亮)"); break;
    case MODE_OFF:   Serial.println("OFF (關閉)"); break;
    case MODE_FLASH: Serial.println("FLASH (閃爍)"); break;
    case MODE_TIMER: Serial.println("TIMER (5秒計時)"); break;
  }

  // 循環發行 4 個主題的狀態
  for (int i = 0; i < 4; i++) {
    if (modes[i] == activeMode) {
      client.publish(topics[i], "{\"value\":true}");
      Serial.print("[PUB 發行] ");
      Serial.print(topics[i]);
      Serial.println(" -> {\"value\":true}");
    } else {
      client.publish(topics[i], "{\"value\":false}");
      Serial.print("[PUB 發行] ");
      Serial.print(topics[i]);
      Serial.println(" -> {\"value\":false}");
    }
  }
  Serial.println("----------------------------------------");
}

// 解析 JSON 字串是否包含 "value": true 或 "value":true
bool parseJsonValueIsTrue(String msg) {
  msg.replace(" ", "");
  msg.replace("\n", "");
  msg.replace("\r", "");
  msg.toLowerCase();
 
  return (msg.indexOf("\"value\":true") != -1);
}

// MQTT 訊息接收回調函數
void callback(char* topic, byte* payload, unsigned int length) {
  String message = "";
  for (int i = 0; i < length; i++) {
    message += (char)payload[i];
  }
 
  String strTopic = String(topic);
 
  Serial.println();
  Serial.print("[SUB 收到訂閱訊息] Topic: ");
  Serial.print(strTopic);
  Serial.print(" | Payload: ");
  Serial.println(message);

  // 判斷 value 是否為 true,若為 false 或解析失敗則忽略不處理
  if (!parseJsonValueIsTrue(message)) {
    Serial.println(">> value 為 false 或格式無效,忽略不發行。");
    return;
  }

  // 接收到 true 命令時先重置 LED 引腳
  digitalWrite(ledPin, LOW);

  // 切換模式並一次發行 1 個 true 與 3 個 false
  if (strTopic == "alex9ufo/led1") {
    digitalWrite(ledPin, HIGH);
    updateAllStatusTopics(MODE_ON);
  }
  else if (strTopic == "alex9ufo/led2") {
    digitalWrite(ledPin, LOW);
    updateAllStatusTopics(MODE_OFF);
  }
  else if (strTopic == "alex9ufo/led3") {
    updateAllStatusTopics(MODE_FLASH);
  }
  else if (strTopic == "alex9ufo/led4") {
    digitalWrite(ledPin, HIGH);
    timerStartMillis = millis();
    updateAllStatusTopics(MODE_TIMER);
  }
}

void reconnect() {
  while (!client.connected()) {
    Serial.print("正在嘗試連接 MQTT Broker: ");
    Serial.println(mqtt_server);
   
    String clientId = "ESP32Client-" + String(random(0xffff), HEX);
    if (client.connect(clientId.c_str())) {
      Serial.println(">> MQTT 連線成功!");
     
      client.subscribe("alex9ufo/led1");
      client.subscribe("alex9ufo/led2");
      client.subscribe("alex9ufo/led3");
      client.subscribe("alex9ufo/led4");
     
      Serial.println(">> 已成功訂閱主題: alex9ufo/led1 ~ led4");
     
      // 連線成功時預設進入 OFF 狀態,發行 led2status=true,其餘=false
      digitalWrite(ledPin, LOW);
      updateAllStatusTopics(MODE_OFF);
    } else {
      Serial.print(">> 連線失敗, rc=");
      Serial.print(client.state());
      Serial.println(" 5 秒後重試...");
      delay(5000);
    }
  }
}

void setup() {
  Serial.begin(115200);
  delay(500);
 
  Serial.println("\n=== ESP32 MQTT LED 控制系統 (互斥狀態發行模式) ===");

  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);

  Serial.print("正在連接 WiFi: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
 
  Serial.println("\n>> WiFi 連線成功!");
  Serial.print(">> ESP32 IP 位址: ");
  Serial.println(WiFi.localIP());

  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();

  unsigned long currentMillis = millis();

  // 1. FLASH 閃爍模式處理
  if (currentMode == MODE_FLASH) {
    if (currentMillis - previousMillis >= flashInterval) {
      previousMillis = currentMillis;
      flashState = !flashState;
      digitalWrite(ledPin, flashState);
    }
  }

  // 2. TIMER 定時 5 秒模式處理
  if (currentMode == MODE_TIMER) {
    if (currentMillis - timerStartMillis >= timerDuration) {
      Serial.println("\n[TIMER 倒數結束] 5 秒時間到,自動關閉並切換為 OFF 狀態");
      digitalWrite(ledPin, LOW);
      updateAllStatusTopics(MODE_OFF); // 時間到後自動切換為 OFF,更新狀態
    }
  }
}









沒有留言:

張貼留言

Easybuilder pro + WOKWI esp32 LED (4Mode on off flash timer)

 Easybuilder pro + WOKWI esp32 LED (4Mode on off flash timer) 本專案實現使用 EasyBuilder Pro (HMI 人機介面) 透過 MQTT 通訊協定 (broker.mqtt-dashboard.com) ...