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

发布时间：2025-05-15 19:14

如何设置家长控制：根据需要限制儿童设备的上网时间和内容访问。 #生活技巧# #数码产品使用技巧# #网络设备设置教程#

基于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);} } } 123456789101112

二，控制界面美化 font-class 引用！

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span> 1

" 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 } 1234567

四，修改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(){ } 1234567891011

五，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>  <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' >  <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'>  <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'>  <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'>  <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'>  <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'>  <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>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237

网址：基于Arduino 用Esp8266烧录Html文件，实现手机电脑访问内置网页控制设备开和关！（二） https://www.yuejiaxmz.com/news/view/975150

⬅️上一篇：融合移动设备操作系统的随想（I）

➡️下一篇：河南移动联合华为成功商用验证网络