IOT物聯網之ESP8266的世界: 六、5-1.4 應用篇：實作一手機遙控繼電器電路

六、5-1.4 應用篇：實作一手機遙控繼電器電路

經由前面幾個個範例的說明後，讀者應該對如何控制單一LED的亮滅有些概念了吧！不過如果只是控制LED，可能會覺得不夠成就感，接著就讓我們利用前面學過的範例，在稍作修改後改為透過繼電器去控制一些較大電力的開關或是燈具等家電，這樣設計出來的系統也比較實際。

由於ESP8266的輸出能力並不大，驅動一顆LED燈還OK，如果想直接推動繼電器恐怕是力有未逮，更不要說一般家電用的AC110插座或開關了！為了簡化我們的系統，所以本範例打算使用目前市面上很流行的［ESP8266/ESP-01繼電器WiFi模組］，它的外觀如下面的【圖六、２６】所示：

圖六、２６ ESP8266/ESP-01 WiFi繼電器模組完整外觀

在圖中左上方的是ESP8266/ESP-01 WiFi繼電器模組完整外觀，而右上方的照片是拿掉ESP-01後的零件上視圖，其中用紅線框起來標記１的部分是LED動作的指示LED燈，也是ESP-01這塊模組上的GP00腳；從照片中可看出模組上的繼電器接點可以承受10Amp的電流，其工作電壓交流可到250VAC，即使用在一般的125VAC家庭電源，也可以控制到1250Watt的功率，這麼大的功率對一般的應用來說應該是很夠了。

至於模組左上方標記２黃色8Pin的插座，是供ESP-01連接用的插座，如果參考下方的底視圖可得知，中間標記３綠色2Pin的接線栓是這塊模組的電源輸入腳，工作電壓是5V。至於右邊標記４綠色3Pin的接線栓則是模組上的繼電器輸出控制腳，這個繼電器是所謂的單刀雙擲(SPDT)型繼電器，其中的”COM”是共同腳，”NC”是常閉接點，而”NO”則是常開接點；至於要如何使用就依個人的需要了，一般來說是使用”COM”與”NO”腳，也就是不動作(Off)時兩個點是開路的，當按下開(ON)或啟動時才會連接在一起。

圖六、２７ ESP-01S WiFi模組外觀與接腳名稱

【圖六、２７】是ESP-01S WiFi模組的外觀與接腳名稱，ESP-01這個系列的模組板，可說是ESP8266這個WiFi單晶片的起家模組，由於便宜又容易使用，早就被許多業餘玩家或專業人士所廣泛使用；目前最新的版本是ESP-01S，不過接腳數目與功能還是跟以前一樣，其接腳編號與功能名稱如下：

GND ：ESP-01電源接地腳。
U0TXD/GPIO1 ：非同步串列傳輸埠(UART)0的發送腳。
GPIO2/U1TXD ：主要功能為輸出/入腳GPIO02。
CH_PD/Chip_EN ：晶片致能腳，燒錄時須接到VCC。
GPIO00 ：輸出/入腳GPIO00，燒錄時須接地。
EXT_RSTB ：晶片重置腳。
U0RXD/GPIO3 ：非同步串列傳輸埠(UART)0的接收腳。
VCC/3.3V ：ESP-01電源的+輸入腳，電壓為3.3V過高會燒毀。

【圖六、２７】左邊ESP-01S模組板右下方用紅線框起來的地方，是併接在「GPIO2/U1TXD」腳的一顆LED顯示器，當燒錄程式時這顆LED會隨之閃爍，等燒錄完成後便可以拿來當成輸出/入腳使用。在燒錄ESP-01時，除了要接上與電腦連接的U0TXD (Pin2)與U0RXD(Pin7)之外，在接上電源之前CH_PD(Pin4)與GPIO00(Pin5)還必須分別接到VCC(Pin8/3.3V)及GND電位，否則會無法正常燒錄！由於ESP-01系列模組並不具有與電腦連接的介面，所以大多是使用USB轉UART/RS232模組來燒錄(如【圖六、２８】所示)，或是偷工減料使用Arduino Uno板來代用(如【圖六、２９】所示)亦可！

圖六、２８使用USB轉UART模組燒錄ESP-01

