基於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>