在上一節的《四、1 直接使用GET(URI)的方式控制輸出》中，已示範過如何使用瀏覽器的GET請求行(request Line)中的URI(Uniform Resource Identifier)去控制ESP32開發模組板上內建LED的亮滅，不過這種方式對使用者來說不是很方便，既然我們的ESP32模組板系統已經具有伺服器(Server)的功能了，那就應該讓我們的系統工作在伺服器的環境底下才是！在本小節中將示範使用html語法中超連結的方式，讓使用者在連接上系統的伺服器之後，會看到一個簡單的網頁，並可使用其中的超連結文字去控制ESP32開發板上內建於GPIO2上LED的亮滅。
◎ 範例程式功能與動作說明：
1、以ESP32建立一無線WiFi AP存取點，此AP存取點SSID名稱為 『ESP32_softAP01』，而且不使用密碼，該AP存取點內建伺服器的IP位址為：[ 192.168.4.1 ]。
2、當客戶端裝置連線上ESP32內建伺服器首頁時(也就是只鍵入IP網址[ 192.168.4.1 ])，系統會回應下面【圖四、2-1】的首頁網頁畫面給客戶端。畫面中標記１的『[Soft AP模式] 使用超連結(href)控制單一輸出實習』是本實習的提示訊息內容，而下方標記３的『[LED熄滅]』部分則會依操作狀況改變，其文字部分的顏色是藍色，在此是當使用者連上網頁首頁，或者是點選標記２下面的「”熄滅”」這個超連結選項時，ESP32開發模組板回應的訊息。
圖四、2-1 系統首頁網頁/點選”熄滅”超連結選項畫面
3、當使用者點選上圖中選標記２上方的「”點亮”」這個超連結選項時，系統會回應下面【圖四、2-2】的網頁畫面給客戶端，畫面中標記２的『[LED點亮]』回應訊息一望即知其代表的意思，此時其文字部分的顏色會變為紅色。
圖四、2-2點選”點亮”超連結選項後畫面
◎電路圖：
本實習所使用的電路和上小節一樣，由於只控制一顆LED燈，為了方便起見所以是採用內建於ESP32開發模組板上GPIO2的LED燈，所以就不需要再外接了！
◎程式列表與說明：
以下是這個範例的完整程式列表內容：
/*
ESP32 soft AP 範例四 : 四、2 使用超連結(href)的方式控制單一輸出
*/
#include <WiFi.h>
#include "index.h"
const char* ssid = "ESP32_softAP01";
const char* password = "12345678";
const int LED_Pin=2;
String LED_Status="<font color=blue>LED 熄滅</font>";
WiFiServer server(80);
// 初始化設定程式開始:
void setup()
{
Serial.begin(115200);
pinMode(LED_Pin, OUTPUT); // set the LED pin mode
delay(10);
// We start by connecting to a WiFi network
WiFi.softAP(ssid);
Serial.println("Setting softAP ...");
Serial.println();
Serial.print("Your softAP is : ");
Serial.println(ssid);
Serial.println("IP address: ");
Serial.println(WiFi.softAPIP());
server.begin();
} // 初始化設定程式結束.
// 主迴圈程式開始:
void loop(){
WiFiClient client = server.available(); // listen for incoming clients
// wait for a client (web browser) to connect
if (client)
{
Serial.println("\n[Client connected]");
while (client.connected())
{
// read line by line what the client (web browser) is requesting
if (client.available())
{
String line = client.readStringUntil('\r');
// Check to see if the client request was "GET /H" or "GET /L":
if (line.indexOf("GET /ON") >= 0) {
Serial.println(line);
digitalWrite(2, HIGH); // GET /H turns the LED on
LED_Status="<font color=red>LED 點亮</font>";
}
if (line.indexOf("GET /OFF") >= 0) {
Serial.println(line);
digitalWrite(2, LOW); // GET /L turns the LED off
LED_Status="<font color=blue>LED 熄滅</font>";
}
// wait for end of client's request, that is marked with an empty line
if (line.length() == 1 && line[0] == '\n')
{
String tmpString = MAIN_page; // 取出html網頁回應程式
tmpString.replace("%LED_Status%", LED_Status ); // 帶入LED顯
示狀態至回應網頁
client.print( tmpString );
break;
}
}
}
delay(1); // give the web browser time to receive the data
// close the connection:
client.stop();
Serial.println("[Client disonnected]");
}
} // 主迴圈程式結束.
// 以下部分為「index.h」標籤頁面的內容:
const char MAIN_page[] PROGMEM = R"=====(
HTTP/1.1 200 OK
Content-Type:text/html
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<meta charset='utf-8'>
<style>
body {font-size:100%;}
#main {display: table; margin: auto; padding: 0 10px 0 10px; }
</style>
<title>Soft AP模式-使用超連結(href)控制單一輸出實習</title>
</head>
<body>
<div id='main'>
<h2><center>[Soft AP模式] <br>
使用超連結(href)控制單一輸出實習<br><br>
[%LED_Status%]<br>
請按這裡 <a href='ON'> 點亮 </a> LED.<br>
請按這裡 <a href='OFF'> 熄滅 </a> LED.<br>
</center>
</h3>
</div>
</body>
</html>
)=====";
程式名稱：ESP32_softAP42_1Href.ino
為了配合回應給客客戶端的動態回應訊息，在此新增了一個字串變數：
10. String LED_Status="<font color=blue>LED 熄滅</font>";
這個字串變數使用了html語法中的「font」元素，好讓『LED熄滅』這個回應訊息的文字顏色為藍色。至於初始化程式(setup())部分(15~31行)則是完全一樣。
而在主迴圈(loop())的部分(35~76行)和上一個範例程式主要的不同之處有二，一是49~58行在判斷客戶端所傳來的URI是代表點亮LED的字串『"GET /ON"』﹖還是熄滅LED的『"GET /OFF"』﹖再依照測試結果控制LED的亮滅，並把訊息顯示在Arduino IDE的監控式窗；然後把兩種不同的回應訊息依測試結果放到字串變數「LED_Status」上，在此『LED點亮』這個回應訊息的文字顏色會設定成紅色，以便和LED熄滅時有所區別。
49. if (line.indexOf("GET /ON") >= 0) {
50. Serial.println(line);
51. digitalWrite(2, HIGH); // GET /H turns the LED on
52. LED_Status="<font color=red>LED 點亮</font>";
53. }
54. if (line.indexOf("GET /OFF") >= 0) {
55. Serial.println(line);
56. digitalWrite(2, LOW); // GET /L turns the LED off
57. LED_Status="<font color=blue>LED 熄滅</font>";
58. }
再來就是回傳到網頁部分的字串變數改為「LED_Status」：
62. tmpString.replace("%LED_Status%", LED_Status ); // 帶入LED顯
後面剩下的78~107行是「index.h」這個頁面的內容，是一個完整的html網頁程式，在此一樣是使用C++語言中稱為原始字串 (Raw String) 的語法：
const char MAIN_page[] PROGMEM = R"=====( ……….. )=====";
這個html網頁程式的主體(即94~105行的<body>…</body>中間)部分如下：
94. <body>
95. <div id='main'>
96. <h2><center>[Soft AP模式] <br>
97. 使用超連結(href)控制單一輸出實習<br><br>
98.
99. [%LED_Status%]<br>
100. 請按這裡 <a href='ON'> 點亮 </a> LED.<br>
101. 請按這裡 <a href='OFF'> 熄滅 </a> LED.<br>
102. </center>
103. </h2>
104. </div>
105. </body>
其中的96、97行會實現【圖四、2-1】畫面上方的『[Soft AP模式] 使用超連結(href)控制單一輸出實習』的提示訊息，而99行則會將前面62行所傳來的「LED_Status」字串變數帶入這個html網頁程式中，將最後的輸出結果回應給客戶端的使用者。至於100、101兩行分別是兩個控制LED亮、滅的超連結點。
◎ 執行結果：
圖四、2-3 程式執行後客戶端瀏覽器不同超連結選項顯示畫面
在程式執行之後，開啟手機/平板/筆電的WiFi功能，在看到”ESP32_softAP01”這個AP存取點後點選它，接著啟動瀏覽器，並在網址輸入欄中輸入[ 192.168.4.1 ]這個IP位址並前往。如果連線正常將會看到【圖四、2-3】的畫面，左邊是系統內建伺服器的首頁畫面，同時也是點選「”熄滅”」這個超連結選項時顯示的網頁頁面，此時ESP32開發板上內建於GPIO2的LED是熄滅狀態。而畫面右邊則是點選「”點亮”」這個超連結選項時，客戶端所看到的網頁畫面，同時也會點亮ESP32開發板上的LED。
沒有留言:
張貼留言