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功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  點選 [打開通訊埠] 按鈕，打開通訊埠后，接收溫濕度的資訊並返回至界面上進行顯示。