FastWeb 串口读取温湿度

1. 说明

  本范例采用串口通讯协议，读取驳接在Arduino上的DHT温湿度传感器的数据。Arduino开发板每隔2进行一次读取，向串口发送温度与湿度信息，接收端解析并按照正确的格式进行显示。

  DHT11 是 DHT 系列的一款应用广泛的温湿度传感器。在本范例中，DHT11温湿度模块的接线方式为正极接入Arduino开发板的VCC(5V)引脚，负极接入Arduino的(GND)引脚，信号极(OUT)接入Arduino的8号引脚。DHT11的特性如下表所示。

名称	取值
工作电压	3V–5.5V
温度测量范围	-40℃–80℃
温度测量精度	0.5℃
湿度测量范围	0–100% RH
湿度测量精度	2% RH

  通过本范例的学习，可以掌握 TUgWebSerial 的使用，并结合Arduino开发板通过串口实现温湿度传感器的数据读取功能。

2. 零件连接图

3. 使用零件

序	零件名称	数量
1	Arduino UNO R3 开发板	1
2	DHT11温湿度 模块	1
3	USB数据线	1
4	面包板	1
5	杜邦线	3

4. Arduino流程图

5. Arduino程序

  使用Arduino IDE 编译并上传以下Arduino程序。

// 使用温湿度传感器之链接库 https://github.com/adafruit/DHT-sensor-library
#include <DHT.h>
#define dhtPin 8                    //读取DHT11 Data
#define dhtType DHT11               //选用DHT11
DHT dht(dhtPin, dhtType); // 初始化DHT传感器

void setup() {
   Serial.begin(9600);              //设定通信速率为9600
   dht.begin();//启动DHT
 }

void loop() {
   float h = dht.readHumidity();   //读取湿度
   float t = dht.readTemperature(); //读取摄氏温度
   if (isnan(h) || isnan(t)) {
     Serial.println("无法从DHT传感器读取！");
     return;
   }

//温度经由端口传出,字尾加 0x13
   Serial.print(t);  
   //Serial.write( 0x13 );
 // delay(500);
 //湿度经由端口传出,字尾加 0x66
   Serial.println(h);  
   //Serial.write( 0x66 );
   
   delay(2000);//延时2秒
}

6. 设计明细

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

  1：TUgLabel组件，控件名称为UgLabel01。

  2：TUgWebSerial组件，控件名称为 UgWebSerial01。

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

  4：TUgFSButton组件，控件名称为 UgFSButton01。

  5：TUgPanel组件，控件名称为 UgPanel01。

  6：TUgPanel组件，控件名称为 UgPanel02。

• UgWebRunFrame属性设置

  • Height：设置页面高度= 480。
  • Width：设置页面宽度= 640。

• 1：UgLabel01属性设置

  • Alignment：设置文字对齐的方式，设置为 taCenter。
  • AutoSize：设置控件尺寸是否跟随文本变化，设置为 False。
  • Caption：设置显示的文本标签，设置为 串口读取温湿度。
  • Font：设置显示的字体，点击右侧的 [√] 按钮以打开字体编辑的对话框，按照下图显示进行设置。

  

• 3：UgImage01属性设置

  • Picture：设置显示的图片，点击右侧的 [√] 按钮以打开图片编辑器，选择图片进行上传。
  • Stretch：设置图片是否跟随控件进行缩放，设置为 True。

• 4：UgFSButton01属性设置

  • Caption：设置按钮显示的文字= 打开串口。
  • StyleButton：设置按钮的显示样式，设置为 GoogleBlue3Round。

• 5：UgPanel01属性设置

  • Caption：设置字幕，设置为 0.00。
  • Color：设置标签的颜色，设置为 clBlack。
  • Font：设置字体，点击右侧的 [√] 按钮以打开字体编辑器的对话框，按照下图显示进行设置。

  

• 6：UgPanel02属性设置

  • Caption：设置字幕，设置为 0.00。
  • Color：设置标签的颜色，设置为 clBlack。
  • Font：设置字体，点击右侧的 [√] 按钮以打开字体编辑器的对话框，按照下图显示进行设置。

  

7. 程序设计

  点击程序设计界面右下角的按钮，切换至单元选择界面，勾选需要使用的单元。该程式的程序不需要引用单元。

7.1. 程序初始设置

  该程式的程序初始设置，隐藏串口的控件界面。

//JScript
{
  UgWebSerial01.Visible = False;
}

//PasScript
Begin
  UgWebSerial01.Visible := False;
End.

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

7.2. 事件设置

• 4：UgFSButton01-OnClick事件

  点击以打开串口。

//JScript
function UgFSButton01OnClick(sender)
{
  //打开串口
  UgWebSerial01.Request;
  UgWebSerial01.Open(0);
}

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

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

• 2：UgWebSerial01- OnReceived事件

//JScript
function ugWebSerial01OnReceived(adata)
{
  var FData = adata;
  if ((FData != "") || (Length(FData) == 10 )){
    UgPanel01.Caption = Copy(FData,1,5);
    UgPanel02.Caption = Copy(FData,6,10);
  }
}

//PasScript
procedure ugWebSerial01OnReceived(const adata: string);
var
  FData: String;
begin
  FData := adata;
  if (FData <> '') and (Length(FData) = 10 ) Then
  Begin
    UgPanel01.Caption := Copy(FData,1,5);
    UgPanel02.Caption := Copy(FData,6,10)
  End;
end;

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

8. 运行结果

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

  点击 [打开串口] 按钮，打开串口后，接收温湿度的信息并返回至界面上进行显示。