基於Arduino 用Esp8266燒錄Html文件，實現手機電腦訪問內置網頁控制設備開和關（一）！

**基於Arduino 用Esp8266燒錄Html文件，實現手機電腦訪問內置網頁控制設備開和關！（一）*

一、整體思路

把Esp8266作爲服務器端，手機瀏覽器作爲客戶端，一般地，都是get請求，Esp8266那肯定是要以http協議數據來回復內容的，這內容也就包含了gpio的端口狀態！從而實現了數據交互！

二、Html文件

這裏以臥室控制頁面爲例，如圖及代碼所示：這裏以控制light1爲例，pin?light1=0爲關，pin?light1=1爲開，Html文件源碼見附件。html文件可以根據自己的需要修改。

注意：

寫好的html後，需要將代碼中的《 ’ 》《 " 》替換成《 \ ’ 》《 \ " 》然後再壓縮壓縮工具網址

    <section class='cont' id='Page3'>      <!--          臥室              -->
      <ol>
<button class='button top1'>&#x5367; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x5BA4;</button></a>
<center style='left: -20px; position: relative;'>  
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7167; &#x660E;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x591C; &#x706F;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A97; &#x5E18;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A7A; &#x8C03;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
</center>
      </ol>
    </section>

三、C語言部分
在Arduino中添加以下幾個.H庫文件，安裝Arduino及安裝庫文件這裏不再說明。
打開Arduino IDE，文件->首選項->在“附加開發板管理器網址”輸入
http://arduino.esp8266.com/stable/package_esp8266com_index.json
注意，如果已經輸入過別的網址，多個網址之間以逗號間隔。
如果在下一步中無法下載，可嘗試修改爲
http://wechat.doit.am/package_esp8266com_index.json

重啓IDE，打開工具->開發板->開發板管理器
稍等一會兒，然後拉到最下面，安裝 esp8266 by ESP8266 Community

複製以下代碼在Arduino中，修改WIFI名和密碼。將第二部中壓縮的html 代碼粘貼到String html = " HTML代碼 ";

void pin()部分：html給出指令1和0 2號端口相應的反饋高低電平 digitalWrite(2, LOW)和digitalWrite(2, HIGH) 實現開和關。

void setup(void)部分：//定義端口號16，4，5，2，14，12，13，15，0
pinMode(2, OUTPUT); 可以根據實際進行相應的添加。

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char* ssid = "×××××××";            // WIFI名和密碼
const char* password = "×××××××";
ESP8266WebServer server(80);       // 以下 String html = "  "; 是網頁部分
String html = " HTML代碼 "; 
void pin(){
            if (server.arg("light1")=="1"){digitalWrite(2, LOW);  Serial.println("2-0"); server.send(200, "text/html", html);}   // 2端口
       else if (server.arg("light1")=="0"){digitalWrite(2, HIGH); Serial.println("2-1"); server.send(200, "text/html", html);}  
  }
  void handleRoot(){ server.send(200, "text/html", html);}
  void setup(void){                   //定義端口號16，4，5，2，14，12，13，15，0
  pinMode(2, OUTPUT);  
  Serial.begin(115200);
  WiFi.begin(ssid, password);   // 以下是串口監視器顯示內容。
  Serial.println();
  while (WiFi.status() != WL_CONNECTED) {delay(500); Serial.print("..");}
  Serial.printf("\nConnecting to %s\nIP Address : %s\n", ssid, WiFi.localIP().toString().c_str()); 
  server.on("/", handleRoot);   server.on("/pin", HTTP_GET, pin);  server.begin();}
  void loop(void){server.handleClient();}

四、Arduino燒寫

 準備好Arduino，打開串口監視器，選擇正確的開發板，upload speed，端口號
 準備Esp8266模塊，連接usb，gpio0 接GND，沒接或沒接好可能會報錯。error: espcomm_open failed
 驗證，上傳。大概一到兩分鐘。左下角會顯示“上傳成功”.串口監視器會打印出 IP Address : 192.168.x.x

五、使用

