愛招飛幫助手冊
目录

RestAPI控制LED燈(WEB)

# FastWeb之RestAPI控制LED燈

  • 適用平臺：WEB(桌面)

# 1. 說明

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

  範例中使用的NodeMCU的ESP8266無線網路，先從路由器獲取IP，連線網路成功后，啟動Rest服務，如果從Rest獲取到LED的參數為0，NodeMCU D5針腳輸出為地電平，LED燈熄滅，反之，NodeMCU D5針腳輸出為高電平，LED燈點亮。

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

# 2. 零件連線圖

# 3. 使用零件

序 零件名稱 數量
1 NodeMCU 開發板 1
2 USB數據線 1
3 麵包板 1
4 杜邦線 若干
5 LED燈 1
6 220歐姆電阻 1

# 4. Arduino流程圖

# 5. Arduino程式

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

// 使用 NodeMCU 開發板
// aREST
//https://github.com/marcoschwartz/aREST
//aRESTUI
//https://github.com/marcoschwartz/aREST_UI

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


#define LED_PIN 14   //定義LED針腳D5

// 建立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的函式
int ledControl(String command);

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

  // 設定標題
  rest.title("aREST LED Control");

  // 給D5針腳提供按鈕
  rest.button(LED_PIN);

  // 設定暴露給aREST的函式
  rest.function("led",ledControl);

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

   //指定IP位址，請自行在此加入WiFi.config()敘述。
  WiFi.config(IPAddress(192,168,0,170),           // 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());
  pinMode(LED_PIN, OUTPUT);   //設定D5針腳為輸出模式
}

void loop() {

  // 響應aREST
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
  while(!client.available()){
    delay(1);
  }
  rest.handle(client);

}

// API函式定義
int ledControl(String command) {

  // 從命令URL中獲取狀態
  int state = command.toInt();

  digitalWrite(LED_PIN,state);
  return 1;
}
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

# 6. 設計明細

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

  ①：TUgLabel元件，控制元件名稱為UgLabel01。

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

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

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

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

  • UgWebRunFrame屬性設定

    • Height：設定窗體高度=360。
    • Width：設定窗體寬度=480。

  • ①UgLabel01屬性設定

    • Caption：設定顯示的字幕內容=RestAPI控制LED燈。
    • Font.Color：設定顯示的字型顏色=clWhite。
    • Size：設定字型大小=10。

  • ②ugSwitchImage02屬性設定

    • Height：設定控制元件高度=50。
    • Width：設定控制元件寬度=50。
    • Stretch：設定畫面拉伸=True。雙擊該控制元件，打開影象編輯器列表，點選新增按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，關閉該對話方塊，注意開狀態的圖片位於索引0，關狀態的圖片位於索引1。

  • ③UgImage01屬性設定

    • Height：設定控制元件高度=360。
    • Width：設定控制元件寬度=480。
    • Stretch：設定畫面拉伸=True。
    • Picture：設定影象（背景圖片）。點選Picture屬性右側的[√]，打開影象編輯器，點選[Load]按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，點選[Save]按鈕即可。

  • ⑤ugSwitchImage01屬性設定

    • Height：設定控制元件高度=50。
    • Width：設定控制元件寬度=50。
    • Stretch：設定畫面拉伸=True。
    • 雙擊該控制元件，打開影象編輯器列表，點選新增按鈕打開檔案上傳界面，點選右側的[Browse...]打開影象瀏覽界面，選擇影象后，點選[確定]按鈕返回到檔案上傳界面，點選[Upload]將檔案上傳至編輯器中，待圖片顯示后，關閉該對話方塊，注意開狀態的圖片位於索引0，關狀態的圖片位於索引1。當IsChecked屬性為True時，顯示索引為0的圖片，反之，顯示索引為1的圖片。

# 7. 程式設計

  點選程式設計界面右下角的Unit按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式需要引用Rest API單元。

# 7.1. 程式初始設定

  該程式無程式初始設定。

# 7.2. 事件設定

  • ⑤UgTimer01-OnTimer事件

  計時器事件，定時重新整理LED燈的狀態。

    //JScript
