RestAPI讀取溫濕度(WEB)

# FastWeb之RESTAPI讀取溫濕度

適用平臺：WEB(桌面)

# 1. 說明

本範例採用RestAPI通訊，來讀取連線到NodeMCU的DHT22溫濕度感測器的數據。NodeMCU是以ESP8266(ESP12)晶片為基礎，包含了WiFi，GPIO，PWM，ADC，I2C等功能的主控板，執行效率高，非常適合物聯網應用開發，因為它內建了WiFi功能，與Arduino相容，Arduino中可用的感測器基本都可用於NodeMCU。範例中使用的DHT22感測器正極（長腳）連線接至NodeMCU Vin針腳，負極連線至NodeMCU GND針腳，訊號針腳連線至NodeMCU D5針腳。

範例中使用的NodeMCU的ESP8266無線網路，先從路由器獲取IP，連線網路成功后，啟動Rest服務，通過訪問對應的地址獲取溫濕度數據。

通過本範例學習，可以掌握Rest通訊的基本通訊原理，並結合NodeMCU開發板進行LED的控制功能。

# 2. 零件連線圖

# 3. 使用零件

序	零件名稱	數量
1	NodeMCU開發板	1
2	USB數據線	1
3	麵包板	1
4	杜邦線	若干
6	DHT22溫濕度感測器	1

# 4. Arduino流程圖

# 5. Arduino程式

使用Arduino IDE 編譯並上傳以下Arduino程式。

// 使用 NodeMCU 開發板
// aREST
//https://github.com/marcoschwartz/aREST
//aRESTUI
//https://github.com/marcoschwartz/aREST_UI
//DHT Library
//https://github.com/adafruit/DHT-sensor-library

#include <ESP8266WiFi.h>
#include <aREST.h>
#include <aREST_UI.h>
#include <DHT.h>

#define DHT_PIN 14   //定義LED針腳D5
#define DHTTYPE DHT22 // 定義溫濕度感測器型別 DHT22
DHT dht(DHT_PIN, DHTTYPE);//初始化感測器

// 建立aREST實體
aREST_UI rest = aREST_UI();

// WiFi連線參數
const char* ssid = "WIFI_SSID";
const char* password = "WIFI_PASSWORD";

// 監聽TCP連線
#define LISTEN_PORT           80

// 建立WiFi伺服器
WiFiServer server(LISTEN_PORT);

// 定義傳遞給API的變數
float temperature;
float humidity;

void setup(void) {
  // 開啟通訊埠
  Serial.begin(9600);

  // 設定標題
  rest.title("aREST DHT Sensor");
  
  // 初始化 DHT
  dht.begin();
  
  // 初始化變數，並將其傳遞給REST API
  rest.variable("temperature", &temperature);
  rest.variable("humidity", &humidity);

  // 設定標籤
  rest.label("temperature");
  rest.label("humidity");

  // Give name and ID to device
  rest.set_id("1");
  rest.set_name("esp8266");

  // 給設備定義ID與名稱
  rest.set_id("1");
  rest.set_name("esp8266");

 
   //指定IP位址，請自行在此加入WiFi.config()敘述。
   WiFi.config(IPAddress(192,168,0,171),           // IP地址
               IPAddress(192,168,0,1),             // 閘道器地址
               IPAddress(255,255,255,0));          // 子網掩碼
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

  // 啟動伺服器
  server.begin();
  Serial.println("Server started");

  // 輸出IP地址
  Serial.println(WiFi.localIP());
}

void loop() {
  //讀取溫濕度
  humidity = dht.readHumidity();
  temperature = dht.readTemperature();
  // 響應aREST
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
  while (!client.available()) {
    delay(1);
  }
  rest.handle(client);
}

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

# 6. 設計明細

開啟PinToo設計器，分別加入下插圖之控制元件。或者點選左上角的[打開模板Lib檔案]選擇模板檔案來打開對應模板。

①：TUgImage元件，控制元件名稱為UgImage01。

②：TUgSwitchImage元件，控制元件名稱為ugSwitchImage01。

③：TUgLabel元件，控制元件名稱為UgLabel05。

④：TUgLabel元件，控制元件名稱為UgLabel06。

⑤：TUgTimer元件，控制元件名稱為UgTimer01。