手機或電腦打開 IP地址，如圖所示
主頁是各種模式，起牀模式，用餐模式。參考 void pin()部分：修改相應的端口，定製各種模式。其他的，單個控制，或多組控制。

現在下載附件被自動設置成需要5個積分下載，太麻煩了，這裏直接貼html源碼。

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes' />
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>MeiShang Smarthome Control System</title>
  <style>	
   /* --------------------------選項卡代碼------------------------- */
    .tabs {
      width: 360px;
      margin: 0px auto;         /* 選項卡背景 */
      background-color: LightCyan;
      border: 0px solid #FFF;
      box-sizing: border-box;
    }
    .tabs nav {
      height: 50px;
      text-align: center;
      line-height: 28px;
      overflow: hidden;
      background-color: DarkCyan;        /* 選項卡 */
      display: flex;
      margin: -0.5px auto; 
    }
    nav a {
      display: block;                   /* 選項卡 */
      width: 51.4px;
      border-right: 0px solid #fff;
      font-size:15px;
      color: #FFFFFF;
      text-decoration: none;
    }
    nav a:last-child {
      border-right: none;
    }
    nav a.active {
      background-color: DarkTurquoise	;
    }
    .cont {
      overflow: hidden;
      display: none;
    }
    .cont ol {
      line-height: 20px;
    }
/* -------------------------按鈕控制代碼---------------------------------------------------------------- */
h2,h1{line-height:1%;}
body {
	margin: 0;
  padding: 0;
	background: LightCyan
}

.demo_con {
	width: 360px;
	margin: 40px auto 0
}

.button {
	width: 75px;
	height: 70px;
	text-align: center;
	font-weight: 700;
	color: #FFF;
	border-radius: 1px;
	margin: 0 -4.5px 40px 0;
	position: relative;
	overflow: hidden;
	outline: none;
	border: 0px solid #FFF;
	background: darkcyan;
	font-size: 18px;
	outline:none; 
}
.button.top1 {
	width: 360px;
	height: 45px;
	border: 0px ;
	background: darkcyan;
	font-size: 25px;
	left: -40px; position: relative;
	top: -16px;
}
.button.on {
	width: 30px;
	color: Lime;
	background: DarkTurquoise;
	border-radius: 15px 0px 0px 15px;
	}
.button.off {
	width: 30px;
	color: red;
	background: DarkTurquoise;
	border-radius: 0px 15px 15px 0px;
	}
.button1 {
	width: 100px;
	height: 100px;
	text-align: center;
	font-weight: 100;
	color: darkcyan;
	margin: 0 40px 35px 0;
	position: relative;
	border: 6px solid darkcyan;
	background: LightCyan;
	font-size: 20px;
	border-radius: 50%;
	outline:none; 
}
</style>
</head>

<body>
  <div class='tabs'>
    <section class='cont' id='Page1' style='display:block'>
      <ol>
<center><span style='left: -20px; position: relative;' id='time1'> Time Loading ......</span><script>setInterval('time1.innerHTML=new Date().toLocaleString()',1000);</script></center>


<center ></br>      <!--          總控               -->
<a href='./pin?light1=1'><button type='button' class='button1'>&#x8D77; &#x5E8A;</button></a>
<a href='./pin?light1=0'><button type='button' class='button1'>&#x7528; &#x9910;</button></a>
<a href='./pin?light2=1'><button type='button' class='button1'>&#x4F1A; &#x5BA2;</button></a>
<a href='./pin?light2=0'><button type='button' class='button1'>&#x7761; &#x7720;</button></a>
<a href='./pin?light3=1'><button type='button' class='button1'>&#x79BB; &#x5BB6;</button></a>
<a href='./pin?light3=0'><button type='button' class='button1'>&#x56DE; &#x5BB6;</button></a>
</br>
</center>
      </ol>
    </section>
    <section class='cont' id='Page2' >      <!--          客廳              -->
      <ol>
<button class='button top1'>&#x5BA2; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x5385;</button></a>
<center style='left: -20px; position: relative;'>   
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x5BA2; &#x5385;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x9910; &#x5385;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A97; &#x5E18;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A7A; &#x8C03;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
</center>
      </ol>
    </section>
    <section class='cont' id='Page3'>      <!--          臥室              -->
      <ol>
