PinToo之RestAPI控制LED燈

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;
}

6. 設計明細

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

  ①：TfxSwitchButton元件，控制元件名稱為fxSwitchButton2。

  ②：TfxSwitchButton元件，控制元件名稱為fxSwitchButton1。

• fxRunFrame屬性設定

  • Height：設定頁面高度=800。
  • Width：設定頁面寬度=400。

• ①fxSwitchButton2屬性設定

  • Height：設定控制元件高度=200。
  • Width：設定控制元件寬度=200。
  • HitTest：是否響應點選操作，設定為False。
  • SwitchOffBmp：設定開關狀態為關時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

  • SwitchOnBmp：設定開關狀態為開時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

• ②fxSwitchButton1屬性設定

  • Height：設定控制元件高度=200。
  • Width：設定控制元件寬度=200。
  • SwitchOffBmp：設定開關狀態為關時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

  • SwitchOnBmp：設定開關狀態為開時顯示的影象，雙擊該屬性或者點選屬性右側的[...]打開影象編輯器。點選[Load...]打開資源管理器，選擇所需的圖片後點擊[打開]，選擇的影象會顯示在預覽框中。可在該頁面下進行裁切或者縮放畫素以使影象與控制元件的寬度高度相適應，修改完成後點選[OK]按鈕完成影象修改。

  

7. 程式設計

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

7.1. 程式初始設定

  初始啟動時觸發該事件，獲取LED狀態並顯示。

Procedure fxRunFrameAfterScriptRun(Sender: TObject);
var
  LED: String;
  ledJSONString: String;
  J: TJSONObject;
  data: TJSONArray;
  Valueled: TJSONValue;
begin
  J := TJSONObject.Create;
  Try
    ledJSONString := fxfun.UrlDecode(fxfun.NetHttpGet('http://192.168.0.170/digital/14'));
    Valueled := fxfun.ParseJSONObject(ledJSONString);
    LED := TJSONObject(Valueled).Get(0).JsonValue.Value; 
    if LED = '0' then
    begin
      fxSwitchButton1.IsChecked := False;
      fxSwitchButton2.IsChecked := False;
    end
    else
    begin
      fxSwitchButton1.IsChecked := True;
      fxSwitchButton2.IsChecked := True;    
    end;
  Finally
    J.Free;
  end;   
end;

7.2. 事件設定

• ②fxSwitchButton-OnSwitch事件

  點選開關以開啟/關閉LED燈。

Procedure fxSwitchButton1OnSwitch(Sender: TObject);
Begin
  if fxSwitchButton1.IsChecked then
  begin
    fxfun.NetHttpGet('http://192.168.0.170/led?params=1');
    fxSwitchButton2.IsChecked := True;
  End
  else
  begin
    fxfun.NetHttpGet('http://192.168.0.170/led?params=0');
    fxSwitchButton2.IsChecked := False;
  End;
End;

8. 運行結果

  使用滑鼠在 PinToo 功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  通過同步中心，將程式上傳至手機PinToo運行；同步時，請確保手機已經運行PinToo，並且已經登陸。

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