温湿度采集与控制(WEB)

# FastWeb之温湿度采集与控制

适用平台：WEB(桌面)

# 1. 说明

本范例使用ModbusTCP通讯协议，读取连接至Arduino的温湿度传感器数据，同时可通过ModbusTCP来控制LED灯以及继电器开关。可通过视频直播流查看正在播放的设备运行情况。

本范例除使用常规的Arduino硬件外，还需要使用到用于进行直播录像的摄像机，该摄像机录制的视频将以视频直播流的形式发送至指定的RTMP服务器中，范例从该地址中接收视频流播放视频录像。在使用该范例前需要读者对视频直播的流程有一定的了解，并使用自行搭建的流媒体服务器或者第三方的视频直播服务进行推流直播。自行搭建的流媒体服务器可使用SRS (opens new window)。

通过本范例学习，可以掌握ModbusTCP的基本通讯原理，实现Arduino设备的综合控制。

# 2. 零件连接图

零件连接如下图所示，其中电动机的部分为制冷与风扇的外围电路，制冷器与温湿度传感器紧贴。

# 3. 使用零件

序	零件名称	数量
1	Arduino UNO R3 开发板	1
2	W5100网络扩展板	1
3	USB数据线	1
4	面包板	1
5	杜邦线	若干
6	LED灯	1
7	220欧姆电阻	1
8	LCD1602液晶显示屏(I2C接口)	1
9	DHT11温湿度传感器	1
10	继电器	1
11	半导体制冷片	1
12	电动机	1

# 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 链接库
#include <LiquidCrystal_I2C.h> //引用I2C库
MgsModbus Mb;

//设置LCD1602设备地址，一般是0x20，或者0x27，具体看模块手册
LiquidCrystal_I2C lcd(0x27,16,2); 
 
#define dhtPin 8                    //读取DHT11 Data
#define dhtType DHT11               //选用DHT11 
DHT dht(dhtPin, dhtType); // Initialize DHT sensor

#define LED_PIN 9                   //定义LED PIN为 9
#define COOLER_PIN 7                //定义制冷器PIN为 7
 
// 设置网络IP地址 (网络扩充卡 MAC 可自行修改 +1 避免冲突)
byte mac[] = {0x90, 0xA2, 0xDA, 0x0E, 0x94, 0xB8 };     
IPAddress ip(192, 168, 0, 183);
IPAddress gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);
 
void setup() {
   Serial.begin(9600);              //设定鲍率9600
   Ethernet.begin(mac, ip, gateway, subnet);               // 启动网络
   Serial.println("网络已经开通"); 
   pinMode(LED_PIN, OUTPUT); 
   pinMode(COOLER_PIN, OUTPUT);
   
   lcd.init();                  // 初始化LCD
   lcd.backlight();             //设置LCD背景等亮
   lcd.setCursor(0,0);                //设置显示指针
   lcd.print("IsoFace LiveDemo"); 
 
   //设置要使用的缓存器地址
   //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 存放LED灯的状态
   Mb.MbData[3] = 0;                                       // 地址 3 存放制冷器的状态   
   dht.begin();//启动DHT
 }
 
