PinToo之MQTT控制LED燈

1. 說明

  範例採用MQTT通訊協議，控制駁接在Arduino上的LED燈。MQTT是由IBM開發的通訊協議，為感測器提供一個輕量可靠的二進制通訊設定，使得開發MQTT與物聯網，機器之間的通訊變得非常簡單。

  TARS中也提供了MQTT服務，使用TARS中的該服務可以實現設備之間的相互連線。範例中的LED燈連正極(長腳)處連線電阻再連線到Ethernet W5100擴充套件板的D8針腳，LED燈負極連線到擴充套件板的GND針腳，以下介紹如何利用MQTT通訊協議，達到控制的目的。

  通過範例學習，可以掌握fxMQTTClient控制元件的基本使用，並結合Arduino開發板通過MQTT進行LED燈的控制功能。

2. 零件連線圖

3. 使用零件

序	零件名稱	數量
1	Arduino UNO R3 開發板	1
2	Arduino Ethernet W5100 網路擴充套件板	1
3	USB數據線	1
4	麵包板	1
5	杜邦線	若干
6	LED燈	1
7	220歐姆電阻	1
8	網線	1

4. Arduino流程圖

5. Arduino程式

  使用Arduino IDE 編譯並上傳以下Arduino程式。

// pubsubclient MQTT 程式庫  https://github.com/knolleary/pubsubclient
 
#include <SPI.h>
#include <Ethernet.h>
// MQTT 宣告 ========================================================
#include <PubSubClient.h>
EthernetClient ethClient;
PubSubClient client(ethClient);
 
#define LED_PIN 8                                         //定義LED針腳為8
#define STRING_LEN 128
 
// 設定網路IP地址 (網路擴充套件卡的 MAC 可自行修改 +1 以避免衝突)
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x94, 0xB7 };     
IPAddress ip(192, 168, 0, 163);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);
 
void setup() {
   Serial.begin(9600);
   Ethernet.begin(mac, ip, gateway, subnet);               // 啟動網路
   Serial.println("網路已啟動"); 
  //設置 MQTT ========================================================
  client.setServer("192.168.0.176", 1883);                 // 連線MQTT Broker
  client.setCallback(callback);                            // 設定從 MQTT Broker讀取主題之後，運行子程式。
  if (client.connected()) {                                // 如果已經連線 MQTT Broker
    client.subscribe("#");                                 // 自動接收來自 192.168.1.13 MQTT Broker 所有主題資訊
  }
   delay(1500);
   pinMode(LED_PIN, OUTPUT);                               //設定針腳8為輸出模式
}
 
void loop() {
  // MQTT 開始運行接收主題
  if (!client.connected()) {                               // 如果MQTT Broker不通,將重新連線
     reconnect();
  }
  client.loop();
 }
 
// 接收MQTT主題后呼叫運行程式
void callback(char* topic, byte* payload, unsigned int length) {
  String mapre01;                                       // 預定接收的主題1     /LED
  String mapres;                                        // 實際從 MQTT Broker 接收到的主題
  String information;                                   // 實際從 MQTT Broker 接收到的主題內容
  String LEDOpen="1"; 
  //將 char[] 轉為 String charToStringL(需轉換的 Char陣列, 轉換后的 String)
 
  mapre01 = "LED";                                      //LED 的主題 
  charToStringL(topic, mapres);                         //實際從 MQTT Broker 接收到的主題
  for (int i = 0; i < length; i++) {                    //轉換 MQTT Broker 接收到的主題內容為字串
    information = information + (char)payload[i];
  }
  if (mapres != mappu01) {                              // 不顯示發佈的主題
     Serial.print("接收訊息 " + mapres + " [");
     Serial.print(information);
     Serial.print("] ");
  }
 
  if (mapres == mapre01) {
    if (information == LEDOpen) {                
      Serial.println("打開 LED");
      digitalWrite(LED_PIN, HIGH);                      //PIN 8輸出高電平,LED點亮
    }
    else {
      Serial.println("關閉 LED");
      digitalWrite(LED_PIN, LOW);                       //PIN 8輸出低電平,LED熄滅
    }
  }
  delay(500);                                           //延時500ms
  Serial.println();
}
 
void reconnect() {
  // 一直循環直到連線上 MQTT Broker
  while (!client.connected()) {
    Serial.print("正在連線 MQTT Broker...");
    if (client.connect("arduinoClient")) {
      Serial.println("MQTT Broker 已經連線上");
      client.subscribe("#");
    } else {
      Serial.print("連線失敗, rc=");
      Serial.print(client.state());
      Serial.println("五秒之後再進行連線");
      delay(5000);
    }
  }
}
 
//將 char[] 轉為 String 自定函式
void charToStringL(const char S[], String & D)
{
  byte at = 0;
  const char *p = S;
  D = "";
 
  while (*p++) {
    D.concat(S[at++]);
  }
}

