项目十三--microWRT 网页控制
|
在很多智能家居的方案中，都会用到利用网页来完成对终端设备的控制，无论是局域网内的控制还是远程控制。本教程主要介绍如何在microWRT上搭建 一个网页控制系统。并且利用microduino的Zigbee模块，来完成对设备节点的控制。在这个系统中microWRT将作为一个家庭网关。 硬件需求
原理介绍在MicroWRT上搭建服务器，开发网页控制界面。对控制页面中的按钮进行操作，通过Javascript脚本分析并响应动作，然后将控制命令发给Lua程序， Lua程序将改命令转换后发往MicroWRT的串口。Zigbee模块通过串口和MicroWRT进行双向通信。 基本的控制流如下图所示： 文件:Webcontrol1.png Web Control Flow 系统搭建1. 扩展外部存储 在MicroWRT上搭建服务器，一般需要很多资源。所以就需要一个大的存储空间。但是MicroWRT安装完出厂固件后，16M的Flash空间已经所剩无几，所以首先 我们就要通过usb口扩张一个大容量的存储空间。具体操作方法，可以参考我们前面的教程。下面只给出一个简单的说明。 OpenWrt是Linux的一种发行版，但也精简了好多，为了精简内核，文件系统仅选择了对ext格式的支持。而市场上一般的U盘格式是FAT32，所以， 首先在Ubuntu系统上将U盘格式化成ext4的文件格式，执行命令： mkfs.ext4 /dev/sdb /dev/sdb是Ubuntu识别U盘的文件名。格式化成功之后，将U盘插入网关核心板的USB口，在/dev下查看识别状态，执行命令： ls /dev 可以看到有一个新识别的文件/dev/sda，OpenWrt也把外部设备当做文件，在使用该设备前也需要把文件设置成系统的一个文件， 因此需要挂载该设备到某个目录下，执行命令： mount /dev/sda /mnt/usb 执行后，该设备已经成为了/mnt目录下的名为“usb”的文件。但是，这仅仅是在本次操作中，把U盘挂载到了OpenWrt中， 下次系统掉电重启依旧需要重新执行命令进行挂载，所以需要设置开机自启动，在/etc/config/fstab文件中进行编辑，执行命令进入vi编辑模式： vi /etc/config/fstab 在vi编辑模式中加入以下配置信息： config 'mount'
option 'device' '/dev/sda'
option 'options' 'rw，sync'
option 'enabled_fsck' '0'
option 'enabled' '1'
option 'target' '/mnt/usb'
编辑后，在底层命令模式输入“wq”，保存并退出。 2. uhttpd服务器配置 uhttpd是openwrt上默认的Web服务器，支持CGI，lua脚本，以及静态文件的服务。它是一个精简的服务器， 一般适合作为路由器这样的嵌入式设备使用，或者Web服务器的入门学习。所以在本系统中，就没有舍近求远去安装其他一些功能强大的服务器。 Uhttpd服务器的配置文件位于/etc/config/uhttpd，执行命令：cat /etc/config/uhttpd，可以查看到Uhttpd的默认配置信息， 该配置中，http访问的默认端口是80，https访问的默认端口是443，访问的目录文件/www，证书和密码的文件是/etc/uhttpd.crt和/etc/uhttpd.key， CGI脚本执行的文件是/cgi-bin。本教程中需要在外扩的U盘中实现系统软件和网页界面，所有需要将“option home '/www'”修改为“option home '/mnt/usb/www'”， 也就是把原本http访问的目录修改成U盘里面的www目录。具体的配置文件会放在后面的打包程序中。 我们可以简单测试一下http server 是否工作。 在/mnt/usb下新建目录，执行命令：mkdir /mnt/usb/www，然后在www目录下，创建文件index.html，并vi编辑文件，代码： <!DOCTYPE html>
<html>
<head>
<title>OpenWrt conrtol page</title>
</head>
<body>
Hello World!
</body>
</html>
保存后，执行命令：chmod 777 index.html，使用手机或PC接入无线网“OpenWrt”，在浏览器中输入192.168.1.1，如果看到如下图所示， 就表示服务器配置成功了。 文件:WebContro2.png Web Control HTTP Test 3. Web端程序设计 Web页面主要由按钮和文本框组成。 其中，按钮元素，是用户执行操作的核心控件，点击就能触发相对应的事件。其HTML和javascript设计如下： <input id="btn1" type="image" src="img/open.jpg" onclick="open_()" >
function open_()
{document.getElementById("img1").src="http://192.168.1.1/cgi-bin/open";}
这是一个“打开”按钮，显示元素是一张存储在网关服务器上的图片，按钮触发的事件是open()，运行了网关服务器目录cgi-bin下的open程序。 文本元素，是用作静态输出，其HTML设计如下： <textarea id="text" cols="30" rows="30" disabled="disabled" style=" font-size:48px; color:#F00"> </textarea> 代码中定义了文本框的ID，行、宽，是否支持输入，字体颜色等属性。具体代码可在后面下载包中找到。 4. 串口程序设计 MicroWRT和Zigbee模块之间通过串口进行通信。Zigbee不仅要将网关系统的命令发送给对应地址的底层设备，还需要接受底层设备的数据，并反馈给 上层网关系统。那网页上面下发的命令如何发送到串口呢。这里就需要用到LuCI。在以前的教程中我们也介绍过LuCI，它是Lua和UCI的结合体， UCI的英文名Unified Configuration Interface，是OpenWrt系统的统一配置接口。而Lua是一个小巧的脚本语言，很容易嵌入其它语言。 因此，luCI是OpenWrt系统中，以Lua为运行语言的系统配置接口。它默认运行在Uhttpd服务器中，作为OpenWrt网页配置接口，也拥有自身独立的Web框架。 在编译进Lua程序的OpenWrt系统中，所有用Lua写的程序都是基于Lua库的，而Lua库的统一接口默认位于/usr/bin/lua，因此本研究所有的Lua程序开始都需要加入语句：#!/usr/bin/lua 串口是一个通信接口，在Lua程序中需要调用输入、输出库去操作串口。其主要函数的形式有：
作用是打开文件，参数是文件名和模式字符，返回值是一个新的文件句柄，如果错误返回nil和一条错误信息。其中模式字符有这几种情况：“r”，读模式（默认）；“w”，写模式；“r+”，更新模式，保留之前的数据；“w+”，根性模式，擦除之前的数据。
作用是关闭一个，如果缺省则默认关闭一个输出文件。
作用是以输出方式打开一个文件。
作用是以输入方式打开一个文件。
作用是向一个打开的输出文件写数据。
作用是向一个打开的输入文件读数据。 用以上的库函数，就可以编写串口通信程序。 通过串口写数据时，需要将串口文件当做输出文件打开：io.output (ttyS0)，然后使用写函数，向串口写入需要的数据，例如写入字符io.write(“hello world”)，写入数字io.write(1234567890)。 通过串口读取数据时，需要将串口文件当做输入文件打开：io.input (ttyS0)，然后使用读函数，从串口读取数据，使用读函数，并把读取的数据保存为一个文件。 详细的Lua程序，可以从后面的下载包里获得。 5. Zigbee节点设计 microduino的Zigbee模块，出厂已经烧写好了串口透传程序，我们将它和core模块叠加，就可以从串口接受命令。达到控制直接点的目的。 Zigbee节点程序，可以从后面的下载包里获得。 系统测试完成上面的操作后，启动MicroWRT，使PC连接到MicroWRT上，然后打开浏览器，输入192.168.1.1, 可以看到登陆界面。并进行测试，下面是测试结果图。 文件:Webcontrol3.png Web Control Test Result 软件包下载Software Package 文件:Software Package |
