*基于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'>卧 室</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>照 明</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>夜 灯</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>窗 帘</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>空 调</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</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'>起 床</button></a>
<a href='./pin?light1=0'><button type='button' class='button1'>用 餐</button></a>
<a href='./pin?light2=1'><button type='button' class='button1'>会 客</button></a>
<a href='./pin?light2=0'><button type='button' class='button1'>睡 眠</button></a>
<a href='./pin?light3=1'><button type='button' class='button1'>离 家</button></a>
<a href='./pin?light3=0'><button type='button' class='button1'>回 家</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page2' > <!-- 客厅 -->
<ol>
<button class='button top1'>客 厅</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>客 厅</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>餐 厅</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>窗 帘</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>空 调</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page3'> <!-- 卧室 -->
<ol>
<button class='button top1'>卧 室</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>照 明</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>夜 灯</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>窗 帘</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>空 调</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page4'> <!-- 书房 -->
<ol>
<button class='button top1'>书 房</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>照 明</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>夜 灯</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>窗 帘</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>空 调</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page5'> <!-- 厨房 -->
<ol>
<button class='button top1'>厨 房</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>照 明</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>油烟机</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>热水器</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>电饭煲</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page6'> <!-- 阳台 -->
<ol>
<button class='button top1'>阳 台</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>照 明</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>洗衣机</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page7'> <!-- 浴室 -->
<ol>
<button class='button top1'>浴 室</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>照 明</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>镜前灯</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
</br>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>取 暖</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</button></a>
<a href='./pin?light1=1'><button type='button' class='button on '>✔</button></a>
<button type='button' class='button '>换 气</button>
<a href='./pin?light1=0'><button type='button' class='button off'>✘</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'>Ⓜ</div><span>主 页</span></a>
<a href='javascript:;' data-cont='Page2'><div style='font-size:30px'>❏</div><span>客 厅</span></a>
<a href='javascript:;' data-cont='Page3'><div style='font-size:30px'>☊</div><span>卧 室</span></a>
<a href='javascript:;' data-cont='Page4'><div style='font-size:30px'>✎</div><span>书 房</span></a>
<a href='javascript:;' data-cont='Page5'><div style='font-size:30px'>❖</div><span>厨 房</span></a>
<a href='javascript:;' data-cont='Page6'><div style='font-size:30px'>☀</div><span>阳 台</span></a>
<a href='javascript:;' data-cont='Page7'><div style='font-size:30px'>▦</div><span>浴 室</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>