Smart之通訊埠讀取溫濕度

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

  通過範例學習，可以掌握ComPort控制元件的使用，並結合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);
 //濕度經由埠傳出,字尾加換行符號
   Serial.println(h);  
   //Serial.write( 0x66 );
   
   delay(2000);//延時2秒
}

6. 設計明細

  開啟Smart智慧控制平臺，分別加入下插圖之控制元件。或者通過點選功能表欄[檔案]-[打開專案]選擇範例專案檔案來打開該範例。

  ①：TImage元件，控制元件名稱為Image1。

  ②：TShape元件，控制元件名稱為Shape1。

  ③：TPanel元件，控制元件名稱為Panel1。

  ④：TLabel元件，控制元件名稱為Label9。

  ⑤：TLabel元件，控制元件名稱為Label2。

  ⑥：TLabel元件，控制元件名稱為Label3。

  ⑦：TPanel元件，控制元件名稱為Panel2。

  ⑧：TLabel元件，控制元件名稱為Label1。

  ⑨：TWidgetLCDLabel元件，控制元件名稱為WidgetLCDLabel1。

  ⑩：TLabel元件，控制元件名稱為Label4。

  (11)：TTimer元件，控制元件名稱為Timer1。

  (12)：TLabel元件，控制元件名稱為Label10。

  (13)：TSwitchButton元件，控制元件名稱為SwitchButton1。

  (14)：TLabel元件，控制元件名稱為Label5。

  (15)：TLabel元件，控制元件名稱為Label6。

  (16)：TWidgetLCDLabel元件，控制元件名稱為WidgetLCDLabel2。

  (17)：TLabel元件，控制元件名稱為Label8。

  (18)：TLabel元件，控制元件名稱為Label7。

  (19)：TComPort元件，控制元件名稱為ComPort1。

• Main窗體屬性設定

  • Caption：主窗體標題，設定為通訊埠讀取溫濕度。
  • ClientHeight：窗體客戶區高度=480。
  • ClientWidth：窗體客戶區寬度=720。

• ①Image1屬性設定

  • Height：設定圖片高度=480。
  • Width：設定圖片寬度=720。
  • Picture：設定顯示背景圖片。點選Picture屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

  • Stretch：設定圖片拉伸=True。

• ②Shape1屬性設定

  • Height：設定控制元件高度=262。
  • Shape：設定形狀=stRoundRect(圓角矩形)。
  • Width：設定控制元件寬度=544。

• ③Panel1屬性設定

  • BevelInner：設定內斜邊樣式=bvRaised。
  • BevelKind：設定斜邊的樣式=bkSoft。
  • BorderStyle：設定邊界的樣式=bsSingle。
  • Color：設定顏色=clBtnText。
  • Height：設定控制元件高度=217。
  • Width：設定控制元件寬度=500。

• ④Label9屬性設定

  • Caption：設定標籤文字，設定為開。
  • Font：設定字型。設定內容如下圖。

  

• ⑤Label2屬性設定

  • Caption：設定標籤文字，設定為溫度。
  • Font：設定字型。設定內容如下圖。

  

• ⑥Label3屬性設定

  • Caption：設定標籤文字，設定為Temperature。
  • Font：設定字型。設定內容如下圖。

  

• ⑦Panel2屬性設定

  • BevelInner：設定內斜邊樣式=bvRaised。
  • BevelKind：設定斜邊的樣式=bkSoft。
  • BorderStyle：設定邊界的樣式=bsSingle。
  • Color：設定顏色=clMenuText。
  • Height：設定控制元件高度=83。
  • Width：設定控制元件寬度=404。

• ⑧Label1屬性設定

  • Caption：設定標籤文字，設定為通訊埠讀取溫濕度。
  • Font：設定字型。設定內容如下圖。

  

• ⑨WidgetLCDLabel1屬性設定

  • Caption.Format：顯示格式，設定為00.00。
  • Height：設定控制元件高度=60。
  • Width：設定控制元件寬度=209。