<button class='button top1'>&#x5367; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x5BA4;</button></a>
<center style='left: -20px; position: relative;'>  
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7167; &#x660E;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x591C; &#x706F;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A97; &#x5E18;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A7A; &#x8C03;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
</center>
      </ol>
    </section>
    <section class='cont' id='Page4'>      <!--          書房              -->
      <ol>
<button class='button top1'>&#x4E66; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x623F;</button></a>
<center style='left: -20px; position: relative;'>   
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7167; &#x660E;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x591C; &#x706F;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A97; &#x5E18;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7A7A; &#x8C03;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
</center>
      </ol>
    </section>
        <section class='cont' id='Page5'>      <!--          廚房              -->
      <ol>
<button class='button top1'>&#x53A8; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x623F;</button></a>
<center style='left: -20px; position: relative;'>    
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7167; &#x660E;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x6CB9;&#x70DF;&#x673A;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x70ED;&#x6C34;&#x5668;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7535;&#x996D;&#x7172;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
</center>
      </ol>
    </section>
        <section class='cont' id='Page6'>      <!--          陽臺              -->
      <ol>
<button class='button top1'>&#x9633; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x53F0;</button></a>
<center style='left: -20px; position: relative;'>   
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7167; &#x660E;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x6D17;&#x8863;&#x673A;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
 
</center>
      </ol>
    </section>
            <section class='cont' id='Page7'>      <!--          浴室              -->
      <ol>
<button class='button top1'>&#x6D74; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x5BA4;</button></a>
<center style='left: -20px; position: relative;'>   
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x7167; &#x660E;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x955C;&#x524D;&#x706F;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br> 
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x53D6; &#x6696;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./pin?light1=1'><button type='button' class='button on '>&#x2714;</button></a>
<button type='button' class='button '>&#x6362; &#x6C14;</button>
<a href='./pin?light1=0'><button type='button' class='button off'>&#x2718;</button></a>
</br>

</center>
      </ol>
    </section>


<!-- ------------------------------底部選項卡---------------->
    <nav style='bottom:1px; position:absolute;'>
      <a href='javascript:;' data-cont='Page1' class='active'><div style='font-size:20px'>&#x24C2;</div><span>&#x4E3B; &#x9875;</span></a>
      <a href='javascript:;' data-cont='Page2'><div style='font-size:30px'>&#x274F;</div><span>&#x5BA2; &#x5385;</span></a>
      <a href='javascript:;' data-cont='Page3'><div style='font-size:30px'>&#x260A;</div><span>&#x5367; &#x5BA4;</span></a>
      <a href='javascript:;' data-cont='Page4'><div style='font-size:30px'>&#x270E;</div><span>&#x4E66; &#x623F;</span></a>
      <a href='javascript:;' data-cont='Page5'><div style='font-size:30px'>&#x2756;</div><span>&#x53A8; &#x623F;</span></a>
      <a href='javascript:;' data-cont='Page6'><div style='font-size:30px'>&#x2600;</div><span>&#x9633; &#x53F0;</span></a>
      <a href='javascript:;' data-cont='Page7'><div style='font-size:30px'>&#x25A6;</div><span>&#x6D74; &#x5BA4;</span></a>
    
    </nav>
  </div>
<!-- ------------------------------開啓自動打開總控---------------->
<script>
  var aArr=document.querySelectorAll('a');
  for(var i=0;i<aArr.length;i++){
      aArr[i].onclick=function(){
         var active=document.querySelector('.active');
         active.classList.remove('active');
         this.classList.add('active');
         var name=this.getAttribute('data-cont');
         var section=document.getElementById(name);
         var cont = document.getElementsByClassName('cont');
         for(var i=0;i<cont.length;i++){
          cont[i].style.display='none';
         }
         section.style.display='block';
      }
  }
</script>
</body>
</html>

基於Arduino 用Esp8266燒錄Html文件，實現手機電腦訪問內置網頁控制設備開和關（一）！