Shengkai81@gmail.com：/* 系统搭建 */

2015-10-20T06:44:02Z

‎系统搭建

Shengkai81@gmail.com：Created page with "{| style="width: 800px;" |- | 在很多智能家居的方案中，都会用到利用网页来完成对终端设备的控制，无论是局域网内的控制还是远程控制..."

2015-10-20T06:39:19Z

Created page with "{| style="width: 800px;" |- | 在很多智能家居的方案中，都会用到利用网页来完成对终端设备的控制，无论是局域网内的控制还是远程控制..."

新页面

{| 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]]'''
|}

@@ 第37行： / 第37行： @@
    mount /dev/sda /mnt/usb
-−
 执行后，该设备已经成为了/mnt目录下的名为“usb”的文件。但是，这仅仅是在本次操作中，把U盘挂载到了OpenWrt中，
 下次系统掉电重启依旧需要重新执行命令进行挂载，所以需要设置开机自启动，在/etc/config/fstab文件中进行编辑，执行命令进入vi编辑模式：
@@ 第68行： / 第68行： @@
    <!DOCTYPE html>
    <html>
-	  <head>
+  <head>
-		  <title>OpenWrt conrtol page</title>
+  <title>OpenWrt conrtol page</title>
-	  </head>
+  </head>
-	  <body>
+  <body>
-		  Hello World!
+      Hello World!
-	  </body>
+  </body>
    </html>
@@ 第87行： / 第87行： @@
    <input id="btn1" type="image" src="img/open.jpg" onclick="open_()" >
-   function open_(){
+   function open_()
-	  document.getElementById("img1").src="http://192.168.1.1/cgi-bin/open";
+  {document.getElementById("img1").src="http://192.168.1.1/cgi-bin/open";}
 这是一个“打开”按钮，显示元素是一张存储在网关服务器上的图片，按钮触发的事件是open()，运行了网关服务器目录cgi-bin下的open程序。

项目十三--microWRT 网页控制 - 版本历史

Shengkai81@gmail.com：/* 系统搭建 */

Shengkai81@gmail.com：Created page with "{| style="width: 800px;" |- | 在很多智能家居的方案中，都会用到利用网页来完成对终端设备的控制，无论是局域网内的控制还是远程控制..."