基于Arduino 用Esp8266烧录Html文件，实现手机电脑访问内置网页控制设备开和关（三）！

把Esp8266作为服务器端，手机PC作为客户端，发出get请求，Esp8266以http协议数据来回复gpio的端口状态！从而实现了数据交互！主要应用智能家居，物联网这篇主要是对**(一)**和（二）的优化。新添加了OTA无线更新功能。同样也适用于DHT11温湿度数据显示在网页上

二、Html文件

这里以下图控制页面为例，如图及代码所示：这里以控制x1,m?x1=1为例子，Html文件源码见附件。html文件可以根据自己的需要修改。

写好的html后，需要将代码中的 ’ ， " 替换成 \ ’ ， \ “然后再压缩 Esp8266烧录Html文件优化工具优化好的代码直接粘贴在C语言中，其中如果需要插入端口的状态，按照”+a+"的格式添加，其中a 表示反馈状态，具体见下边说明。

html 参考代码
现在下载附件被自动设置成需要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>
  <link rel='stylesheet' href='http://at.alicdn.com/t/font_1640699_nk29qyrqhco.css'>
  <style>	
h2,h1{line-height:1%;}
body {
	width: 360px;
	margin: 0;
    padding: 0;
	background: LightCyan;
}
.button {
	width: 130px;
	height: 70px;
	text-align: center;
	color: #FFF;
	border-radius: 1px;
	margin: 40px -4.5px 0px 0;
	position: relative;
	overflow: hidden;
	border: 0px solid #FFF;
	background: darkcyan;
	font-size: 12px;
	outline:none; 
	border-radius: 5px 5px 5px 5px;
}
.top1 {
	width: 360px;
	height: 45px;
	color: white;
	border: 0px ;
	background: darkcyan;
	font-size: 25px;
	left: -40px; position: relative;
	top: px;
}
</style>
</head>

<body>
<button class='top1'>Test System</button></a><br />
<center style='left: -20px; position: relative;'>   
<a href='./m?x1=1'><button type='button' class='button '><div class='m x-deng2' style='font-size:40px; color: "+a+";' ></div>&#x5BA2; &#x5385;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./m?x1=2'><button type='button' class='button '><div class='m x-deng' style='font-size:40px; color: "+b+";'></div>&#x9910; &#x5385;</button></a>
</br> 
<a href='./m?x1=3'><button type='button' class='button '><div class='m x-chuanglian' style='font-size:40px; color: "+c+";' ></div>&#x7A97; &#x5E18;</button></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='./m?x1=4'><button type='button' class='button '><div class='m x-kongtiao' style='font-size:40px;' ></div>Re-start</button></a>
</br> 
</center>

</body>
</html>

三、C语言部分
在Arduino中添加以下#include <ESP8266WebServer.h>
#include <ArduinoOTA.h>.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代码 ";

示例中"+a+" 读取GPIO2的状态，String a = (digitalRead(2)) ? "deepskyblue" : "white";，反馈不同的颜色，这里可以根据不同的情况反馈不同的状态。

if (server.arg("x1")=="1"){
                if (digitalRead(2) == 0) {digitalWrite(2, 1); htmlcode();} 
                                    else {digitalWrite(2, 0); htmlcode();}
             }

void m()部分：html给出指令, 2号端口相应的反馈高低电平 digitalWrite(2, LOW)和digitalWrite(2, HIGH) 实现开和关。

void setup(void)部分：//定义端口号16，4，5，2，14，12，13，15，0
pinMode(2, OUTPUT); 可以根据实际进行相应的添加。

