HTML5技术

利用单片机快速实现家庭智能控制平台 - 小五义(2)

字号+ 作者:H5之家 来源:H5之家 2017-06-29 18:00 我要评论( )

htmlheadtitle智能家庭网络/titlemeta content="width=device-width, initial-scale=1" /style type="text/css"h2{margin-top:4%;margin-bottom:40px;}/style/headbodycenterh2欢迎登录智能家庭网络平台/h2form act

<html> <head> <title>智能家庭网络</title> <meta content="width=device-width, initial-scale=1" /> <style type="text/css"> h2 { margin-top:4%; margin-bottom:40px; } </style> </head> <body> <center> <h2>欢迎登录智能家庭网络平台</h2> <form action="http://www.cnblogs.com/" method="get" accept-charset="utf-8"> <p>用户名: <input type="text" /></p> <p>密 码:  <input type="password" /></p> <input type="Submit" value="登录" /> </form> </center> </body> </html>

  device.html控制页面

<html> <head> <title>智能家庭网络平台</title> <meta content="width=device-width, initial-scale=1" /> <style type="text/css"> h2 { margin-top:4%; margin-bottom:40px; } </style> </head> <body> <center> <h2>欢迎使用智能家庭网络-控制平台</h2> <form action="http://www.cnblogs.com/" method="get" accept-charset="utf-8"> <p>灯光: <input type="Submit" value="ON" /> <input type="Submit" value="OFF" /></p> <p>风扇: <input type="Submit" value="ON" /> <input type="Submit" value="OFF" /></p> </form> </center> </body> </html>

  fail.html登录错误页面(就是把login.html 稍做了一下改动)

<html> <head> <title>智能家庭网络</title> <meta content="width=device-width, initial-scale=1" /> <style type="text/css"> h2 { margin-top:4%; margin-bottom:40px; } </style> </head> <body> <center> <h2>欢迎登录智能家庭网络平台</h2> <form action="http://www.cnblogs.com/" method="get" accept-charset="utf-8"> <p>用户名或密码错误!</p> <p>用户名: <input type="text" /></p> <p>密 码:  <input type="password" /></p> <input type="Submit" value="登录" /> </form> </center> </body> </html>

  

info.txt 这里是用文件存放的用户名和密码(英文逗号分隔),前面是用户名,后面是密码。

这里的用户名和密码是用来登录我们智能家居控制平台的。

admin,123456

  

0×05程序下载测试

使用MicroPython File Uploader 工具,将源代码下载到v202中。工具下载地址:

1、 使用usb数据线将v202接入到电脑,打开设备管理器,查看加载的端口。我的是COM44

※如果驱动安装失败,可以下载CH340的驱动,手动安装。CH340驱动下载地址:

2、 打开MicroPython File Uploader 选择端口,点击[Open]。

3、 取消[Autorun]的打钩,点击红框的文件夹图标,选择源码,点击[Send]等待发送成功。

4、将上面的源码文件都下载到v202中,下载完毕后,点击[Run/Reset]就会开始执行代码

5、开始运行后,红色框内打印的是我们存放在info.txt里的用户名和密码,这个可以自定义。

6、下面桃红色框内打印的是我们v202从路由器那里获取到的IP地址,只要打印了IP地址,说明就成功接入网络了。我的v202获取的IP地址是192.168.1.192。

7、到此,我们的web服务器就搭建完成了。

0×06 智能家庭网络平台的使用 

1、在家庭局域网内,我们可以选用pc或者手机,通过浏览器,打开192.168.1.192 就可以看到登录界面。

2、默认用户名 admin 密码123456 ,大家可以通过修改info.txt 文件来进行修改。

(1)输入错误的用户名和密码会进入错误界面

(2) 输入正确的,进入控制平台

3、接下来,我们就可以通过网页开控制灯光和小风扇了,看我的实验效果图。

这里,我只是做了一个实例,受时间限制,没有再做更深入的开发。大家可以自己结合自己的创意再深入去做。如果能够通过路由器给tpyboard v202设一个外网Ip,这样就可以从外网进行访问,从而完成外网对家内设备的控制。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 一篇文章带你快速入门createjs - beidan

    一篇文章带你快速入门createjs - beidan

    2017-06-22 08:00

  • 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery) - 一个自由的出版人

    微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5

    2017-06-20 10:00

  • 是时候开始用C#快速开发移动应用了 - 腾飞(Jesse)

    是时候开始用C#快速开发移动应用了 - 腾飞(Jesse)

    2017-06-08 16:01

  • 利用gulp对项目html,js,css,图片进行压缩 - 紫竹玉龙

    利用gulp对项目html,js,css,图片进行压缩 - 紫竹玉龙

    2017-06-07 17:02

网友点评
h