通訊埠控制LED燈

# FastWeb 通訊埠控制LED燈

# 1. 說明

採用通訊埠通訊協議，通過瀏覽器實現通訊埠控制LED燈的功能。

LED發光二極管是電子電路中常用的元器件，它便宜且耐用，通常用於訊號指示的電路中。在本範例中，我們使用一個LED發光二極管，它的正極（二極管腳較長的一端）與一個電阻相連，LED發光二極管的負極（二極管腳較短的一端）與Arduino開發板的地線(GND)相連。此處使用到一個限流電阻，因為Arduino開發板輸出的電流為5V，超出二極管的工作電壓，接入電阻后可以降低二極管的電壓，避免二極管被擊穿。

此處電阻與Arduino的針腳8相連，因此針腳8為訊號輸出端，我們在程式中也對該針腳進行了定義。當針腳8輸出高位電平時，LED發光二極管點亮；針腳8輸出低位電平時，LED發光二極管熄滅。

通過本範例學習，可以掌握 TUgWebSerial 的原理，並結合實體，實現控制連線至Arduino的LED燈的功能。

# 2. 零件連線圖

# 3. 使用零件

序號	零件名稱	數量
1	Arduino UNO R3 開發板	1
2	USB數據線	1
3	麵包板	1
4	杜邦線	若干
5	LED發光二極管	1
6	220歐姆電阻	1

# 4. Arduino流程圖

# 5. Arduino程式

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

#define LED_PIN 8                          // 定義第8針腳輸出LED亮滅的狀態

bool LLedState = false;                    // 設定初始值
int LVal = 0;

void setup() {
   pinMode(LED_PIN, OUTPUT);               //設定第8針腳為輸出模式
   Serial.begin(9600);                     //設定通訊位元率為9600
}

void loop() {
  if(Serial.available() > 0) {             // 檢查是否可以從通訊埠讀取數據
    LVal = Serial.read();                  // 從通訊埠讀取數據
    if(LVal != 0) {                        // 讀取的數據不能為空
      if(LVal == 45) {
        Serial.print("READY");             // 傳輸準備完成的字串
      } else {
         OnSerialCommand(LVal);            // 運行LED開關的子程式
      }
      LVal = 0;                            // 重新設定初始值
    } 
  }
 }

void OnSerialCommand(int cmd) {
  if(cmd == 49) {                          // 如果接收到的字串為'1'
    LLedState = true;                      // 設定LED開關狀態為True
  } else if(cmd == 48) {                   // 收到的字串如果'0'
    LLedState = false;                     // 設定LED開關狀態為False
  }
  if(LLedState) {                          // 檢查LED燈開關狀態
    digitalWrite(LED_PIN, HIGH);           // 第8針腳輸出高位電平，LED燈亮
    Serial.print("LED_ON_OK");             // 傳送LED燈亮的資訊
  } else {
    digitalWrite(LED_PIN, LOW);            // 第8針腳輸出低位電平，LED燈滅
    Serial.print("LED_OFF_OK");            // 傳送LED燈滅的資訊
  }
}

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

# 6. 設計明細

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

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

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

3：TUgImage元件，控制元件名稱為 UgImage02。

4：TUgWebSerial元件，控制元件名稱為 UgWebSerial01。

5：TUgFSButton元件，控制元件名稱為 FSButton01。

6：TUgSwitch3D元件，控制元件名稱為 UgSwitch3D01。

UgWebRunFrame屬性設定
- Height：設定頁面高度=480。
- Width：設定頁面寬度=640。
1：UgLabel01屬性設定
- Alignment：設定對齊方式，設定為 taCenter。
- AutoSize：設定控制元件尺寸是否跟隨文字自動變化，設定為 False。
- Font：設定字型，點選右側的 [√] 打開字型編輯視窗，按照下圖的樣式進行設定。
- Text：設定標籤顯示的文字= 通訊埠控制LED燈。
2：UgImage01屬性設定
- Picture：設定顯示的圖片，點選右側的 [√] 打開圖片編輯器。此圖片設定的為關燈狀態的圖片。
- Stretch：設定圖片是否進行自適應拉伸，設定為 True。
3：UgImage02屬性設定
- Picture：設定顯示的圖片，點選右側的 [√] 打開圖片編輯器。此圖片設定的為開燈狀態的圖片。
- Stretch：設定圖片是否進行自適應拉伸，設定為 True。
5：UgFSButton01屬性設定
- Caption：設定顯示于按鈕上的字幕，設定為 打開通訊埠。
- Style：設定顯示的樣式，設定為 GoogleBlue3Round。
6：UgSwitch3D01屬性設定
- Options：設定顯示的樣式，設定其中的 Font 為 10 。

# 7. 程式設計

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

# 7.1. 程式初始設定

該程式進行初始設定。

//JScript
  UgWebSerial01.Visible = False;
  UgImage01.Visible = True;
  UgImage02.Visible = False;
  UgSwitch3D01.OnSwitch = &UgSwitch3D01OnSwitch;
  UgFSButton01.OnClick = &UgFSButton01OnClick;
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;

1
2
3
4
5
6
7

//PasScript
Begin
  UgWebSerial01.Visible := False;
  UgImage01.Visible := True;
  UgImage02.Visible := False;
End.

1
2
3
4
5
6
7

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

# 7.2. 事件設定

UgWebRunFrame-OnAfterRunScript事件

點選以初始化設定。

//JScript
function UgWebRunFrameOnAfterRunScript(sender){
  UGMM.LC(Self);
}

1
2
3
4

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
  UGMM.LC(Self);
end;

1
2
3
4
5

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

5：UgFSButton01-OnClick事件

點選以開啟通訊埠。

//JScript
function UgFSButton01OnClick(sender)
{
  UgWebSerial01.Request;
  UgWebSerial01.Open(0);
}

1
2
3
4
5
6

//PasScript
procedure UgFSButton01OnClick(sender: tobject);
begin
  UgWebSerial01.Request;
  UgWebSerial01.Open(0);
end;

1
2
3
4
5
6

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

6：UgSwitch3D01-OnClick事件

點選以切換開關的狀態。

//JScript
function UgSwitch3D01OnSwitch(sender)
{
  if (UgSwitch3D01.Checked){
    UgWebSerial01.Write("1");
    UgImage01.Visible = False;
    UgImage02.Visible = True;
  }Else
  {
    UgWebSerial01.Write("0");
    UgImage01.Visible = True;
    UgImage02.Visible = False;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//PasScript
procedure UgSwitch3D01OnSwitch(sender: tobject);
begin
  if UgSwitch3D01.Checked Then
  Begin
    UgWebSerial01.Write('1');
    UgImage01.Visible := False;
    UgImage02.Visible := True;
  End
  Else
  Begin
    UgWebSerial01.Write('0');
    UgImage01.Visible := True;
    UgImage02.Visible := False;
  end;
end;

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

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

# 8. 運行結果

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

點選 [打開通訊埠]，在瀏覽器的對話方塊中選擇要連線的通訊埠埠並連線，點選右側的開關影象，開關打開，上方的燈泡切換為亮燈的狀態，同時連線Arduino開發板的LED發光二極管處於點亮的狀態；在亮燈狀態下，點選右側的開關影象，開關關閉，上方的燈泡切換為燈滅的狀態，同時連線Arduino開發板的LED發光二極管處於關閉的狀態。

← 通訊埠電子秤通訊埠讀取溫濕度→