本小節是在修改在前一章ESP8266單機模式的【六、5-1.2 使用超連結(href)的方式控制】小節的範例，並使用上一節中【七．１-4】小節的方法與WiFi分享器連線，同時系統內建一OLED顯示器，以協助使用者了解系統的連線狀況。所謂的超連結(href)就是網頁程式設計html語法中的<a>標籤，以下面這個html程式(“softAP_6_5_1Led3_href.html”)為例，當我們用電腦的瀏覽器開啟它時，可看到【圖六、１９】的畫面，其中用紅色線框起來的部分(即”點亮”與”熄滅”這兩段文字)，就是超聯結的選取點。《softAP_6_5_1Led3_href.html》
1 <!doctype html>
2 <html>
3 <body>
4 <center>
5 <h1>ESP8266 softAP 程式 : 單一LED亮滅使用href<br>
6 按此<a href="LedOn" target="myIframe">點亮</a><br>
7 按此<a href="LedOff" target="myIframe">熄滅</a><br>
8 LED 狀態:<iframe name="myIframe" width="150" height="25" frameBorder="0"><br>
9 </h1>
10 </center>
11 </body>
12 </html>
softAP_6_5_1Led3_href.html
圖七、2-1.2_1 《softAP_6_5_1Led3_href.html》於電腦瀏覽器執行結果
◎ 範例程式功能與動作說明：
1、本範例與上一小節大致相同，會令ESP8266以站點(Station)腳色連接上無線WiFi分享器，並且由使用者自行選定WiFi分享器；此外還會在ESP8266上建構一網頁伺服器，及客戶端連線後的首頁，當使用者連線上時會以超連結的方式供使用者控制ESP8266上LED的亮滅。
2、當連接上無線WiFi分享器後，會在OLED顯示器上顯示由WiFi分享器所分配到的本地IP位址，其畫面和上一小節的【圖七、2-1.1_1】相同。
3、使用者以行動通信裝置連上同一個WiFi分享器並開啟瀏覽器後(不必管OS的種類)，在網址輸入欄輸入所分配到的IP位址，則系統會回應【圖七、2-1.1_2】的網頁畫面給使用者的瀏覽器，也就是由ESP8266這個晶片所建構的伺服器首頁畫面給客戶端。
圖七、2-1.2_2 手機瀏覽器畫面
4、當點選「點亮」這個鏈結時，ESP8266這個模組上內建的LED會點亮，並在『LED狀態：』這段提示文字右邊回應「LED點亮！」的訊息，同時會在OLED顯示器上顯示【圖七、2-1.2_3】左邊的畫面。
圖七、2-1.2_3
5、當點選「熄滅」這個鏈結時，ESP8266模組上內建的LED會熄滅，並在『LED狀態：』這段提示文字右邊回應「LED熄滅！」的訊息，同時會在OLED顯示器上顯示【圖七、2-1.2_4】左邊的畫面。
圖七、2-1.2_4
6、假如使用者在操作的過程發生連線問題，造成指令傳輸錯誤，那麼系統會回應『動作錯誤!』這樣的訊息給客戶端，告訴使用者連線錯誤，同樣的在這裡錯誤訊息不會顯示在OLED顯示器上。
◎電路圖：
本此範例的電路圖與上一節任意一個都相容，不必更改。
◎ 程式列表與說明：
#include "WiFiConnect.h" //include before SSD1306.h if using custom fonts
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include "image.h"
#include "index.h"
WiFiServer server(80);
WiFiClient client;
String html_end="</body></html>";
String Uri;
WiFiConnect wc; // 宣告一WiFiConnect類別物件變數
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
String softSsidChip = "ESP"+String(ESP.getChipId());
const byte indLED=2; // ESP系列模組郵票板指示用LED腳位
const byte ledOn=0;
const byte ledOff=1;
// 連線設定回應副程式:
void configModeCallback(WiFiConnect *mWiFiConnect) {
Serial.println("Entering Access Point!");
Serial.println("進入 AP 存取點模式!");
}
// WiFi連線副程式 :
void startWiFi(boolean showParams = false) {
wc.setDebug(true);
// 設定連線回應副程式
wc.setAPCallback(configModeCallback);
/*
AP_NONE = Continue executing code --> 繼續往下執行
AP_LOOP = Trap in a continuous loop --> 進入無窮AP設定迴圈莊太
AP_RESET = Restart the chip --> 啟動晶片重置動作
*/
// ESP系列模組進入存取點(Access Point)模式畫面:
if ( !wc.autoConnect()) { // try to connect to wifi
// 測試ESPXX系列晶片有沒有再自動連上WiFi分享器
LED_Blink(5,300);
wc.startConfigurationPortal(AP_LOOP);//if not connected show the configuration portal
}
} // WiFi連線副程式結束
// setuo()初始化程式開始:
void setup() {
Serial.begin(115200);
pinMode(indLED,OUTPUT);
digitalWrite(indLED,1);
Serial.println();
Serial.println("Program Start!");
Serial.println("程式開始!");
// initialize with the I2C addr 0x3C
if(display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) // Address 0x3D for 128x64
{
Serial.println("SSD1036 OLED allocation Successed!");
Serial.println("SSD1306 初始化成功!");
}
else {
Serial.println("SSD1306 allocation failed!");
Serial.println("SSD1306 初始化失敗");
for(;;);
}
// Draw bitmap on the screen
display.clearDisplay();
display.setTextSize(2);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("");
display.println(" Program ");
display.println(" Start!");
display.display();
delay(2000);
// 啟動WiFi連線參數清除
// wc.resetSettings(); //helper to remove the stored wifi connection, comment out after first upload and re upload
// 在螢幕上畫出WiFi圖片
display.clearDisplay();
display.drawBitmap(30, 0, WiFiMap2, 70, 40, WHITE);
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,46);
display.println(" Waiting for");
display.println(" Connection...");
display.display();
// 啟動WiFi連線副程式
startWiFi();
Serial.print("Cnnect to : ");
Serial.println(WiFi.SSID());
Serial.print("ESP已連接至:");
Serial.println(WiFi.SSID());
display.clearDisplay();
// Draw bitmap on the screen
display.drawBitmap(30, 0, WiFiMap2, 70, 40, WHITE);
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,40);
display.println("ESP Connect to :");
display.print(" ");
display.println(WiFi.SSID());
display.print(" IP:");
display.println(WiFi.localIP());
display.display();
// WiFi連線成功 :
delay(3000);
Serial.println();
Serial.print("WiFi Connected, IP address: ");
Serial.println(WiFi.localIP());
Serial.print("連線成功, 本地WiFi的IP位址為 : ");
Serial.println(WiFi.localIP());
Serial.println();
LED_Blink(5,400);
delay(1000);
server.begin();
display.clearDisplay();
display.setTextSize(2);
display.setCursor(0,16);
display.println(" System");
display.println(" Ready!");
display.display();
} // setuo()初始化程式結束
// loop()主迴圈程式開始:
void loop() {
client=server.available();
if(!client)
return;
String request="",requests="";
while(client.connected())
{
request=client.readStringUntil('\r');
requests+=request;
if(request=="\n")
break;
}
client.flush();
Serial.println("Request end!");
Uri=requests.substring(requests.indexOf("/"),requests.indexOf("HTTP"));
Uri.trim();
Serial.print("Uri = '");
Serial.print(Uri);
Serial.println("'");
String URI=Uri;
URI.toUpperCase();
if(URI=="/")
handleRoot();
else if (URI=="/LEDON")
LedOn();
else if (URI=="/LEDOFF")
LedOff();
else
handleNotFound();
delay(5);
} // loop()主迴圈程式結束
void handleRoot(){
String s=MAIN_page;
client.print(s);
Serial.println("Client is connected!");
Serial.println();
}
void LedOn() {
digitalWrite(indLED,0);
client.print("LED 點亮");
Serial.println("LED is On!");
Serial.println();
display.clearDisplay();
display.drawBitmap(40, 0, LED_ON, 48, 48, WHITE);
display.setTextSize(2);
display.setCursor(0,50);
display.println(" LED On!");
display.display();
}
void LedOff() {
digitalWrite(indLED,1);
client.print("LED 熄滅");
Serial.println("LED is Off!");
Serial.println();
display.clearDisplay();
display.drawBitmap(35, 0, LED_OFF, 55, 48, WHITE);
display.setTextSize(2);
display.setCursor(0,50);
display.println(" LED Off!");
display.display();
}
void handleNotFound(){
client.print("動作錯誤!");
Serial.print("URI not found -->");
Serial.println(Uri);
Serial.println();
}
// 讓指示LED快閃count次,亮滅時間為dTime秒
void LED_Blink(int count,int dTime)
{
for(int i=0;i<count;i++)
{
digitalWrite(indLED,0);
delay(dTime);
digitalWrite(indLED,1);
delay(200);
}
}
// 以下部分為「image.h」標籤頁面的內容:
// '319-3192981_free-wifi-svg-png-icon-free-download-free', 70x40px
const unsigned char WiFiMap2 [] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff,
0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x7f,
0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x01, 0xff, 0xe0, 0x00, 0x1f, 0xff, 0x00, 0x00, 0x00,
0x0f, 0xfc, 0x00, 0x00, 0x00, 0xff, 0xc0, 0x00, 0x00, 0x3f, 0xe0, 0x00, 0x00, 0x00, 0x1f, 0xf0,
0x00, 0x00, 0xff, 0x00, 0x00, 0x00, 0x00, 0x03, 0xfc, 0x00, 0x01, 0xfc, 0x00, 0x00, 0x00, 0x00,
0x00, 0xfe, 0x00, 0x07, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0x80, 0x0f, 0xc0, 0x00, 0x1f,
0xff, 0xf0, 0x00, 0x0f, 0xc0, 0x1f, 0x80, 0x01, 0xff, 0xff, 0xfe, 0x00, 0x07, 0xe0, 0x3f, 0x00,
0x0f, 0xff, 0xff, 0xff, 0xc0, 0x01, 0xf0, 0x3c, 0x00, 0x3f, 0xf8, 0x00, 0x3f, 0xf0, 0x00, 0xf0,
0x18, 0x00, 0xff, 0x80, 0x00, 0x07, 0xfc, 0x00, 0x60, 0x00, 0x03, 0xfc, 0x00, 0x00, 0x00, 0xff,
0x00, 0x00, 0x00, 0x07, 0xf0, 0x00, 0x00, 0x00, 0x3f, 0x80, 0x00, 0x00, 0x0f, 0xc0, 0x00, 0x00,
0x00, 0x0f, 0xc0, 0x00, 0x00, 0x1f, 0x80, 0x00, 0x00, 0x00, 0x07, 0xe0, 0x00, 0x00, 0x3e, 0x00,
0x07, 0xff, 0x80, 0x01, 0xf0, 0x00, 0x00, 0x1c, 0x00, 0x3f, 0xff, 0xf0, 0x00, 0xe0, 0x00, 0x00,
0x00, 0x00, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xfe, 0x01, 0xff, 0x00, 0x00,
0x00, 0x00, 0x00, 0x07, 0xf0, 0x00, 0x3f, 0x80, 0x00, 0x00, 0x00, 0x00, 0x0f, 0xc0, 0x00, 0x0f,
0xc0, 0x00, 0x00, 0x00, 0x00, 0x1f, 0x80, 0x00, 0x03, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x1e, 0x00,
0x00, 0x01, 0xe0, 0x00, 0x00, 0x00, 0x00, 0x0c, 0x00, 0x00, 0x00, 0xc0, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xfe, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xfe,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0xfe, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0xfc, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};
// 'WiFi_AP4', 55x35px
const unsigned char WiFi_AP4 [] PROGMEM = {
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xff, 0xff,
0xff, 0xfe, 0x7f, 0xff, 0x9e, 0xff, 0xff, 0xff, 0xfc, 0x7f, 0xff, 0x8e, 0xff, 0xff, 0xff, 0xf8,
0xe7, 0xf9, 0xc6, 0xff, 0xff, 0xff, 0xf9, 0xc7, 0xf8, 0xe6, 0xff, 0xff, 0xff, 0xf1, 0xcf, 0x3c,
0xe6, 0xff, 0xff, 0xff, 0xf3, 0x8e, 0x0c, 0x62, 0xff, 0xff, 0xff, 0xf3, 0x8e, 0x0e, 0x62, 0xff,
0xff, 0xff, 0xf1, 0xce, 0x1c, 0xe2, 0xff, 0xff, 0xff, 0xf9, 0xcf, 0x3c, 0xe6, 0xff, 0xff, 0xff,
0xf9, 0xe7, 0x39, 0xc6, 0xff, 0xff, 0xff, 0xfc, 0xff, 0x3f, 0xce, 0xff, 0xff, 0xff, 0xfe, 0x7f,
0x3f, 0x9e, 0xff, 0xff, 0xff, 0xff, 0xff, 0x3f, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0x3f, 0xfe,
0xff, 0xff, 0xff, 0xff, 0xff, 0x3f, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0x3f, 0xfe, 0xff, 0xff,
0xff, 0xff, 0xff, 0x3f, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0x3f, 0xfe, 0xff, 0xff, 0xff, 0xff,
0xff, 0x3f, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0x3f, 0xfe, 0xff, 0xff, 0xff, 0xff, 0xff, 0x3f,
0xfe, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0e, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe6, 0x8f,
0xff, 0xff, 0xff, 0xff, 0xff, 0xe6, 0x8f, 0xff, 0xff, 0xf9, 0xf3, 0xf3, 0xe6, 0x8f, 0xff, 0xff,
0xe0, 0xe0, 0xc1, 0xe6, 0x8e, 0x00, 0x01, 0xe0, 0xe4, 0xc0, 0xe6, 0x8f, 0xff, 0xff, 0xf0, 0xf1,
0xe1, 0xe6, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe6, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe6,
0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xfe
};
// 'led-light-bulb-diode-512', 48x48px
const unsigned char LED_ON [] PROGMEM = {
0xff, 0xff, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x3f,
0xff, 0xff, 0xff, 0xff, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff,
0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x3f, 0xff, 0xff, 0xfc, 0x7f,
0xfe, 0x1f, 0xff, 0xff, 0xf8, 0x3f, 0xfe, 0x0f, 0xff, 0xff, 0xf8, 0x7f, 0xff, 0x0f, 0xff, 0xff,
0xf0, 0xff, 0xff, 0x9f, 0xff, 0xff, 0xf9, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff,
0xc0, 0x03, 0xff, 0xff, 0xff, 0xff, 0x80, 0x01, 0xff, 0xff, 0xff, 0xff, 0x07, 0xe0, 0xff, 0xff,
0xff, 0xfe, 0x1f, 0xf8, 0x7f, 0xff, 0xff, 0xfc, 0x3f, 0xfc, 0x3f, 0xff, 0xff, 0xf8, 0x7f, 0xfe,
0x1f, 0xff, 0xff, 0xf8, 0xff, 0xff, 0x1f, 0xff, 0xff, 0xf8, 0xff, 0xff, 0x1f, 0xff, 0xff, 0xf1,
0xff, 0xff, 0x8f, 0xff, 0x03, 0xf1, 0xff, 0xff, 0x8f, 0xc0, 0x03, 0xf1, 0xff, 0xff, 0x8f, 0xc0,
0x03, 0xf1, 0xff, 0xff, 0x8f, 0xc0, 0x03, 0xf1, 0xff, 0xff, 0x8f, 0xc0, 0xff, 0xf1, 0xff, 0xff,
0x8f, 0xff, 0xff, 0xf1, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xf1, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xf1,
0xff, 0xff, 0x8f, 0xff, 0xff, 0xf1, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xf1, 0xff, 0xff, 0x8f, 0xff,
0xff, 0xf1, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0x80, 0x00, 0x00,
0x01, 0xff, 0xff, 0x80, 0x00, 0x00, 0x01, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe,
0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff,
0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xfc,
0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe,
0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xfe, 0x3f, 0xfc, 0x7f, 0xff, 0xff, 0xff, 0x3f, 0xfe, 0x7f, 0xff
};
// 'led-variant-off2', 55x48px
const unsigned char LED_OFF [] PROGMEM = {
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0xff, 0xff, 0xff, 0xe0, 0x3f, 0xff, 0xfe, 0xff, 0xff,
0xff, 0x00, 0x07, 0xff, 0xfe, 0xff, 0xff, 0xfc, 0x00, 0x03, 0xff, 0xfe, 0xe3, 0xff, 0xf8, 0x00,
0x01, 0xff, 0xfe, 0xc1, 0xff, 0xf0, 0x00, 0x00, 0xff, 0xfe, 0x80, 0xff, 0xf0, 0x00, 0x00, 0x7f,
0xfe, 0xc0, 0x3f, 0xe0, 0x00, 0x00, 0x7f, 0xfe, 0xe0, 0x1f, 0xe0, 0x00, 0x00, 0x3f, 0xfe, 0xf8,
0x0f, 0xe0, 0x00, 0x00, 0x3f, 0xfe, 0xfc, 0x07, 0xf8, 0x00, 0x00, 0x3f, 0xfe, 0xfe, 0x03, 0xfc,
0x00, 0x00, 0x3f, 0xfe, 0xff, 0x00, 0xfe, 0x00, 0x00, 0x3f, 0xfe, 0xff, 0x80, 0x7f, 0x00, 0x00,
0x3f, 0xfe, 0xff, 0xe0, 0x3f, 0x80, 0x00, 0x3f, 0xfe, 0xff, 0xf0, 0x1f, 0xe0, 0x00, 0x3f, 0xfe,
0xff, 0xf8, 0x0f, 0xf0, 0x00, 0x3f, 0xfe, 0xff, 0xfc, 0x03, 0xf8, 0x00, 0x3f, 0xfe, 0xff, 0xfe,
0x01, 0xfc, 0x00, 0x3f, 0xfe, 0xff, 0xff, 0x80, 0xff, 0x00, 0x3f, 0xfe, 0xff, 0xff, 0xc0, 0x7f,
0x80, 0x3f, 0xfe, 0xff, 0xff, 0xe0, 0x3f, 0xc0, 0x3f, 0xfe, 0xff, 0xff, 0xe0, 0x0f, 0xe0, 0x3f,
0xfe, 0xff, 0xff, 0xe0, 0x07, 0xf0, 0x3f, 0xfe, 0xff, 0xff, 0xe0, 0x03, 0xfc, 0x3f, 0xfe, 0xff,
0xf8, 0x00, 0x01, 0xfe, 0x00, 0xfe, 0xff, 0xf8, 0x00, 0x00, 0xff, 0x00, 0xfe, 0xff, 0xf8, 0x00,
0x00, 0x3f, 0x80, 0xfe, 0xff, 0xf8, 0x00, 0x00, 0x1f, 0xc0, 0xfe, 0xff, 0xf8, 0x00, 0x00, 0x0f,
0xf0, 0xfe, 0xff, 0xff, 0xf8, 0x1c, 0x07, 0xff, 0xfe, 0xff, 0xff, 0xf8, 0x1e, 0x03, 0xff, 0xfe,
0xff, 0xff, 0xf8, 0x1f, 0x00, 0xff, 0xfe, 0xff, 0xff, 0xf8, 0x1f, 0x80, 0x7f, 0xfe, 0xff, 0xff,
0xf8, 0x1f, 0x80, 0x3f, 0xfe, 0xff, 0xff, 0xf8, 0x1f, 0x80, 0x1f, 0xfe, 0xff, 0xff, 0xf8, 0x1f,
0x80, 0x0f, 0xfe, 0xff, 0xff, 0xf8, 0x1f, 0x80, 0x03, 0xfe, 0xff, 0xff, 0xf8, 0x1f, 0x80, 0x01,
0xfe, 0xff, 0xff, 0xf8, 0x1f, 0x81, 0x80, 0xfe, 0xff, 0xff, 0xf8, 0x1f, 0x81, 0xc0, 0x7e, 0xff,
0xff, 0xf8, 0x1f, 0x81, 0xe0, 0x3e, 0xff, 0xff, 0xf8, 0x1f, 0x81, 0xf0, 0x0e, 0xff, 0xff, 0xf8,
0x1f, 0x81, 0xf8, 0x06, 0xff, 0xff, 0xfc, 0x1f, 0x81, 0xfe, 0x06, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0x0e, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x9e, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe
};
// 以下部分為「index.h」標籤頁面的內容:
// 將我們的HTML 網頁程式內容直接建構在program memory內:
const char MAIN_page[] PROGMEM = R"=====(
<!doctype html>
<html>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<meta charset='utf-8'>
<link rel='icon' href='data:,\'>
<body>
<center>
單一LED亮滅使用href示範<br>
按此<a href="LedOn" target="myIframe">點亮</a><br>
按此<a href="LedOff" target="myIframe">熄滅</a><br>
LED 狀態:<iframe name="myIframe" width="200" height="25" frameBorder="0"><br>
</center>
</body>
</html>
)=====";
程式名稱：ESP_CH7_2_2_href.ino
本範例程式和上一個幾乎一模一樣，這是因為我們只是修改了網頁部分的html程式而已，從第1行開始到主迴圈(loop())程式結束(第171行)是完全相同，而放在”index.h”這個標籤頁的首頁程式(326~341行)，也只是完全複製了前面的《softAP_6_5_1Led3_href.html》程式而已。
至於後面幾個副程式的內容，也只有和網頁html部分的程式稍作修改而已，而且相較之下比前一個範例程式的內容更簡單，讀者們應該有能力自行看懂才是！以負責實現【圖七、2-1.2_3】這個畫面也就是點亮LED的副程式「LedOn()」來說，和網頁html部分的程式只有下面這一行而已：
184. client.print("LED 點亮");
其他幾個也差不多，如果還是不了解，就請回到前一章的【六、5-1.2 使用超連結(href)的方式控制】小節去研讀一下，應該就可以迎刃而解。
◎ 執行結果：
前面的【圖七、2-1.2_2】至【圖七、2-1.2_4】就是本範例程式執行的結果，其中包括了手機端瀏覽器與ESP8266模組端OLED顯示器畫面的截圖，至於下面的影片則是完整的啟動與操作過程，讀者可比對自己的程式是否也可以得到一樣的結果。
沒有留言:
張貼留言