树莓派智能车AlphaBot教程8:webiopi(下集)

来自丢石头百科


前文再续,书接上一回。 为方便简介,将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


112615r88qcfxd6x30j8x8.png

运行如下命令启动webiopi。 - c 后面为配置文件参数。

=== cpp代码: ===

pi@raspberrypi:~sudo webiopi -c /etc/webiopi/config


在浏览器地址栏内输入树莓派ip地址,端口号8000,按确定会显示如下页面。


112615z1aqop111k8a77jq.png


打开/home/pi/webiopi/tutorials/1.basis目录下的index.html如下图所示。


112616jnaumuuaambbvbc1.png


下面来分析一下这个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


112616yazxamkk4knka50v.png


脚本文件总包含三个函数。 setup为初始化函数,每次网页打开时会调用,函数中设置管脚17为输出状态,并判断当前时间是否在8点到18点之间。如果时则开灯。


loop为循环函数,函数中设置8点开灯,18点关灯。


destroy为销毁函数。网页关闭时会调用此函数关灯。



好的,到这样各位应该对webiopi的使用有一定了解了,webiopi工程一般包含三部分,index.html网页文件,script.py脚本文件,config配置文件。通过上面的讲解再加上一个继电器模块你就可以用手机通过Web网页控制点灯了,是不是瞬间觉得高大上?




112848cnneei0pkxu8kuop.png

设计webiopi开机启动 运行如下命令可以设置开机启动 webiopi.

=== cpp代码: ===

sudo update-rc.d webiopi defaults
取消开机启动可以运行如下命令

=== cpp代码: ===

sudo update-rc.d webiopi remove


开机启动的默认配置文件为/etc/webiopi/config。如果要设置开机启动则需要修改这个文件,修改脚本文件路径,HTML目录路径。


<title> 设置页面的标题,浏览器打开网页时,标签栏会显示页面的标题。

<script> 插入脚本,这里插入两个脚本。一个为webiopi.js,另一个教程为新建的脚本。
<style> 插入HTML文档定义样式信息,这里新建一个css文件,并定义按键的大小间距已经颜色。

【2】
webiopi().ready()为webiopi的初始函数,每次打开页面时会调用这个函数。这个函数的参数也为函数名。
这个函数启动时会调用参数里面的函数。这个函数可以在webiopi.js文件中找到。

WebIOPi.prototype.ready = function (cb) {
w().readyCallback = cb;
}

【3】
var button = webiopi().createGPIOButton(17, "Light");
创建一个GPIO按钮,按钮和GPIO 17相关联,名称为Light。从webiopi.js中createGPIOButton的代码可以知道。首先创建一个按键。然后按键注册按键按下的事件。当按键按下时,管脚的电平会反转。

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

<a href="data/attachment/portal/201705/03/112616yazxamkk4knka50v.png" target="_blank"><img src="data/attachment/portal/201705/03/112616yazxamkk4knka50v.png"></a>


脚本文件总包含三个函数。
setup为初始化函数,每次网页打开时会调用,函数中设置管脚17为输出状态,并判断当前时间是否在8点到18点之间。如果时则开灯。

loop为循环函数,函数中设置8点开灯,18点关灯。

destroy为销毁函数。网页关闭时会调用此函数关灯。


好的,到这样各位应该对webiopi的使用有一定了解了,webiopi工程一般包含三部分,index.html网页文件,script.py脚本文件,config配置文件。通过上面的讲解再加上一个继电器模块你就可以用手机通过Web网页控制点灯了,是不是瞬间觉得高大上?


<a href="data/attachment/portal/201705/03/112848cnneei0pkxu8kuop.png" target="_blank"><img src="data/attachment/portal/201705/03/112848cnneei0pkxu8kuop.png"></a>


设计webiopi开机启动
运行如下命令可以设置开机启动 webiopi.
sudo update-rc.d webiopi defaults
取消开机启动可以运行如下命令
sudo update-rc.d webiopi remove

开机启动的默认配置文件为/etc/webiopi/config。如果要设置开机启动则需要修改这个文件,修改脚本文件路径,HTML目录路径。

</title>