基于Arduino 用Esp8266烧录Html文件,实现手机电脑访问内置网页控制设备开和关!(二)
在上一篇的基础上优化控制方式,界面美化和分布式控制。html 可以直接在arduino中上传到esp8266,。也可以用HBuilder打包成APP,手机端安装访问,两者区别不大,app端访问无延迟。
一,Esp8266控制方式的优化!
这里参考:基于Arduino 用Esp8266烧录Html文件,实现手机电脑访问内置网页控制设备开和关!(一)
第一篇文章控制IO端口的开和关分别两个不同的按钮,通过href=’./pin?light0=1’和href=’./pin?light0=0’实现。
介绍通过一个按钮控制IO端口的开关,html 代码部分还是href=’./pin?light0=0’。在C语言部分加入判断语句,读取IO端口的状态。代码如下:
void pin(){
int val2 = digitalRead(2); // 读取端口的状态
if (server.arg("light1")=="1"){
if (val2 == LOW) {digitalWrite(2, HIGH); Serial.println("2-1"); server.send(200, "text/html", html);}
else {digitalWrite(2, LOW); Serial.println("2-0"); server.send(200, "text/html", html);}
}
int val4 = digitalRead(4); // 读取端口的状态
if (server.arg("light2")=="2"){
if (val4 == LOW) {digitalWrite(4, HIGH); Serial.println("4-1"); server.send(200, "text/html", html);}
else {digitalWrite(4, LOW); Serial.println("4-0"); server.send(200, "text/html", html);}
}
}
二,控制界面美化 font-class 引用!
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 “iconfont”。
三,设置静态ip
IPAddress local_IP(192, 168, 31, 204); // 192.168.31一定要与路由器ip地址相同
IPAddress gateway(192, 168, 31, 1); // 同上
IPAddress subnet(255, 255, 255, 0);
void setup(){
WiFi.config(local_IP, gateway, subnet);
WiFi.mode(WIFI_STA); //设置静态IP
}
四,修改esp8266 hostname
#include <ESP8266WiFi.h>
String hostname(); bool hostname(char* aHostname);bool hostname(const char* aHostname); bool hostname(String aHostname);
void setup() {
Serial.begin(115200);
WiFi.begin();
Serial.printf("\n Default hostname: %s ", WiFi.hostname().c_str()); //Default hostname: ESP_XXXXXX to New hostname
WiFi.hostname("MX-02");
Serial.printf(" New hostname: %s\n", WiFi.hostname().c_str());
}
void loop(){ }
五,Esp8266控制的另一种办法!
常见的Esp8266 ,可用端口只有9个,但是实际情况,家用物联网上需要的端口远不止这些,如图。
先打印和记录每个模块 ipaddress,设置一个Esp8266模块为主控制,IP Address : 192.168.x.1。副控制模块192.168.x.2,192.168.x.3,192.168.x.4,.。。。。192.168.x.n。在写入的主控制模块的HTML按钮代码中,pin?light1=0为关,pin?light1=1为开修改为192.168.x.2/pin?light1=0为关,192.168.x.2/pin?light1=1为开。其他的以此类推。 用手机访问192.168.x.1 来控制。其他模块。
优点:可以大批量的集中控制,显示温湿度,。
缺点:如果一个副控制模块端口有变化,主控制也需要相应修改。稍微有些麻烦。
后记:
不只是开关信号,还可以添加温度湿度模块,控制伺服电机。
安全问题:
家用物联网,不建议将数据上传到服务器,直接用路由器WIFI控制还是要稳妥一些, 虽然上传服务器,理论上,在任何地方可以用移动网络控制家居设备开关,但是不实用。
附上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>
/* --------------------------选项卡代码------------------------- */
.tabs {
width: 360px;
margin: 0px auto; /* 选项卡背景 */
background-color: LightCyan;
border: 0px solid #FFF;
box-sizing: border-box;
}
.tabs nav {
height: 55px;
text-align: center;
line-height: 30px;
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:12px;
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 {
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: -16px;
}
.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: 12px;
border-radius: 50%;
outline:none;
}
.button2 {
text-align: center;
color: darkcyan;
margin: 0 auto;
float: right;
border: 0px solid darkcyan;
background: LightCyan;
font-size: 20px;
outline:none;
}
</style>
</head>
<body>
<div class='tabs'>
<section class='cont' id='Page1' style='display:block'>
<ol><br />
<center><span style='left: -20px; position: relative;' id='time1'> Time Loading ......</span><script>setInterval('time1.innerHTML=new Date().toLocaleString()',1000);</script></center>
<center ></br> <!-- 总控 0 -->
<a href='./pin?light0=1'><button type='button' class='button1'><div class="m x-icon-test" style="font-size: 35px;" ></div>起 床</button></a>
<a href='./pin?light0=2'><button type='button' class='button1'><div class="m x-chifan" style="font-size: 35px;" ></div>用 餐</button></a>
<a href='./pin?light0=3'><button type='button' class='button1'><div class="m x-huiyi" style="font-size: 35px;" ></div>会 客</button></a>
<a href='./pin?light0=4'><button type='button' class='button1'><div class="m x-shuimian" style="font-size: 35px;" ></div>睡 眠</button></a>
<a href='./pin?light0=5'><button type='button' class='button1'><div class="m x-yuangongchelianglika" style="font-size: 35px;" ></div>离 家</button></a>
<a href='./pin?light0=6'><button type='button' class='button1'><div class="m x-yuangongcheliangjinr" style="font-size: 35px;" ></div>回 家</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page2' > <!-- 客厅1 -->
<ol>
<button class='top1'>客 厅</button></a><br />
<center style='left: -20px; position: relative;'>
<a href='./pin?light1=1'><button type='button' class='button '><div class="m x-deng2" style="font-size:40px;" ></div>客 厅</button></a>
<a href='./pin?light1=2'><button type='button' class='button '><div class="m x-deng" style="font-size:40px;"></div>餐 厅</button></a>
</br>
<a href='./pin?light1=3'><button type='button' class='button '><div class="m x-chuanglian" style="font-size:40px;" ></div>窗 帘</button></a>
<a href='./pin?light1=4'><button type='button' class='button '><div class="m x-kongtiao" style="font-size:40px;" ></div>空 调</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page3'> <!-- 卧室2 -->
<ol>
<button class='top1'>卧 室</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light2=1'><button type='button' class='button '><div class="m x-deng2" style="font-size:40px;"></div>照 明</button></a>
<a href='./pin?light2=2'><button type='button' class='button '><div class="m x-deng1" style="font-size:40px;"></div>夜 灯</button></a>
</br>
<a href='./pin?light2=3'><button type='button' class='button '><div class="m x-chuanglian" style="font-size:40px;"></div>窗 帘</button></a>
<a href='./pin?light2=4'><button type='button' class='button '><div class="m x-kongtiao" style="font-size:40px;"></div>空 调</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page4'> <!-- 书房3 -->
<ol>
<button class='top1'>书 房</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light3=1'><button type='button' class='button '><div class="m x-deng2" style="font-size:40px;"></div>照 明</button></a>
<a href='./pin?light3=2'><button type='button' class='button '><div class="m x-deng1" style="font-size:40px;"></div>夜 灯</button></a>
</br>
<a href='./pin?light3=3'><button type='button' class='button '><div class="m x-chuanglian" style="font-size:40px;"></div>窗 帘</button></a>
<a href='./pin?light3=4'><button type='button' class='button '><div class="m x-kongtiao" style="font-size:40px;"></div>空 调</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page5'> <!-- 厨房4 -->
<ol>
<button class='top1'>厨 房</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light4=1'><button type='button' class='button '><div class="m x-deng2" style="font-size:40px;"></div>照 明</button></a>
<a href='./pin?light4=2'><button type='button' class='button '><div class="m x-tubiao-youyanji" style="font-size:40px;"></div>油烟机</button></a>
</br>
<a href='./pin?light4=3'><button type='button' class='button '><div class="m x-reshuiqi" style="font-size:40px;"></div>热水器</button></a>
<a href='./pin?light4=4'><button type='button' class='button '><div class="m x-dianfanbao" style="font-size:40px;"></div>电饭煲</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page6'> <!-- 阳台5 -->
<ol>
<button class='top1'>阳 台</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light5=1'><button type='button' class='button '><div class="m x-deng2" style="font-size:40px;"></div>照 明</button></a>
<a href='./pin?light5=2'><button type='button' class='button '><div class="m x-xiyiji" style="font-size:40px;"></div>洗衣机</button></a>
</br>
</center>
</ol>
</section>
<section class='cont' id='Page7'> <!-- 浴室6 -->
<ol>
<button class='top1'>浴 室</button></a>
<center style='left: -20px; position: relative;'>
<a href='./pin?light6=1'><button type='button' class='button '><div class="m x-deng2" style="font-size:40px;"></div>照 明</button></a>
<a href='./pin?light6=2'><button type='button' class='button '><div class="m x-huandengpao" style="font-size:40px;"></div>镜前灯</button></a>
</br>
<a href='./pin?light6=3'><button type='button' class='button '><div class="m x-hekriconshebeiyuba" style="font-size:40px;"></div>取 暖</button></a>
<a href='./pin?light6=4'><button type='button' class='button '><div class="m x-fengshan" style="font-size:40px;"></div>换 气</button></a>
</br>
</center>
</ol>
</section>
<!-- ------------------------------底部选项卡---------------->
<nav style='bottom:1px; position:absolute;'>
<a href='javascript:;' data-cont='Page1' class='active'><div class="m x-M" style="font-size:35px;"></div><span >主 页</span></a>
<a href='javascript:;' data-cont='Page2'><div class="m x-keting1" style="font-size:35px;"></div><span >客 厅</span></a>
<a href='javascript:;' data-cont='Page3'><div class="m x-woshi" style="font-size:35px;"></div><span >卧 室</span></a>
<a href='javascript:;' data-cont='Page4'><div class="m x-dushu" style="font-size:35px;"></div><span >书 房</span></a>
<a href='javascript:;' data-cont='Page5'><div class="m x-canju" style="font-size:35px;"></div><span >厨 房</span></a>
<a href='javascript:;' data-cont='Page6'><div class="m x-yangtai1" style="font-size:35px;"></div><span >阳 台</span></a>
<a href='javascript:;' data-cont='Page7'><div class="m x-yushi" style="font-size:35px;"></div><span >浴 室</span></a>
</nav>
</div>
<!-- ------------------------------开启自动打开总控---------------->
<script>
var aArr=document.querySelectorAll('a');
for(var i=0;i<aArr.length;i++){
aArr[i].οnclick=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>