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

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

一、整体思路

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

二、Html文件

这里以卧室控制页面为例,如图及代码所示:这里以控制light1为例,pin?light1=0为关,pin?light1=1为开,Html文件源码见附件。html文件可以根据自己的需要修改。

注意:

写好的html后,需要将代码中的《 ’ 》《 " 》替换成 《 \ ’ 》 《 \ " 》然后再压缩

attachments-2020-09-Ie1KIQyf5f684b478e27a.png

 <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
  • 阅读 ( 476 )

0 条评论

请先 登录 后评论
淡若清风
淡若清风

35 篇文章

作家榜 »

  1. 淡若清风 35 文章
  2. 杨杨 2 文章
  3. cgisky 1 文章
  4. vvvans 0 文章
  5. meow_sir 0 文章
  6. Scott 0 文章
  7. ddd ddd 0 文章
  8. lx 0 文章