圖六、２９使用Arduino Uno板來取代USB轉UART模組燒錄ESP-01

不過對初學者來說還是經常會弄錯腳位，甚至接到5V的電源，以致於將ESP-01模組燒毀；為了一勞永逸，建議使用【圖六、３０】所示的ESP-01專用USB轉UART燒錄模組，這樣既方便使用，又不必擔心把ESP-01燒壞了！

圖六、３０常見USB轉ESP-01 UART燒錄模組

在前面的章節介紹過的ESP-202實驗模組板，也可以拿來燒錄ESP-01；下面的【圖六、３１】介紹了ESP-202 WiFi模組板外觀接腳名稱，與連接ESP-01方法。如果把ESP-202當成ESP-01燒錄器使用，和原來作為實驗板的差別有兩點，一是標記１所示的兩個跳線接頭的位置，如果兩個接頭都在左邊是作為實驗板之用，此時程式會直接燒錄在板子上面的ESP8266郵票板；如果要拿來燒錄外接的ESP-01，那麼兩個跳線接頭都必須移到在右邊，不過此時標記２的兩個指撥開關的位置就必須撥在1下(OFF)2上(ON)的地方，這剛好和當成試驗板用時相反。

圖六、３１ ESP-202 WiFi模組板外觀接腳名稱與連接ESP-01方法

◎ 範例程式功能與動作說明：

1、使用單一個表單(form)的提交(submit)按鈕控制ESP8266/ESP-01繼電器模組開關動作，電源開機時繼電器是處於不動作(Off)狀態。

2、此按鈕按一次繼電器會啟動(開/On)，再按一次則會繼電器會不動作(關/Off)，而繼電器動作的結果會回傳到連線裝置瀏覽器的螢幕上讓使用者知道。

依照之前的慣例，我們還是先寫一段html的網頁程式，先在電腦上驗證瀏覽器的畫面無誤後，再移植到ESP8266上。下面的《softAP_6_5_1Led6_RY0.html》程式，便是此測試及驗證用的html程式：

<!DOCTYPE html>

<html>

<head>

padding:0 10px 0 10px;} h3,{text-align:center;} h4,{text-align:center;}

.button {padding:10px 10px 10px 10px; width:100%; background-color: pink; font-size:120%;}

.button2 {padding:10px 10px 10px 10px; width:100%; background-color: yellowgreen; font-size:120%;}

</style>

</head>

<body>

<h4>使用手機遙控單一繼電器範例程式</h4>

<h3>繼電器目前狀態 : 關(Off)</h3><br>

</form><br>

</div>

</body>

</html>

程式名稱：softAP_6_5_1Led5_RY0.html

本範例程式是前一小節中的《softAP_6_5_1Led4b_form.html》這個html網頁程式的改良版，其中不同之處只有16~18行的內容改成下面的程式而已，其餘的部分完全一樣。

16. <h4>使用手機遙控單一繼電器範例程式</h4>

17. <h3>繼電器目前狀態 : 關(Off)</h3><br>

18. <form action='LedOff'><input class='button' type='submit' value='開(On)'>

為了減少程式的變動，所以當控制按鈕按下時所送出的RUI和前一個範例一樣，分別是代表啟動的「/LedOn」，和關閉的「/LedOff」，這樣整個ESP8266的程式就只有網頁html部分需要稍作修改就可以套用了！

圖六、３２《softAP_6_5_1Led5_RY0.html》於電腦瀏覽器執行結果

上面的【圖六、３２】是《softAP_6_5_1Led5_RY0.html》這個html程式在電腦上瀏覽器執行結果，畫面符合我們的需求，因此我們只要將前一個範例程式《softAP_6_5_1Led6_but.ino》中，網頁html部分程式稍作修改就可以了。

以下是此範例程式的完整列表：

#include <ESP8266WiFi.h> // 引入ESP8266專用的WiFi函式庫

//----------------------------------------------

// 將我們的HTML 網頁程式內容直接建構在program memory內:

const char MAIN_page[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<head>

padding:0 10px 0 10px;} h3,{text-align:center;} h4,{text-align:center;}

.button {padding:10px 10px 10px 10px; width:100%; background-color:pink; font-size:120%;}

