FastWeb之ModbusTCP讀取溫濕度

• 適用平臺：WEB(桌面)

1. 說明

  該範例採用Modbus TCP通訊協議，讀取駁接在Arduino上的DHT22溫濕度感測器的數據。Arduino開發板與Ethernet W5100網路擴充套件板的連線方式如下圖所示。

  DHT22 是 DHT 系列的一款應用廣泛的溫濕度感測器。在本範例中，DHT22溫濕度模組的接線方式為正極接入W5100開發板的VCC(5V)引腳，負極接入W5100開發板的(GND)引腳，訊號極(OUT)接入W5100開發板的8號引腳。DHT22的特性如下表所示。

名稱	取值
工作電壓	3V–5.5V
溫度測量範圍	-40℃–80℃
溫度測量精度	0.5℃
濕度測量範圍	0–100% RH
濕度測量精度	2% RH

  通過本範例學習，可以掌握UgModbusTCPClient控制元件的基本設定，並結合Arduino開發板進行DHT22溫濕度感測器的數據採集。

2. 零件連線圖

3. 使用零件

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

4. Arduino流程圖

5. Arduino程式

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

// 使用溫濕度感測器之鏈接庫 https://github.com/adafruit/DHT-sensor-library
// 採用 MyArduinoProjects Modbus TCP 鏈接庫 http://myarduinoprojects.com/modbus.html
// 讀取溫濕度 因為modbus 無法傳遞小數字  所以先乘100 到客戶端取用時要除 100
 
#include <DHT.h>
#include <SPI.h>
#include <Ethernet.h>
#include <MgsModbus.h>                                     // 引入Modbus TCP 鏈接庫
MgsModbus Mb;
 
#define dhtPin 8                    //讀取DHT22 Data
#define dhtType DHT22               //選用DHT22 
#define FAN_PIN 7                   //風扇針腳
#define COOLER_PIN 6               //製冷片針腳
int FanSwitch = 0;
int CoolerSwitch = 0;
DHT dht(dhtPin, dhtType); // Initialize DHT sensor
 
// 設定網路IP地址 (網路擴充卡 MAC 可自行修改 +1 避免衝突)
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x94, 0xB7 };     
IPAddress ip(192, 168, 1, 164);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
 
void setup() {
   Serial.begin(9600);              //設定鮑率9600
   Ethernet.begin(mac, ip, gateway, subnet);               // 啟動網路
   Serial.println("網路已經開通"); 
 
   //設定要使用的快取器地址
   //0 1 2 3 4 是 Holding 快取器的順序,其地址分別是10000,10001,10002,10003,10004
   // 新增快取器   mb.MbData(i);   
   Mb.MbData[0] = 0;            // 地址 0 存放所測得之溫度  
   Mb.MbData[1] = 0;            // 地址 1 存放所測得之濕度
   Mb.MbData[2] = 0;            //地址2 存放風扇狀態
   Mb.MbData[3] = 0;            //地址3 存放製冷器狀態  
   pinMode(FAN_PIN, OUTPUT);    //設定控制位的針腳為輸出模式
   pinMode(COOLER_PIN, OUTPUT);         
   dht.begin();//啟動DHT
 }
 
void loop() {
   float h = dht.readHumidity()*100;                      //讀取濕度 因為modbus 無法傳遞小數字  所以先乘100 到客戶端取用時要除 100
   float t = dht.readTemperature()*100;                   //讀取攝氏溫度
   if (isnan(h) || isnan(t)) {
      Serial.println("無法從DHT感測器讀取！");
      return;
   }
   FanSwitch = Mb.MbData[2];        //讀取風扇的狀態
   CoolerSwitch = Mb.MbData[3];     //讀取製冷器狀態
   if (FanSwitch!=0){
      digitalWrite(FAN_PIN, HIGH);   //風扇針腳輸出為HIGH,啟動
   }
   else{
    digitalWrite(FAN_PIN,LOW);        //風扇針腳輸出為LOW,關閉
   }
   if (CoolerSwitch!=0){
      digitalWrite(COOLER_PIN, HIGH); //製冷器針腳輸出為HIGH,啟動
   }
   else{
    digitalWrite(COOLER_PIN, LOW);    //製冷器針腳輸出為LOW,關閉
   }
   Mb.MbData[0] = t;                                       // 地址 0 存放所測得之溫度  
   Mb.MbData[1] = h;                                       // 地址 1 存放所測得之濕度  
   delay(500);                                             //延時 0.5 秒
   Mb.MbsRun();                                            //呼叫 Modbus   
}

6. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者通過點選[匯入]按鈕選擇模板檔案來打開模板。

  ①：TUgImage元件，控制元件名稱為UgImage01。

  ②：TUgPanel元件，控制元件名稱為UgPanel01。

  ③：TUgLabel元件，控制元件名稱為UgLabel01。

  ④：TUgPanel元件，控制元件名稱為UgPanel02。

  ⑤：TUgLabel元件，控制元件名稱為UgLabel03。

  ⑥：TUgLabel元件，控制元件名稱為UgLabel05。

  ⑦：TUgTimer元件，控制元件名稱為UgTimer01。

  ⑧：TUgImage元件，控制元件名稱為UgSwitchImage01。

  ⑨：TUgLabel元件，控制元件名稱為UgLabel02。

  ⑩：TUgLabel元件，控制元件名稱為UgLabel04。

  (11)：TUgModbusTCPClient元件，控制元件名稱為UgModbusTCPClient01。

  (12)：TUgLabel元件，控制元件名稱為UgLabel06。

