串口控制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发光二极管处于关闭的状态。

← 串口电子秤串口读取温湿度→