UgWebRunFrame屬性設定
- Height：設定窗體高度=360。
- Width：設定窗體寬度=480。
①UgImage01屬性設定
- Align：設定對齊方式=alClient。
- Stretch：設定畫面拉伸=True。
- Picture：設定影象（背景）。點選Picture屬性右側的[√]，打開影象編輯器，點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。
②ugSwitchImage01屬性設定
- Height：設定控制元件高度=128。
- Width：設定控制元件寬度=128。
- 雙擊該控制元件打開圖片編輯界面。點選新增按鈕打開檔案上傳界面。點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。
③UgLabel05屬性設定
- Caption：設定標籤字幕內容=℃。
- Font.Color：設定字幕的顏色=clWhite。
- Font.Size：設定字幕的大小=24。
- Font.Style.fsBold：設定字型加粗=True。
④UgLabel06屬性設定
- Caption：設定標籤字幕內容=%RH。
- Font.Color：設定字幕的顏色=clWhite。
- Font.Size：設定字幕的大小=24。
- Font.Style.fsBold：設定字型加粗=True。

# 7. 程式設計

# 7.1. 程式初始設定

程式啟動后，禁用計時器，設定數據初始顯示值。

//JScript
{
   UgTimer01.Enabled = False;
   ugSwitchImage01.IsChecked= False;
   UgLabel05.Caption = "0.0 ℃";
   UgLabel06.Caption = "0.0 %RH";
}

1
2
3
4
5
6
7

//PasScript
Begin
   UgTimer01.Enabled := False;
   ugSwitchImage01.IsChecked:= False;
   UgLabel05.Caption := '0.0 ℃';
   UgLabel06.Caption := '0.0 %RH';
End.

1
2
3
4
5
6
7

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

# 7.2. 事件設定

②ugSwitchImage01-OnClick事件

點選開關按鈕，以開啟或者關閉計時器。

//JScript
function ugSwitchImage01OnClick(sender)
{
  if (ugSwitchImage01.IsChecked){
    UgTimer01.Enabled = True;
  }
  Else
  {
    UgTimer01.Enabled = False;
    UgLabel05.Caption = "0.0 ℃";
    UgLabel06.Caption = "0.0 %RH";
  }
}

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

//PasScript
procedure ugSwitchImage01OnClick(sender: tobject);
begin
  if ugSwitchImage01.IsChecked then
    UgTimer01.Enabled := True
  Else
  begin
    UgTimer01.Enabled := False;
    UgLabel05.Caption := '0.0 ℃';
    UgLabel06.Caption := '0.0 %RH';
  end;
end;

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

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

⑤UgTimer01-OnTimer事件

計時器定時事件，讀取溫濕度並顯示。

//JScript
function UgTimer01OnTimer(sender)
{
  var h = new TIDHttp(Nil);
  var J = new TJSONObject();
  Try{
    h.HandleRedirects = true;
    h.ReadTimeout = 5000;
    var tmpJSONString = h.Post("http://192.168.0.171/temperature",nil);
    var humJSONString = h.Post("http://192.168.0.171/humidity",nil);
    var Valuetmp = j.ParseJSONValue(tmpJSONString,false,false);
    var Valuehum = j.ParseJSONValue(humJSONString,false,false);
    UgLabel05.Caption = TJSONObject(Valuetmp).get(0).JsonValue.Value + "℃";
    UgLabel06.Caption = TJSONObject(Valuehum).get(0).JsonValue.Value + "%RH";
  }
  Finally
  {
    Valuehum.Free;
    Valuetmp.Free;
    j.Free;
    h.Free;
  }
}

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

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
Var
  h:TIDHttp;
  tmpJSONString:string;
  humJSONString:string;
  J:TJSONObject;
  Valuehum: TJSONValue;
  Valuetmp: TJSONValue;
begin
  h:=TIDHttp.Create(Nil);
  J:=TJSONObject.Create;
  Try
    h.HandleRedirects := true;
    h.ReadTimeout := 5000;
    tmpJSONString := h.Post('http://192.168.0.171/temperature',nil);
    humJSONString := h.Post('http://192.168.0.171/humidity',nil);
    Valuetmp := j.ParseJSONValue(tmpJSONString,false,false);
    Valuehum := j.ParseJSONValue(humJSONString,false,false);
    UgLabel05.Caption := TJSONObject(Valuetmp).get(0).JsonValue.Value + '℃';
    UgLabel06.Caption := TJSONObject(Valuehum).get(0).JsonValue.Value + '%RH';
  Finally
    Valuehum.Free;
    Valuetmp.Free;
    j.Free;
    h.Free;
  end;
end;

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

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

# 8. 運行結果

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

← RestAPI控制LED燈(WEB) RestAPI應用(WEB)→