void loop() {

  // LED灯状态指示                         
   if (Mb.MbData[2]!=0){
       digitalWrite(LED_PIN, HIGH);                      //PIN 9输出为HIGH,LED点亮
   }
   else {    
       digitalWrite(LED_PIN, LOW);                       //PIN 9输出为LOW,LED熄灭
   }

   // 制冷器状态指示
   if (Mb.MbData[3]!= 0){
       digitalWrite(COOLER_PIN, HIGH);
   }
   else{
       digitalWrite(COOLER_PIN, LOW);
   }


  
   float h = dht.readHumidity()*100;                      //读取湿度 因为modbus 无法传递小数字  所以先乘100 到客户端取用时要除 100
   float t = dht.readTemperature()*100;                   //读取摄氏温度
   if (isnan(h) || isnan(t)) {
      Serial.println("无法从DHT传感器读取！");
      return;
   }
   Mb.MbData[0] = t;                                       // 地址 0 存放所测得之温度  
   Mb.MbData[1] = h;                                       // 地址 1 存放所测得之湿度  

   //输出显示状态
   lcd.clear();
   lcd.setCursor(0, 0);
   if (Mb.MbData[2] != 0){
    lcd.print("LED:ON   ");
   }
   else{
    lcd.print("LED:OFF  ");
   }
   
   if (Mb.MbData[3] != 0){
     lcd.print("FAN:ON  "); 
   }
   else{
     lcd.print("FAN:OFF ");
   }
   
   lcd.setCursor(0, 1);
   lcd.print("T:" + String(t*0.01)+ "  " + "H:" + String(h*0.01));   
   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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

# 6. 设计明细

开启FastWeb设计器，分别加入下插图之控件。或者点击左上角的[导入]选择模板文件来打开对应模板。

①：TUgTimer组件，控件名称为UgTimer。

②：TUgImage组件，控件名称为UgImage01。

③：TUgFlvPlayer组件，控件名称为UgFlvPlayer01。

④：TUgFSToggle组件，控件名称为UgFSToggle01。

⑤：TUgLabel组件，控件名称为lbTmp。

⑥：TUgFSToggle组件，控件名称为UgFSToggle02。

⑦：TUgLabel组件，控件名称为lbHum。

⑧：TUgModbusTCPClient组件，控件名称为UgModbusTCPClient。

⑨：TUgTimer组件，控件名称为UgTimer01。

⑩：TUgTimer组件，控件名称为UgTimer02。

UgWebRunFrame属性设置
- Height：设置页面高度=640。
- Width：设置页面宽度=883。
①UgTimer属性设置
- Interval：设置计数的时间间隔，设置为2000。
- Enabled：设置是否启用计时器，设置为False。
②UgImage01属性设置
- Align：设置对齐方式，设置为alClient。
- Stretch：设置图片是否与控件拉伸对齐，设置为True。
- Picture：设置图片。点击Picture属性右侧的[√]，打开图像编辑器，点击[Load]按钮打开文件上传界面，点击右侧的[Browse...]打开图像浏览界面，选择图像后，点击[确定]按钮返回到文件上传界面，点击[Upload]将文件上传至编辑器中，待图片显示后，点击[Save]按钮即可。
④UgFSToggle01属性设置
- TitleOff：设置为关闭时显示的内容，设置为关。
- TitleOn：设置为开启时显示的内容，设置为开。
⑤lbTmp属性设置
- Caption：设置标签显示的内容，设置为False。
- Font：设置标签文字显示的字体，此处设置其Color为需要的颜色，设置Size为16。设置Style中fsBold为True。
⑥UgFSToggle02属性设置
- TitleOff：设置为关闭时显示的内容，设置为关。
- TitleOn：设置为开启时显示的内容，设置为开。
⑦lbHum属性设置
- Caption：设置标签显示的内容，设置为False。
- Font：设置标签文字显示的字体，此处设置其Color为需要的颜色，设置Size为16。设置Style中fsBold为True。
⑧ModbusTCPClient属性设置
- AutoConnect：设置是否进行自动连接，设置为True。
- Host：设置客户端的地址，设置为192.168.0.183。
⑨UgTimer01属性设置
- Enabled：设置是否启用计时器，设置为False。
- Interval：设置计时器的时间间隔，设置为30000。
⑩UgTimer02属性设置
- Enabled：设置是否启用计时器，设置为False。
- Interval：设置计时器的时间间隔，设置为50。

# 7. 脚本设计

# 7.1. 脚本初始设置

该程序启动后，开启计时器。

//JScript
function UgWebRunFrameOnAfterRunScript(sender)
//启动定时器
{
  UGMM.LC(Self);
  UgTimer.Enabled = True;
  UgTimer02.Enabled = True;
}

1
2
3
4
5
6
7
8

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
//启动定时器
begin
  UgTimer.Enabled := True;
  UgTimer02.Enabled := True;
end;

1
2
3
4
5
6
7

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

在初始化时为直播设置相应的地址。

//JScript
{
   //设置直播地址
   UgFlvPlayer01.SetSource("http://nas.isoface.cn:1688/live/001.flv", "flv");
}

1
2
3
4
5

//PasScript
Begin
   //设置直播地址
   UgFlvPlayer01.SetSource('http://192.168.0.113/live/001.flv', 'flv');
End.

1
2
3
4
5

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

# 7.2. 事件设置

①UgTimer-OnTimer事件

计时器定时触发事件，每隔2秒读取温湿度并显示。

//JScript
function UgTimerOnTimer(sender)
//读取温湿度
{
  var t,h,tmp,hum;
  UgModbusTCPClient.ReadHoldingRegister(1,t);
  UgModbusTCPClient.ReadHoldingRegister(2,h);
  tmp = FloatToStr(t * 0.01);
  hum = FloatToStr(h * 0.01);
  LbTmp.Caption = tmp + "℃";
  LbHum.Caption = hum + "%RH";
}

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

//PasScript
procedure UgTimerOnTimer(sender: tobject);
//读取温湿度
Var 
  tmp: String;
  hum: String;
  t: Integer;
  h: Integer;
begin
  UgModbusTCPClient.ReadHoldingRegister(1,t);
  UgModbusTCPClient.ReadHoldingRegister(2,h);
  tmp := FloatToStr(t * 0.01);
  hum := FloatToStr(h * 0.01);
  LbTmp.Caption := tmp + '℃';
  LbHum.Caption := hum + '%RH';
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

④UgFSToggle01-OnToggle事件

当切换LED灯的开关时，执行LED的开关操作。

//JScript
function UgFSToggle01OnToggled(value)
//LED开关
{
  if (UgFSToggle01.Toggled){
    UgModbusTCPClient.WriteRegister(3,1);
  }
  Else{
    UgModbusTCPClient.WriteRegister(3,0);
  }
}

1
2
3
4
5
6
7
8
9
10
11

//PasScript
procedure UgFSToggle01OnToggled(const value: boolean);
//LED开关
begin
  if UgFSToggle01.Toggled then
    UgModbusTCPClient.WriteRegister(3,1)
  Else
    UgModbusTCPClient.WriteRegister(3,0);
end;

1
2
3
4
5
6
7
8
9

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

⑥UgFSToggle01-OnToggle事件

当切换制冷器电源开关时，执行相应的操作。

//JScript
function UgFSToggle02OnToggled(value)
//制冷器、风扇开关
{
  UgTimer01.Enabled = True;
  if (UgFSToggle02.Toggled){
    UgModbusTCPClient.WriteRegister(4,1);
  }
  Else{
    UgModbusTCPClient.WriteRegister(4,0);
  }
}

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

//PasScript
procedure UgFSToggle02OnToggled(const value: boolean);
//制冷器、风扇开关
begin
  UgTimer01.Enabled := True;
  if UgFSToggle02.Toggled then
    UgModbusTCPClient.WriteRegister(4,1)
  Else
    UgModbusTCPClient.WriteRegister(4,0);
end;

1
2
3
4
5
6
7
8
9
10

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

⑨UgTimer01-OnTimer事件

计时器定时触发的事件，当启用后，30秒经过自动关闭制冷器。

//JScript
function UgTimer01OnTimer(sender)
//定时30秒后自动关闭制冷器
{
  UgModbusTCPClient.WriteRegister(4,0);
  UgFSToggle02.Toggled = False;
  UgTimer01.Enabled = False;
}

1
2
3
4
5
6
7
8

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
//定时30秒后自动关闭制冷器
begin
  UgModbusTCPClient.WriteRegister(4,0);
  UgFSToggle02.Toggled := False;
  UgTimer01.Enabled := False;
end;

1
2
3
4
5
6
7
8

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

⑩UgTimer02-OnTimer事件

计时器定时触发事件，当启用后初始化读取相应的开关状态。

//JScript
function UgTimer02OnTimer(sender)
//初始化读取开关状态
{
  var led,cooler;
  UgModbusTCPClient.ReadHoldingRegister(3,led);
  UgModbusTCPClient.ReadHoldingRegister(4,cooler);
  if (led == 0){
    UgFSToggle01.Toggled = False;
  }
  Else{
    UgFSToggle01.Toggled = True;
  }
  if (cooler == 0){
    UgFSToggle02.Toggled = False;
  }
  Else{
    UgFSToggle02.Toggled = True;
  }
  UgTimer02.Enabled = False;
}

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

//PasScript
procedure UgTimer02OnTimer(sender: tobject);
//初始化读取开关状态
Var
  led: Integer;
  cooler: Integer;
begin
  UgModbusTCPClient.ReadHoldingRegister(3,led);
  UgModbusTCPClient.ReadHoldingRegister(4,cooler);
  if led = 0 Then
    UgFSToggle01.Toggled := False
  Else
    UgFSToggle01.Toggled := True;
  if cooler = 0 Then
    UgFSToggle02.Toggled := False
  Else
    UgFSToggle02.Toggled := True;
  UgTimer02.Enabled := False;
end;

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

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

# 8. 运行结果

使用鼠标在FastWeb菜单，点击[保存至数据库]按钮，将其保存至数据库，点击[调试运行]确认能够正常打开。

程序启动后，点击LED灯或者制冷器的开关按钮，对应的元件开启或关闭，可在直播画面中看到状态的显示。

← 视频识别-可视化控件(WEB) 车间信息采集与控制(WEB)→