• UgWebRunFrame屬性設定

  • Height：設定窗體高度=360。
  • Width：設定窗體寬度=480。

• ①UgImage01屬性設定

  • Align：設定對齊方式=alClient。
  • Stretch：設定畫面拉伸=True。
  • Picture：設定影象（背景）。   點選Picture屬性右側的[√]，打開影象編輯器，點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。

• ②UgPanel01屬性設定

  • Height：設定控制元件高度=50。
  • Width：設定控制元件寬度=300。
  • Caption：設定顯示的字幕內容=ModbusTCP讀取溫濕度。
  • Font.Color：設定字幕的顏色=clWindowText。
  • Font.Size：設定字幕的大小=18。
  • Font.Style.fsBold：設定字型加粗=True。

• ③UgLabel01屬性設定

  • Caption：設定標籤字幕內容=開。
  • Font.Color：設定字幕的顏色=clWhite。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

• ④UgPanel02屬性設定

  • Height：設定控制元件高度=270。
  • Width：設定控制元件寬度=404。
  • Caption：設定顯示的字幕內容=。
  • Color：設定控制元件顏色=clBlack。

• ⑤UgLabel03屬性設定

  • Caption：設定標籤字幕內容=溫度。
  • Font.Color：設定字幕的顏色=clRed。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

• ⑥UgLabel05屬性設定

  • Caption：設定標籤字幕內容=℃。
  • Font.Color：設定字幕的顏色=clWhite。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

• ⑦UgTimer01屬性設定

  • Enabled：設定是否啟用計時器=False。
  • Interval：設定計數器觸發時間的間隔=5000。

• ⑧UgSwitchImage01屬性設定

  • Height：設定控制元件高度=128。
  • Width：設定控制元件寬度=128。   雙擊該控制元件打開圖片編輯界面。點選新增按鈕打開檔案上傳界面。點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。

• ⑨UgLabel02屬性設定

  • Caption：設定標籤字幕內容=關。
  • Font.Color：設定字幕的顏色=clWhite。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

• ⑩UgLabel04屬性設定

  • Caption：設定標籤字幕內容=濕度。
  • Font.Color：設定字幕的顏色=clRed。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

• (11)UgModbusTCPClient01屬性設定

  • AutoConnect：設定是否進行自動連線=False。
  • Host：設定連線的Modbus設備的網路地址，此處設定需與Arduino程式中設定的IP地址一致，比如192.168.1.164。

• (12)UgLabel06屬性設定

  • Caption：設定標籤字幕內容=%RH。
  • Font.Color：設定字幕的顏色=clWhite。
  • Font.Size：設定字幕的大小=24。
  • Font.Style.fsBold：設定字型加粗=True。

7. 程式設定

7.1. 程式初始設定

  該程式無程式初始設定。

7.2. 事件設定

• ⑧UgSwitcImage01-OnSwitch事件

  點選按鈕，顯示開關狀態的影象，同時啟用或者關閉計時器。

//JScript
function ugSwitchImage01OnSwitch(sender)
//開啟、關閉計數器
{
  UgTimer01.Enabled = UgSwitchImage01.IsChecked;
  UgModbusTCPClient01.AutoConnect = UgSwitchImage01.IsChecked;
}

//PasScript
procedure ugSwitchImage01OnSwitch(sender: tobject);
//開啟、關閉計數器
begin
  UgTimer01.Enabled := UgSwitchImage01.IsChecked;
  UgModbusTCPClient01.AutoConnect := UgSwitchImage01.IsChecked;
end;

// Make sure to add code blocks to your code group

• ⑦UgTimer01-OnTimer事件

  計時事件，讀取溫濕度計的讀數並顯示。

//JScript
function UgTimer01OnTimer(sender)
//讀取數值並顯示
{
  var t,h,tmp,hum;
  UgModbusTCPClient01.ReadHoldingRegister(1,t);
  UgModbusTCPClient01.ReadHoldingRegister(2,h);
  tmp = FloatToStr(t * 0.01);
  hum = FloatToStr(h * 0.01);
  UgLabel03.Caption = tmp;
  UgLabel04.Caption = hum;
}

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
//讀取數值並顯示
Var
  tmp: String;
  hum: String;
  t: Integer;
  h: Integer;
begin
  UgModbusTCPClient01.ReadHoldingRegister(1,t);
  UgModbusTCPClient01.ReadHoldingRegister(2,h);
  tmp := FloatToStr(t * 0.01);
  hum := FloatToStr(h * 0.01);
  UgLabel03.Caption := tmp;
  UgLabel04.Caption := hum;
end;

// Make sure to add code blocks to your code group

8. 運行結果

  使用滑鼠點選工具欄儲存到資料庫，然後點選運行（Run），測試運行結果。將圖中的撥桿撥向「開」，數值顯示屏中的溫濕度數據每隔五秒更新一次。