ModbusTCP控制LED燈(WEB)

# FastWeb ModbusTCP控制LED燈

適用平臺：WEB(桌面)

# 1. 說明

採用ModbusTCP通訊協議，控制駁接在Arduino上的LED燈。ModbusTCP使用電腦來指定特定IP地址下的ModbusTCP從機，從而控制該從機。本範例中使用Arduino開發板與Ethernet W5100網路擴充套件板，組合稱ModbusTCP從機。其工作方式如下：

PC設備(ModbusTCP主機)通過ModbusTCP通訊協議傳送指令給指定的IP地址，該地址下對應一個ModbusTCP從機，要求打開連線該從機的LED燈，從機收到主機指令後會自動解碼，接著完成ModbusTCP主機所指派的工作，開啟LED燈。

範例中LED燈正極(針腳較長的一端)連線到電阻，再連線到Ethernet W5100的D8針腳，LED燈的負極連線到擴充套件板的GND針腳。

通過本範例學習，可以掌握ModbusTCP元件基本屬性配置，向Modbus設備寫入數據的使用，並結合Arduino開發板進行LED燈的控制功能。

# 2. 零件連線圖

# 3. 使用零件

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

Arduino開發板與Ethernet W5100網路擴充套件板組裝完成後的外觀如下圖所示。

# 4. Arduino流程圖

# 5. Arduino程式

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

// 採用 MyArduinoProjects Modbus TCP 鏈接庫
// http://myarduinoprojects.com/modbus.html
#include <SPI.h>
#include <Ethernet.h>

#include "MgsModbus.h"                                //引入Modbus TCP 鏈接庫
MgsModbus Mb;

// 設定網路 (網路擴充卡 MAC 可自行修改 +1 避免衝突)
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x94, 0xB6 };     //設定Arduino設備的網絡卡MAC地址
IPAddress ip(192, 168, 1, 162);     //設定Arduino設備的網路IP地址
IPAddress gateway(192, 168, 1, 1);  //設定閘道器的IP地址
IPAddress subnet(255, 255, 255, 0); //設定子網掩碼

#define LED_PIN 8                                    //定義LED PIN為8
int LedSwitch=0;

void setup() {
   Serial.begin(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=關閉LED燈 1=打開LED燈
   pinMode(LED_PIN, OUTPUT);                         // 設定腳位 PIN 8為輸出模式
}
 
void loop() {
   LedSwitch=Mb.MbData[0];                           // 讀取數字快取器的數值
   if (LedSwitch!=0){
       digitalWrite(LED_PIN, HIGH);                  //PIN 8輸出為HIGH,LED點亮
   }
   else {    
   digitalWrite(LED_PIN, LOW);                       //PIN 8輸出為LOW,LED熄滅
   }
   delay(500);                                       //延時 0.5秒
   Mb.MbsRun();                                      //呼叫 Modbus   
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 6. 設計明細

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

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

②：TUgModbusTCPClient01元件，控制元件名稱為UgModbusTCPClient01。

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

④：TUgSwitchImage元件，控制元件名稱為UgSwitchImage02。

⑤：TUgSwitchImage元件，控制元件名稱為UgSwitchImage01。

UgWebRunFrame屬性設定
- Height：設定窗體高度=360。
- Width：設定窗體寬度=480。
①UgLabel01屬性設定
- Caption：設定顯示的字幕內容=ModbusTCP控制LED燈。
- Font.Color：設定顯示的字型顏色=clWhite。
- Size：設定字型大小=10。
②UgModbusTCPClient01屬性設定
- Host：設定ModbusTCP從設備的地址，此處設定需與Arduino程式中設定的IP地址一致，比如192.168.1.162。
③UgImage01屬性設定
- Height：設定控制元件高度=360。
- Width：設定控制元件寬度=480。
- Stretch：設定畫面拉伸=True。
- Picture：設定影象（背景圖片）。點選Picture屬性右側的[√]，打開影象編輯器，點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。
④ugSwitchImage02屬性設定
- Height：設定控制元件高度=50。
- Width：設定控制元件寬度=50。
- Stretch：設定畫面拉伸=True。雙擊該控制元件，打開影象編輯器列表，點選新增按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，關閉該對話方塊，注意開狀態的圖片位於索引0，關狀態的圖片位於索引1。
⑤ugSwitchImage01屬性設定
- Height：設定控制元件高度=50。
- Width：設定控制元件寬度=50。
- Stretch：設定畫面拉伸=True。雙擊該控制元件，打開影象編輯器列表，點選新增按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，關閉該對話方塊，注意開狀態的圖片位於索引0，關狀態的圖片位於索引1。當IsChecked屬性為True時，顯示索引為0的圖片，反之，顯示索引為1的圖片。

# 7. 程式設計

# 7.1. 程式初始設定

程式啟動時，顯示目前燈的狀態。

在UgWebRunFrame的OnAfterRunScript事件處雙擊以產生事件進行初始設定。

//JScript
var LED;

function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
  UgModbusTCPClient01.ReadHoldingRegister(1,LED);
  if LED = 0 Then
  //滅燈
  Begin
    UgSwitchImage02.IsChecked = False;
    UgSwitchImage01.IsChecked = False; 
  end
  Else
  //開燈
  Begin
    UgSwitchImage02.IsChecked = True;
    UgSwitchImage01.IsChecked = True;   
  End;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//PasScript
var
  LED: Integer;

procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UgModbusTCPClient01.ReadHoldingRegister(1,LED);
  if LED = 0 Then
  //滅燈
  Begin
    UgSwitchImage02.IsChecked := False;
    UgSwitchImage01.IsChecked := False; 
  end
  Else
  //開燈
  Begin
    UgSwitchImage02.IsChecked := True;
    UgSwitchImage01.IsChecked := True;   
  End;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

# 7.2. 事件設定

⑤UgSwitchImage01-OnSwitch事件

點選關燈的圖片，開燈狀態的圖片顯示，同時亮燈的圖片也顯示，連線Arduino的LED燈點亮。

//JScript
function ugSwitchImage01OnSwitch(sender)
{
  UgSwitchImage02.IsChecked = UgSwitchImage01.IsChecked;
  if (UgSwitchImage02.IsChecked){
    UgModbusTCPClient01.WriteRegister(1,1);
  }
  else{
    UgModbusTCPClient01.WriteRegister(1,0);
  }
}

1
2
3
4
5
6
7
8
9
10
11

//PasScript
//開燈
procedure ugSwitchImage01OnSwitch(sender: tobject);
begin
  UgSwitchImage02.IsChecked := UgSwitchImage01.IsChecked;
  if UgSwitchImage02.IsChecked then
    UgModbusTCPClient01.WriteRegister(1,1)
  else
    UgModbusTCPClient01.WriteRegister(1,0);
end;

1
2
3
4
5
6
7
8
9
10

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

# 8. 運行結果

使用滑鼠點選工具欄儲存到資料庫，然後點選運行（Run），測試運行結果。

點選右側的開關影象，開關打開，上方的燈泡切換為亮燈的狀態，同時連線Arduino開發板的LED發光二極管處於點亮的狀態；在亮燈狀態下，點選右側的開關影象，開關關閉，上方的燈泡切換為燈滅的狀態，同時連線Arduino開發板的LED發光二極管處於關閉的狀態。

← 通訊埠讀取溫濕度 ModbusTCP讀取溫濕度(WEB)→