.button2 {padding:10px 10px 10px 10px; width:100%; background-color:yellowgreen; font-size:120%;}

</style>

</head>

<body>

<h4>使用手機遙控單一繼電器範例程式</h4>

)=====";

//---------------------------------------------------

String softSsid = "ESP_softAP01"; // 設定AP存取點的SSID名稱

const char* softPassword = "12345678"; // 設定AP存取點的密碼值

const byte LED=0; // 將繼電器輸出控制腳改為GPIO00

String URI;

String html_LedOn="<form action='LedOn'><input class='button' type='submit' value='開(On)'></form><br>"; // 啟動繼電器的html表單程式

String html_LedOff="<form action='LedOff'><input class='button2' type='submit' value='關(Off)'></form><br>"; // 關閉繼電器的html表單程式

String html_end="</div></body></html>";

String html_Echo="";

IPAddress local_IP(192,168,0,100);

IPAddress gateway(192,168,0,1);

IPAddress subnet(255,255,255,0);

WiFiServer server(80);

WiFiClient client;

void setup() {

// put your setup code here, to run once:

pinMode(LED,OUTPUT); // 設定GPIO00腳為輸出腳

digitalWrite(LED,1); // 先讓GPIO00(繼電器控制腳)不動作(‘0’啟動)

Serial.begin(115200);

Serial.println();

Serial.print("Setting soft-AP with configuratin... ");

WiFi.softAPConfig(local_IP,gateway,subnet); // 設定新的本的IP位址

boolean result=WiFi.softAP(softSsid);

if(result==true)

{ // 初始化設定AP存取點成功

Serial.println("soft-AP ready!");

Serial.print("softAP = "); // 在Arduino IDE串列監控視窗中顯示目前

Serial.println(softSsid); // 顯示SSID名稱

Serial.print("softIP = "); // 在Arduino IDE串列監控視窗中顯示目前使用的

Serial.println(WiFi.softAPIP()); // 本地IP位址，在此為[ 192.168.0.100 ]

server.begin(); // 啟動伺服器功能

}

else

Serial.println("soft-AP failed");

}

// 主迴圈程式區：

void loop() {

client=server.available();

if(!client)

return;

URI=client.readStringUntil('\r');

client.flush();

Serial.println("Request end!");

Serial.print("Uri = ");

Serial.println(URI);

if(URI.indexOf("/LedOn")>0)

LedOn();

else if (URI.indexOf("/LedOff")>0)

LedOff();

else if (URI.indexOf("/")>0)

handleRoot();

else

handleNotFound();

delay(5);

} // 主迴圈程式結束

// 處理首頁’/’請求的自訂函式：

void handleRoot(){

html_Echo="<h3>繼電器目前狀態 : 關(Off)</h3><br>";

String s=MAIN_page; // 取的網頁的前半段html語言程式碼

s+=html_Echo; // 加上狀態訊息字串

s+=html_LedOn; // 加入html語言表單按鈕程式碼字串

s+=html_end; // 加入網頁結尾的html語言程式碼字串

client.print(s); // 送除回應訊息給發出請求的客戶端

Serial.println("Client is connected!");

Serial.println();

}

// 處理啟動繼電器(LedOn)請求的事件對應函式：

void LedOn() {

html_Echo="<h3>繼電器目前狀態 : 開(On)</h3><br>";

String s=MAIN_page; // 取的網頁的前半段html語言程式碼

s+=html_Echo; // 加上狀態訊息字串

s+=html_LedOn; // 加入html語言表單按鈕程式碼字串

s+=html_end; // 加入網頁結尾的html語言程式碼字串

client.print(s); // 送除回應訊息給發出請求的客戶端

digitalWrite(LED,0); // 啟動繼電器

Serial.println("LED is On!");

Serial.println();

}

// 處理關閉繼電器(LedOff)請求的事件對應函式：

void LedOff() {

html_Echo="<h3>繼電器目前狀態 : 關(Off)</h3><br>";

String s=MAIN_page; // 取的網頁的前半段html語言程式碼

s+=html_Echo; // 加上狀態訊息字串

s+=html_LedOn; // 加入html語言表單按鈕程式碼字串

s+=html_end; // 加入網頁結尾的html語言程式碼字串

client.print(s); // 送除回應訊息給發出請求的客戶端

digitalWrite(LED,1); // 關閉繼電器

Serial.println("LED is Off!");

Serial.println();

}

