查看“项目十三--microWRT 网页控制”的源代码

{| style="width: 800px;"
|-
|
在很多智能家居的方案中，都会用到利用网页来完成对终端设备的控制，无论是局域网内的控制还是远程控制。本教程主要介绍如何在microWRT上搭建
一个网页控制系统。并且利用microduino的Zigbee模块，来完成对设备节点的控制。在这个系统中microWRT将作为一个家庭网关。

==硬件需求==

**microWRT开发板
**microWRT U27扩展板
**microduino Zigbee模块

==原理介绍==

在MicroWRT上搭建服务器，开发网页控制界面。对控制页面中的按钮进行操作，通过Javascript脚本分析并响应动作，然后将控制命令发给Lua程序，
Lua程序将改命令转换后发往MicroWRT的串口。Zigbee模块通过串口和MicroWRT进行双向通信。
基本的控制流如下图所示：
[[File:webcontrol1.png|800px|thumb|center|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，如果看到如下图所示，
就表示服务器配置成功了。

[[File:WebContro2.png|800px|thumb|center|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程序中需要调用输入、输出库去操作串口。其主要函数的形式有：
**io.open (filename [， mode])
作用是打开文件，参数是文件名和模式字符，返回值是一个新的文件句柄，如果错误返回nil和一条错误信息。其中模式字符有这几种情况：“r”，读模式（默认）；“w”，写模式；“r+”，更新模式，保留之前的数据；“w+”，根性模式，擦除之前的数据。
**io.close ([file])
作用是关闭一个，如果缺省则默认关闭一个输出文件。
**io.output ([file])
作用是以输出方式打开一个文件。
**io.input ([file]) 
作用是以输入方式打开一个文件。
**io.write(…)
作用是向一个打开的输出文件写数据。
**io.read()
作用是向一个打开的输入文件读数据。
用以上的库函数，就可以编写串口通信程序。
通过串口写数据时，需要将串口文件当做输出文件打开：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, 可以看到登陆界面。并进行测试，下面是测试结果图。

[[File:webcontrol3.png|800px|thumb|center|Web Control Test Result]]

==软件包下载==
Software Package '''[[File:Software Package]]'''
|}