• ⑩Label4屬性設定

  • Caption：設定標籤文字，設定為℃。
  • Font：設定字型。設定內容如下圖。

  

• (11)Timer1屬性設定

  • Enabled：啟用計數器，設定為False。
  • Interval：設定計數時間間隔(ms)=2000。

• (12)Label10屬性設定

  • Caption：設定標籤文字，設定為關。
  • Font：設定字型。設定內容如下圖。

  

• (13)SwitchButton1屬性設定

  • IsChecked：開關狀態，設定為False。
  • SwitchOff：關閉狀態時顯示的圖片。點選SwitchOff屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

  • SwitchOn：打開狀態時顯示的圖片。點選SwitchOn屬性右側的[...]按鈕，打開檔案上傳界面，點選[Load...]從檔案瀏覽器中選擇對應的圖片檔案上傳，返回該界面下，待顯示出圖片後點擊[OK]載入圖片。

  

  • Height：設定控制元件高度=72。
  • Width：設定控制元件寬度=68。
  • Stretch：影象是否隨控制元件大小拉伸，設定為True。

• (14)Label5屬性設定

  • Caption：設定標籤文字，設定為溫度。
  • Font：設定字型。設定內容如下圖。

  

• (15)Label6屬性設定

  • Caption：設定標籤文字，設定為Humidity。
  • Font：設定字型。設定內容如下圖。

  

• (16)WidgetLCDLabel2屬性設定

  • Caption.Format：顯示格式，設定為00.00。
  • Height：設定控制元件高度=60。
  • Width：設定控制元件寬度=209。

• (17)Label8屬性設定

  • Caption：設定標籤文字，設定為RH。
  • Font：設定字型。設定內容如下圖。

  

• (18)Label7屬性設定

  • Caption：設定標籤文字，設定為%。
  • Font：設定字型。設定內容如下圖。

  

• (19)ComPort1屬性設定

  • BaudRate：通訊埠通訊速率=br9600。
  • DataBits：通訊埠傳輸數據位數=db8。
  • DeviceName：通訊埠對應設備的埠號，依據設備實際連線的埠號進行填寫。

7. 程式設計

7.1. 程式初始設定

  在程式啟動時需打開通訊埠建立連線。

constructor TMyHandler.Create(AOwner: TComponent);
var
  s :String;
begin
  FThis :=TBaseForm(AOwner);
  FThis.ComPort1.Open;//打開通訊埠 
end;

7.2. 事件設定

• (13)SwitchButton1-OnSwitch事件

SwitchButton1在點選時會切換開-關狀態，即改變IsChecked屬性的值，此時會觸發OnSwitch事件，該事件可用於啟用或禁用Timer1計時器。

procedure TMyHandler.SwitchButton1Switch;
//開啟定時器定時讀取
begin
  FThis.Timer1.Enabled := FThis.SwitchButton1.IsChecked;
end;

• (11)Timer1-OnTimer事件

  計時器觸發OnTimer事件，用於讀取通訊埠數據並顯示。

procedure TMyHandler.Timer1Timer;
//定時讀取溫濕度
var
 FData:string;
begin
  //讀取通訊埠快取數據
  FData := FThis.ComPort1.ReadUtf8;
  if FData <> '' Then
  begin
    if length(FData)=12 Then
    begin
      //FThis.DisplayR.Lines.Add('濕度：'+Copy(FData,1,5)+' %， 溫度：'+Copy(FData,6,4)+' ℃');
      FThis.WidgetLCDLabel1.Caption.Value := StrToFloat(Copy(FData,1,5));
      FThis.WidgetLCDLabel2.Caption.Value := StrToFloat(Copy(FData,6,4));
    End;
  end;
end;

8. 運行模板

  通過工具欄儲存，將程式儲存為 sdb 專案檔案。

  使用滑鼠點選工具欄運行（Run），測試運行結果。將圖中的撥桿撥向「開」，數值顯示屏中的溫濕度數據每隔兩秒更新一次。