void handleNotFound(){

String s=MAIN_page;

s+="<h3>動作錯誤! ==> ";

s+=URI;

s+="</h3><br>";

s+=html_end;

client.print(s);

Serial.print("URI not found -->");

Serial.println(URI);

Serial.println();

}

程式名稱：softAP_6_5_1Led6_RY0.ino

◎ 程式說明：

《softAP_6_5_1Led6_RYO.ino》這個範例程式可說是前面【六、5-1.3】小節中的《softAP_6_5_1Led6_but.ino》程式改良版；其中的5~22行是在實作《softAP_6_5_1Led6_RY0.html》這個html網頁程式的前半段(1~16行)，然後把表單按鈕的html語言部分以“html_LedOn”和”html_LedOff”這兩個html語法的字串變數來取代(30~33行)：

String html_LedOn="<form action='LedOn'><input class='button' type='submit' value='開(On)'></form><br>";

String html_LedOff="<form action='LedOff'><input class='button2' type='submit' value='關(Off)'></form><br>";

最後再加上一段html網頁語法的結尾字串“html_end”(34行)：

String html_end="</div></body></html>";

而初始化程式(setup())與主迴圈(loop())程式部分一字不改的沿用就可以，其他要修改的部分就是剩下的幾個自訂的URI服務函式，其中網頁首頁的服務函式《void handleRoot()》與繼電器關閉函式《void LedOff()》，是把輸出狀態訊息改成繼電器狀態訊息(92與118行)：

html_Echo="<h3>繼電器目前狀態 : 關(Off)</h3><br>";

至於繼電器啟動函式《void LedOn()》，則是改成下面的內容(105行)就可以了：

html_Echo="<h3>繼電器目前狀態 : 開(On)</h3><br>";

由於沒有刻意去修飾一些文字，所以整個程式只需要做些許的變動，就可以從控制LED的亮滅，改成控制繼電器的開關動作，這樣是不是很簡單呢﹖

◎ 執行結果：

【圖六、３３】是手機瀏覽器連線後螢幕的畫面，和上一個範例的差別是畫面中的最上面一行是『使用手機遙控單一繼電器範例程式』的提示訊息；因為是剛連上網頁的首頁，所以會看到標記１的網址輸入欄位列的內容是[ 192.168.0.100 ]，而且「繼電器目前狀態：」這段文字的右邊(標記２)是顯示「關(Off)」，至於控制用的按鈕(標記３)上的提示文字則是[開(On)]。

圖六、３３手機連線ESP8266/ESP-01 WiFi繼電器模組後瀏覽器畫面

【圖六、３４】上方是按下開啟(開/On)按鈕後手機螢幕的畫面，下方則是繼電器實際開關的狀態，此時接在GPIO00的LED燈是點亮的；在標記１的網址輸入欄位列的內容會變成[ 192.168.0.100 /LedOn?]，而且「繼電器目前狀態：」這段文字的右邊(標記２)是顯示[開(On)]，至於控制用的按鈕(標記３)上的提示文字則切換成「關(Off)」。

圖六、３４按下開啟(開/On)按鈕後瀏覽器畫面與繼電器狀態

【圖六、３５】是按下關閉(關/Off)按鈕後的畫面，看起來和【圖六、３３】幾乎一模一樣，只是標記１的網址輸入欄位列的內容會變成[ 192.168.0.100 /LedOff?]而已，控制用的按鈕(標記３)上的提示文字又再次切換回「關(Off)」，以後手機瀏覽器的畫面就只會在【圖六、３４】與【圖六、３５】之間切換。由於標記２是顯示[關(Off)]，所以下面繼電器照片中接在GPIO00的LED燈是熄滅的。

圖六、３５按下關閉(關/Off)按鈕後瀏覽器畫面及繼電器狀態

IOT物聯網之ESP8266的世界

2020年7月27日星期一

六、5-1.4 應用篇：實作一手機遙控繼電器電路

沒有留言:

張貼留言

2020年7月27日 星期一

六、5-1.4 應用篇：實作一手機遙控繼電器電路

沒有留言:

張貼留言

2020年7月27日星期一