前文再续，书接上一回。 为方便简介，将WebIOPi-0.7.1-raspi2复制到pi目录下，并改名为webiopi cpp代码：pi@raspberrypi:~/AlphaBot2/Lib $ mv WebIOPi-0.7.1-raspi2/ ~/webiopi 前一章说道tutorials目录下为一写基础的教程示例。下面我们展示一下怎么使用这些例程。 只需修改一下webiopi的配置文件既可以启动。 cpp代码：pi@raspberrypi:~sudo vi /etc/webiopi/config 编辑配置文件，将脚本文件路径设置为：myscript = /home/pi/webiopi/tutorials/1.basis/script.py HTML文件目录设置为： doc-root = /home/pi/webiopi/tutorials/1.basis 运行如下命令启动webiopi。 - c 后面为配置文件参数。 cpp代码：pi@raspberrypi:~sudo webiopi -c /etc/webiopi/config
在浏览器地址栏内输入树莓派ip地址，端口号8000，按确定会显示如下页面。
打开/home/pi/webiopi/tutorials/1.basis目录下的index.html如下图所示。
下面来分析一下这个HTML文件 【1】 HTML文件包含两个部分，一部分为头，即<head>,另一部分为实体，即<body>. 实体中包含一个ID为controls的div,div表示HTML的一个分区。并设置为中间对齐。 <meta> 设置页面的元信息，设置字符格式为UTF-8 <title> 设置页面的标题，浏览器打开网页时，标签栏会显示页面的标题。 <script> 插入脚本，这里插入两个脚本。一个为webiopi.js，另一个教程为新建的脚本。 <style> 插入HTML文档定义样式信息，这里新建一个css文件，并定义按键的大小间距已经颜色。
【2】 webiopi().ready()为webiopi的初始函数，每次打开页面时会调用这个函数。这个函数的参数也为函数名。 这个函数启动时会调用参数里面的函数。这个函数可以在webiopi.js文件中找到。 cpp代码：WebIOPi.prototype.ready = function (cb) {
w().readyCallback = cb;
}
【3】 var button = webiopi().createGPIOButton(17, "Light"); 创建一个GPIO按钮，按钮和GPIO 17相关联，名称为Light。从webiopi.js中createGPIOButton的代码可以知道。首先创建一个按键。然后按键注册按键按下的事件。当按键按下时，管脚的电平会反转。
cpp代码：WebIOPi.prototype.createGPIOButton = function (gpio, label) {
var button = w().createButton("gpio" + gpio, label);
button.bind(BUTTON_DOWN, function(event) {
w().toggleValue(gpio);
});
return button;
}
【4】 $("#controls").append(button); $("#controls")表示ID名control的元素，这个语句的意思是把button标签加入controls中。
webiopi().refreshGPIO(true); 定时刷新界面。
下面在看一下脚本文件/home/pi/webiopi/tutorials/1.basis/script.py
脚本文件总包含三个函数。 setup为初始化函数，每次网页打开时会调用，函数中设置管脚17为输出状态，并判断当前时间是否在8点到18点之间。如果时则开灯。
loop为循环函数，函数中设置8点开灯，18点关灯。
destroy为销毁函数。网页关闭时会调用此函数关灯。
好的，到这样各位应该对webiopi的使用有一定了解了，webiopi工程一般包含三部分，index.html网页文件，script.py脚本文件，config配置文件。通过上面的讲解再加上一个继电器模块你就可以用手机通过Web网页控制点灯了，是不是瞬间觉得高大上？
设计webiopi开机启动 运行如下命令可以设置开机启动 webiopi. cpp代码：sudo update-rc.d webiopi defaults 取消开机启动可以运行如下命令 cpp代码：sudo update-rc.d webiopi remove
开机启动的默认配置文件为/etc/webiopi/config。如果要设置开机启动则需要修改这个文件，修改脚本文件路径，HTML目录路径。
|
