“项目十三--microWRT 网页控制”的版本间的差异

来自Microduino Wikipedia
跳转至： 导航、 搜索
（Created page with "{| style="width: 800px;" |- | 在很多智能家居的方案中，都会用到利用网页来完成对终端设备的控制，无论是局域网内的控制还是远程控制..."）
 
（→‎系统搭建）
 
第37行： 第37行：
  
 
   mount /dev/sda /mnt/usb
 
   mount /dev/sda /mnt/usb
−
+
 
 
执行后，该设备已经成为了/mnt目录下的名为“usb”的文件。但是，这仅仅是在本次操作中，把U盘挂载到了OpenWrt中，
 
执行后，该设备已经成为了/mnt目录下的名为“usb”的文件。但是，这仅仅是在本次操作中，把U盘挂载到了OpenWrt中，
 
下次系统掉电重启依旧需要重新执行命令进行挂载，所以需要设置开机自启动，在/etc/config/fstab文件中进行编辑，执行命令进入vi编辑模式：
 
下次系统掉电重启依旧需要重新执行命令进行挂载，所以需要设置开机自启动，在/etc/config/fstab文件中进行编辑，执行命令进入vi编辑模式：
第68行： 第68行：
 
   <!DOCTYPE html>
 
   <!DOCTYPE html>
 
   <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>
 
   </html>
 
    
 
    
第87行： 第87行：
 
    
 
    
 
   <input id="btn1" type="image" src="img/open.jpg" onclick="open_()" >
 
   <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程序。
 
这是一个“打开”按钮，显示元素是一张存储在网关服务器上的图片，按钮触发的事件是open()，运行了网关服务器目录cgi-bin下的open程序。

2015年10月20日 (二) 06:44的最新版本

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

硬件需求

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

原理介绍

在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程序中需要调用输入、输出库去操作串口。其主要函数的形式有：

    • 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, 可以看到登陆界面。并进行测试，下面是测试结果图。

文件:Webcontrol3.png
Web Control Test Result

软件包下载

Software Package 文件:Software Package

取自“http:///https//wiki.microduino.cn/index.php?title=项目十三--microWRT_网页控制&oldid=10861”