6. 設計明細

  開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]選擇模板檔案來打開對應模板。

  ①：TfxSwitchButton元件，控制元件名稱為fxSwitchButton3。

  ②：TfxSwitchButton元件，控制元件名稱為fxSwitchButton2。

  ③：TfxSwitchButton元件，控制元件名稱為fxSwitchButton1。

  ④：TfxMemo元件，控制元件名稱為fxMemoMsg。

  ⑤：TfxMQTTClient元件，控制元件名稱為fxMQTTClientLED。

• fxRunFrame屬性設定

  • Height：設定頁面高度=800。
  • Width：設定頁面寬度=401。

• ①fxSwitchButton3屬性設定

  • Height：設定控制元件高度=45。
  • Width：設定控制元件寬度=50。

• ②fxSwitchButton2屬性設定

  • Height：設定控制元件高度=200。
  • Width：設定控制元件寬度=200。
  • HitTest：是否響應點選操作，設定為False。
  • SwitchOffBmp：設定開關狀態為關時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

  • SwitchOnBmp：設定開關狀態為開時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

• ③fxSwitchButton1屬性設定

  • Height：設定控制元件高度=200。
  • Width：設定控制元件寬度=200。
  • SwitchOffBmp：設定開關狀態為關時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

  • SwitchOnBmp：設定開關狀態為開時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

• ④fxMemoMsg屬性設定

  • Height：設定控制元件高度=105。
  • Width：設定控制元件寬度=335。
  • Visible：設定控制元件是否可見=False。
  • Name：設定控制元件名稱=fxMemoMsg。

• ⑤fxMQTTClientLED屬性設定

  • BrokerHostName：設定MQTT服務端的地址，此處設定與Arduino中指定的一致，如192.168.0.176。
  • BrokerPort：設定MQTT服務端的埠，此處設定與Arduino中指定的一致，如1883。
  • Name：設定控制元件名稱=fxMQTTClientLED。

7. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式需要引用 TMSMQTTConnection 、 TMSMQTTClient 、TMSMQTTGlobal 單元。

7.1. 程式初始設定

  程式啟動時，啟動MQTT連線。

Begin
  //連線MQTTBroker
  fxMQTTClientLED.Connect(false);
End.

7.2. 事件設定

• ①fxSwitchButton3-OnSwitch事件

  點選以切換日誌欄的顯示隱藏。

Procedure fxSwitchButton3OnSwitch(Sender: TObject);
//顯示日誌
Begin
  fxMemoMsg.Visible := fxSwitchButton3.IsChecked;
End;

• ③fxSwitchButton1屬性設定

  點選以發送MQTT訂閱訊息，控制LED燈開關。

Procedure fxSwitchButton1OnSwitch(Sender: TObject);
//點選以切換狀態
Begin
  if fxSwitchButton1.IsChecked Then
  //打開LED
  begin
    fxMQTTClientLED.Publish('LED','1',qosAtMostOnce,false);
    fxRDToastMessage1.ShowToastMessage('LED燈已開啟',2.0,100);
    fxSwitchButton2.IsChecked := True;         
  End
  else
  //關閉LED
  begin
    fxMQTTClientLED.Publish('LED','0',qosAtMostOnce,false);
    fxRDToastMessage1.ShowToastMessage('LED燈已關閉',2.0,100);
    fxSwitchButton2.IsChecked := False; 
  End;
End;

• ⑤fxMQTTClientLED-OnConnectedStatusChanged事件

  當連線狀態發生變化時，在日誌欄顯示相關資訊。

Procedure fxMQTTClientLEDOnConnectedStatusChanged(ASender: TObject; AConnected: Boolean; AStatus: TTMSMQTTConnectionStatus);
//狀態變化時觸發事件
Begin
  if AConnected then
  begin
    fxMemoMsg.Lines.Add('MQTT Broker 連線成功！');
    fxMQTTClientLED.Subscribe('LED',qosAtMostOnce);
  end
  else
    fxMemoMsg.Lines.Add('MQTT Broker 連線超時！');
End;

• ⑤fxMQTTClientLED-OnPublishReceivedUTF8事件

  當接收到訂閱資訊時，在日誌欄進行顯示。

Procedure fxMQTTClientLEDOnPublishReceivedUTF8(ASender: TObject; APacketID: Word; ATopic: string; APayload: string);
//fxMQTTClientLED 控制元件 OnPublishReceivedA 事件（發佈收到的內容）
Begin
  if APayload='1' Then
    fxMemoMsg.Lines.Add(ATopic+'->開')
  else
    fxMemoMsg.Lines.Add(ATopic+'->關');
End;

8. 運行結果

  使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

  點選日誌下方的開關按鈕打開日誌，點選控制區的開關按鈕，開關點亮，狀態顯示區的燈點亮，Arduino的LED燈點亮；再次點選控制區的按鈕，開關熄滅，狀態顯示區的燈熄滅，Arduino的LED燈熄滅。日誌欄中記錄了MQTTLED燈主題狀態資訊。