#include <ESP8266WebServer.h>
#include <ArduinoOTA.h>
const char* ssid = "MEI";            // WIFI名和密码
const char* password = "13641663122";
ESP8266WebServer server(80);

  void m(){            //-- ("/m", HTTP_GET, m);----"x1")=="1" 房间号==设备号 http:ip/m?x1=1
      String ip  = WiFi.localIP().toString().c_str();  
            if (server.arg("x1")=="1"){
                if (digitalRead(2) == 0) {digitalWrite(2, 1); htmlcode();} 
                                    else {digitalWrite(2, 0); htmlcode();}
             }
            if (server.arg("x1")=="2"){
                if (digitalRead(4) == 0) {digitalWrite(4, 1); htmlcode();} 
                                    else {digitalWrite(4, 0); htmlcode();}
             }
            if (server.arg("x1")=="3"){
                if (digitalRead(5) == 0) {digitalWrite(5, 1); htmlcode();} 
                                    else {digitalWrite(5, 0); htmlcode();}
             }
            if (server.arg("x1")=="4"){ htmlcode(); delay(1000);ESP.restart();}
          else { htmlcode();}     // not found htmllink
       }

  void htmlcode(){ 
    String a = (digitalRead(2)) ? "deepskyblue" : "white";
    String b = (digitalRead(4)) ? "deepskyblue" : "white";
    String c = (digitalRead(5)) ? "deepskyblue" : "white";
    String 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><link rel='stylesheet' href='http://at.alicdn.com/t/font_1640699_nk29qyrqhco.css'><style> h2,h1{line-height:1%;}body {  width: 360px; margin: 0;padding: 0; background: LightCyan;}.button {  width: 130px; height: 70px; text-align: center; color: #FFF;  border-radius: 1px; margin: 40px -4.5px 0px 0;  position: relative; overflow: hidden; border: 0px solid #FFF; background: darkcyan; font-size: 12px;  outline:none;   border-radius: 5px 5px 5px 5px;}.top1 { width: 360px; height: 45px; color: white; border: 0px ; background: darkcyan; font-size: 25px;  left: -40px; position: relative;  top: px;}</style></head><body><button class='top1'>Test System</button></a><br /><center style='left: -20px; position: relative;'> <a href='./m?x1=1'><button type='button' class='button '><div class='m x-deng2' style='font-size:40px; color: "+a+";' ></div>&#x5BA2; &#x5385;</button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./m?x1=2'><button type='button' class='button '><div class='m x-deng' style='font-size:40px; color: "+b+";'></div>&#x9910; &#x5385;</button></a></br> <a href='./m?x1=3'><button type='button' class='button '><div class='m x-chuanglian' style='font-size:40px; color: "+c+";' ></div>&#x7A97; &#x5E18;</button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='./m?x1=4'><button type='button' class='button '><div class='m x-kongtiao' style='font-size:40px;' ></div>Re-start</button></a></br> </center></body></html>";
    
    server.send(200, "text/html", html );}
  void setup(void){                   //-定义端口号16，4，5，2，14，12，13，15，0   一，Esp8266继电器常开，接NO, HIGH； 常闭，接NC,  LOW;
    pinMode(2, OUTPUT); digitalWrite(2, 0);
    pinMode(4, OUTPUT); digitalWrite(4, 0);
    pinMode(5, OUTPUT); digitalWrite(5, 0);
  Serial.begin(115200);  WiFi.mode(WIFI_STA);  WiFi.begin(ssid, password);   
    ArduinoOTA.begin();
  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("/", htmlcode);   server.on("/m", HTTP_GET, m);  server.begin();}
  
  void loop(void){server.handleClient(); ArduinoOTA.handle();}

四、Arduino烧写

 准备好Arduino，打开串口监视器，选择正确的开发板，upload speed，端口号
 准备Esp8266模块，连接usb，gpio0 接GND，没接或没接好可能会报错。error: espcomm_open failed
 验证，上传。大概一到两分钟。左下角会显示“上传成功”.串口监视器会打印出 IP Address : 192.168.x.x

OTA更新，在第一次upload 后，端口号会增加一个192.168.x.x端口号，选择这个端口号。就可以实现OTA无线更新，不需要连接电脑，esp模块只需要5V，或3.3V供电即可。

五、使用

手机或电脑打开 IP地址，如图所示
每个按钮实现一个功能。参考 void m()部分：修改相应的端口，定制各种模式。其他的，单个控制，或多组控制。

基于Arduino 用Esp8266烧录Html文件，实现手机电脑访问内置网页控制设备开和关（三）！

二、Html文件

四、Arduino烧写

五、使用

基於arduino 用ESP8266獲取DHT11溫溼度數據顯示在網頁上

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

ESP8266 HTML按鈕的三種形式隱藏和顯示

基於Arduino用Esp8266的四類控制模式

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

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

基于Arduino 用Esp8266烧录Html文件，实现手机电脑访问内置网页控制设备开和关（三）！

二、Html文件

四、Arduino烧写

五、 使用

五、使用