function UgTimer01OnTimer(sender)
{
  var h= new TIDHttp(Nil);
  var J= new TJSONObject();
  Try
  {
    h.HandleRedirects = true;
    h.ReadTimeout = 5000;
    var ledJSONString = h.Post("http://192.168.0.170/digital/14",nil);
    var Valueled = j.ParseJSONValue(ledJSONString,false,false);
    var LED = TJSONObject(Valueled).get(0).JsonValue.Value;
  if (LED == "0") {
  //滅燈
    UgSwitchImage02.IsChecked = False;
    ugSwitchImage01.IsChecked = False; 
  }
  Else
  //開燈
  {
    UgSwitchImage02.IsChecked = True;
    ugSwitchImage01.IsChecked = True;   
  }
  }
  Finally{
    Valueled.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
    24
    25
    26
    27
    28
    29
    30
    //PasScript
procedure UgTimer01OnTimer(sender: tobject);
var
  LED:String;
  h:TIDHttp;
  ledJSONString:string;
  J:TJSONObject;
  Valueled: TJSONValue;
begin
  h:=TIDHttp.Create(Nil);
  J:=TJSONObject.Create;
  Try
    h.HandleRedirects := true;
    h.ReadTimeout := 5000;
    ledJSONString := h.Post('http://192.168.0.170/digital/14',nil);
    Valueled := j.ParseJSONValue(ledJSONString,false,false);
    LED := TJSONObject(Valueled).get(0).JsonValue.Value;
  if LED = '0' Then
  //滅燈
  Begin
    UgSwitchImage02.IsChecked := False;
    ugSwitchImage01.IsChecked := False; 
  end
  Else
  //開燈
  Begin
    UgSwitchImage02.IsChecked := True;
    ugSwitchImage01.IsChecked := True;   
  End;
  Finally
    Valueled.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
    29
    30
    31
    32
    33
    34
    35
    // Make sure to add code blocks to your code group
    • ⑤ugSwitchImage01屬性設定

      點選開關，向設備發送對應的指令，同時燈的顯示狀態也發生變化。

      //JScript
function ugSwitchImage01OnSwitch(sender)
{
  var h=TIDHttp.Create(Nil);
  var l=TStringList.Create;
  var s;
  Try{
    h.HandleRedirects = true;
    h.ReadTimeout = 5000;
		if (ugSwitchImage01.IsChecked)
    {
      s = h.Post("http://192.168.0.170/led?params=1",nil);
 		  UgSwitchImage02.IsChecked = True;
    }
    else
    {
      s = h.Post("http://192.168.0.170/led?params=0",nil);
 		  UgSwitchImage02.IsChecked = False;   
    }
  }
  Finally{
    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
      24
      //PasScript
procedure ugSwitchImage01OnSwitch(sender: tobject);
Var
  h:TIDHttp;
  l:TStringList;
  s:string;
Begin
  h:=TIDHttp.Create(Nil);
  l:=TStringList.Create;
  Try
    h.HandleRedirects := true;
    h.ReadTimeout := 5000;
		if ugSwitchImage01.IsChecked then
    begin
      s := h.Post('http://192.168.0.170/led?params=1',nil);
 		  UgSwitchImage02.IsChecked := True;
    end
    else
    begin
      s := h.Post('http://192.168.0.170/led?params=0',nil);
 		  UgSwitchImage02.IsChecked := False;   
    end;
  Finally
    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
      // Make sure to add code blocks to your code group

      # 8. 運行結果

        使用滑鼠點選工具欄儲存到資料庫，然後點選運行（Run），測試運行結果。

        點選右側的開關影象，開關打開，上方的燈泡切換為亮燈的狀態，同時連線Arduino開發板的LED發光二極管處於點亮的狀態；在亮燈狀態下，點選右側的開關影象，開關關閉，上方的燈泡切換為燈滅的狀態，同時連線Arduino開發板的LED發光二極管處於關閉的狀態。

      ESP32CAM-MQTT傳輸圖片(WEB)
      RestAPI讀取溫濕度(WEB)

      ← RestAPI讀取溫濕度(WEB)→

      Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved