PinToo之MQTT讀取溫濕度

1. 說明

  採用MQTT通訊協議，讀取駁接在Arduino上的DHT22溫濕度感測器的數據。MQTT是由IBM開發的通訊協議，為感測器提供一個輕量可靠的二進制通訊設定，使得開發MQTT與物聯網，機器之間的通訊變得非常簡單。

  TARS中也提供了MQTT服務，使用TARS中的該服務可以實現設備之間的相互連線。在範例中Arduino開發板與Ethernet W5100網路擴充套件板，組裝方式與前述章節相同。溫濕度感測器DHT22，負極接Ethernet W5100擴充套件板的GND針腳，正極接擴充套件板5V針腳，訊號線接擴充套件板D8針腳。

  通過本範例學習，可以掌握fxMQTTClient控制元件的基本使用，並結合Arduino開發板通過MQTT進行溫濕度採集。

2. 零件連線圖

3. 使用零件

序	零件名稱	數量
1	Arduino UNO R3 開發板	1
2	Arduino Ethernet W5100 網路擴充套件板	1
3	DHT22溫濕度 模組	1
4	USB數據線	1
5	麵包板	1
6	杜邦線	若干

4. Arduino流程圖

5. Arduino程式

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

// pubsubclient MQTT 鏈接庫網址  https://github.com/knolleary/pubsubclient
// 使用溫濕度感測器之鏈接庫 https://github.com/adafruit/DHT-sensor-library

#include <DHT.h>
#define dhtPin 8                    //讀取DHT22 Data
#define dhtType DHT22               //選用DHT22 
DHT dht(dhtPin, dhtType);       // Initialize DHT sensor

#include <SPI.h>
#include <Ethernet.h>
// MQTT 宣告 ========================================================
#include <PubSubClient.h>
EthernetClient ethClient;
PubSubClient client(ethClient);


// 設定網路IP地址 (網路擴充卡 MAC 可自行修改 +1 避免衝突)
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x94, 0xB9 };     
IPAddress ip(192, 168, 0, 165);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);

void setup() {
   Serial.begin(9600);                                   //設定通訊速率9600
   dht.begin();                                           //啟動DHT

   //設定 MQTT ========================================================
   client.setServer("192.168.0.176", 1883);                 // 連線 MQTT Broker
   client.setCallback(subscribeReceive);                            // 設定從 MQTT Broker讀取主題之後,自動運行之副程式

   Ethernet.begin(mac, ip, gateway, subnet);               // 啟動網路
   Serial.println("網路已經開通"); 

   delay(1500);
 }

void loop() {
   float h = dht.readHumidity();   //讀取濕度
   float t = dht.readTemperature(); //讀取攝氏溫度
   if (isnan(h) || isnan(t)) {
      Serial.println(" 無法從DHT感測器讀取！");
      return;
   }

  if (!client.connected()) {                              // 如果未聯機 MQTT Broker 將重新聯機
     reconnect();     
  }
   client.loop();
    
   // MQTT 開始運作發送主題 傳送溫濕度到 MQTT Broker
   char tmp[20];
   char hum[20];
   dtostrf(t,3,2,tmp);                 // 將Float 轉換為 char[]
   dtostrf(h,3,2,hum);
   Serial.println(tmp); 
   Serial.println(hum);
   // MQTT 發送主題(溫濕度) =================
   client.publish("TMP", tmp);
   client.publish("HUM", hum);   
   delay(5000);
}

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);
    }
  }
}

void subscribeReceive(char* topic, byte* payload, unsigned int length)
{
  // Print the topic
  Serial.print("Topic: ");
  Serial.println(topic);

  // Print the message
  Serial.print("Message: ");
  for(int i = 0; i < length; i ++)
  {
    Serial.print(char(payload[i]));
  }

  // Print a newline
  Serial.println("");
}

6. 設計明細

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

  ①：TfxWidgetLCDLabel元件，控制元件名稱為fxWidgetLCDLabel1。

  ②：TfxWidgetLCDLabel元件，控制元件名稱為fxWidgetLCDLabel2。

  ③：TfxMQTTClient元件，控制元件名稱為fxMQTTClientDHT22。

  ④：TfxSwitch元件，控制元件名稱為fxSwitchSub。

  ⑤：TfxSwitch元件，控制元件名稱為fxSwitchLog。

• fxRunFrame屬性設定

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

• fxMemoLog屬性設定

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

• ①fxWidgetLCDLabel1屬性設定

  • Height：設定控制元件高度=95。
  • Width：設定控制元件寬度=285。
  • Color：設定背景顏色=Black。

• ②fxWidgetLCDLabel2屬性設定

  • Height：設定控制元件高度=95。
  • Width：設定控制元件寬度=285。
  • Color：設定背景顏色=Black。

• ③fxMQTTClientDHT22屬性設定

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

• ④fxSwitchSub屬性設定

  • Name：設定控制元件名稱=fxSwitchSub。

• ⑤fxSwitchLog屬性設定

  • Name：設定控制元件名稱=fxSwitchLog。

7. 程式設計

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

7.1. 程式初始設定

  程式在啟動時連線MQTT服務端，同時修正顯示屏的樣式。

Begin
  //連線MQTTBroker
  fxMQTTClientDHT22.Connect(false);
  fxWidgetLCDLabel1.Caption.FillOff.Color := NULL;
  fxWidgetLCDLabel2.Caption.FillOff.Color := NULL; 
  fxWidgetLCDLabel1.Caption.Format := '000.00';
  fxWidgetLCDLabel2.Caption.Format := '000.00';
End.

7.2. 事件設定

• ③fxMQTTClientDHT22-OnConnectedStatusChanged事件

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

Procedure fxMQTTClientDHT22OnConnectedStatusChanged(ASender: TObject; AConnected: Boolean; AStatus: TTMSMQTTConnectionStatus);
//返回連線狀態
Begin
   if AConnected then
   begin
     fxMemoLog.Lines.Add('MQTT Broker 連線成功！');
   end
   else
     fxMemoLog.Lines.Add('MQTT Broker 連線超時！');
End;

• ③fxMQTTClientDHT22-OnPublishReceivedUTF8事件

  當接收到訂閱資訊時，處理並顯示。

Procedure fxMQTTClientDHT22OnPublishReceivedUTF8(ASender: TObject; APacketID: Word; ATopic: string; APayload: string);
//新增訂閱資訊
Begin
  if ATopic = 'HUM' Then
  begin
    fxWidgetLCDLabel2.Caption.Value := StrToFloat(APayload);
    fxMemoLog.Lines.Add('濕度：'+APayload+' %');   
  End
  else if ATopic = 'TMP' Then
  begin
    fxWidgetLCDLabel1.Caption.Value := StrToFloat(APayload);
    fxMemoLog.Lines.Add('溫度：'+APayload+' ℃');    
  End;
End;

• ④fxSwitchSub-OnSwitch事件

  訂閱狀態的開關發生變化時，進行訂閱或者取消訂閱的操作。

Procedure fxSwitchSubOnSwitch(Sender: TObject);
//點選以訂閱/取消訂閱溫濕度資訊
Begin
  if fxSwitchSub.IsChecked Then
  //訂閱
  begin   
    fxMQTTClientDHT22.Subscribe('HUM',qosAtMostOnce); //訂閱濕度 HUM 主題
    fxMQTTClientDHT22.Subscribe('TMP',qosAtMostOnce); //訂閱溫度 TMP 主題                     
  End
  else
  //取消訂閱
  begin
    fxMQTTClientDHT22.UnSubscribe('HUM'); //取消訂閱濕度 HUM 主題
    fxMQTTClientDHT22.UnSubscribe('TMP'); //取消訂閱溫度 TMP 主題        
  End;
End;

• ⑤fxSwitchLog-OnSwitch事件

  日誌開關發生變化時，顯示或者隱藏日誌欄。

Procedure fxSwitchLogOnSwitch(Sender: TObject);
//是否顯示日誌
Begin
  if fxSwitchLog.IsChecked Then
  //開啟log界面
    fxMemoLog.Visible := True
  else
  //關閉Log界面
    fxMemoLog.Visible := False;  
End;

8. 運行結果

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

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

  點選顯示日誌與開啟溫濕度訂閱按鈕，將顯示溫度與濕度資訊。