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

一、整体思路把Esp8266作为服务器端，手机浏览器作为客户端，一般地，都是get请求，Esp8266那肯定是要以http协议数据来回复内容的，这内容也就包含了gpio的端口状态！从而实现了数据交互！...

一、整体思路

把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>

发表于 2020-09-21 14:49
阅读 ( 558 )

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

一、整体思路

二、Html文件

注意：

三、C语言部分

四、Arduino烧写

五、使用

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

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

一、整体思路

二、Html文件

注意：

三、C语言部分

四、Arduino烧写

五、 使用

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

五、使用