树莓派学习笔记——webiopi安装与入门

浏览数：67 / 时间：2015年06月09日

0.前言

webiopi是一个可控制树莓派GPIO的web框架，该框架面向物联网IoT开发。该项目托管于google，并可在sourceforge上下载到源代码。现在webiopi已经发展到0.7版本，webiopi支持REST Server，CoAP server，并提供python库和javascript库，毫无疑问的说webiopi是一个优秀的框架。从sourceforge上的信息来看，下载量前三位为美国，德国和英国，天朝的下载量排在了26位（2014年3月8日），所以我觉得应该写点什么普及一下webiopi，并顺便激励一下仍在玩“单片机”的中国嵌入式工程师们，往前走“一步”海阔天空也。

虽然webiopi是一个优秀的框架，但是webiopi由python，javacript语言编写，并提供了REST和CoAP形式访问方式，学习和掌握webiopi需要不少的基础知识。对于那些认为C语言、寄存器操作、16进制协议可以解决一切问题的嵌入式工程师来说，python和javacript，REST和CoAP协议显得臃肿不堪并毫无用处。但是事实并非如此。

如果您还没有入门树莓派，那么可参考我的另外几篇博客，或许会有所收获。

【树莓派学习笔记——GPIO功能学习】熟悉一下树莓派的GPIO

【Yeelink Http请求格式分析】了解一种Restful风格API

【CoAP协议学习——CoAP基础】对CoAP协议有一个简单的认识

1.webiopi的安装

【1】前往sourceforge下载最新版的webiopi

【2】使用FTP软件上传至树莓派（可选非必须）

【3】解压软件并安装，可输入以下命令

$ tar xvzf WebIOPi-x.y.z.tar.gz
$ cd WebIOPi-x.y.z
$ sudo ./setup.sh

【注意】x y z代表webiopi的版本号，使用tar和cd命令之后可使用tab补全webiopi的文件名。安装的过程需要持续一些时间，webiopi会自动安装一些必要软件并解决依赖关系。

【4】测试安装是否成功

可输入以下命令，webiopi -h，若安装成功便可获得以下输出。

图1 验证webiopi是否安装成功

2.运行webiopi

可输入以下指令运行webiopi

sudo webiopi -d -c /etc/webiopi/config

【几点说明】

-d 代表打开调试模式，运行webiopi时会在控制台中输出若干信息。

-c 代表设置配置文件，配置文件的路径为/etc/webiopi/config，配置文件中有哪些内容，这个会在以后的博客中分析。

若未端口设置webiopi的端口，端口号的默认值为8000

在浏览器中输入树莓派的IP地址，例如192.168.1.107:8000。

先会弹出一个登录窗，需要设置用户名和密码。用户名默认为webiopi，默认密码为raspberry。

图2 登录界面

然后便有一个导航界面

图3 导航界面

最后可进入若干功能演示界面。先设置IO口功能为输出，再可设置IO口状态，点击7号“方块”便可翻转IO口状态。

图4 GPIO Header功能演示界面

3.webiopi实现初探

【1】index.html

安装完webiopi之后，webiopi的home目录为/usr/share/webiopi/htdocs，在htdoc目录中有index.html文件便是上文的导航界面。具体的html代码如下：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content = "width = 420, user-scalable = no" /> 
 <title>WebIOPi | Raspberry Pi IoT Framework</title>
</head>
<body>
<h1>WebIOPi Main Menu</h1>
<h2><a href="/app/gpio-header">GPIO Header</a></h2>
<p>Control and Debug the Raspberry Pi GPIO with a display which looks like the physical header.</p>
<h2><a href="/app/gpio-list">GPIO List</a></h2>
<p>Control and Debug the Raspberry Pi GPIO ordered in a single column.</p>
<h2><a href="/app/serial-monitor">Serial Monitor</a></h2>
<p>Use the browser to play with Serial interfaces configured in WebIOPi.</p>
<h2><a href="/app/devices-monitor">Devices Monitor</a></h2>
<p>Control and Debug devices and circuits wired to your Pi and configured in WebIOPi.</p>
</body>
</html>

若点击GPIO Header便会链接到"/app/gpio-header。

【2】gpio-header

gpio-header文件夹下的index.html要稍微复杂一些，具体的文件内容如下：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content = "width = 420, user-scalable = no" /> 
 <title>WebIOPi | GPIO Header</title>
 <script type="text/javascript" src="/webiopi.js"></script>
 <script type="text/javascript">
 webiopi().ready(function() {
  webiopi().RPiHeader().createTable("content");
  w().refreshGPIO(true);
 });
 </script>
</head>
<body>
<div id="content" align="center"></div>
</body>
</html>

【几点说明】

【1】GPIO的控制由webiopi.js中的相关API函数完成，webiopi.js提供了丰富的API函数，可以方便用户在浏览器中创建控件，和一般的WEB框架不同的是，这些控件可以和树莓派联系在一起。

【2】webiopi.js通过REST API控制树莓派的相关GPIO，例如：

# 设置GPIO4 为输出

POST /GPIO/4/function/out

# 设置GPIO4输出高电平

/GPIO/4/value/1

webiopi官方教程说的更具体一些，左边代表浏览器而右侧代表webiopi（树莓派）

w().digitalWrite(4,1) 向webio发送POST请求，更深入分析代码的话需要对javascript和jquery有所了解。

GPIO.digitalWrite(4,1)最终执行了该POST请求，修改了IO口状态，更深入分析的话需要对python有所了解。

图5 webioPi基本框架

4.深入一些

为了更深入分析webiopi的机制，可通过HttpRequester工具验证REST API，这样为深入研究webiopi做些准备。

例如，设置GPIO4为输出状态并设置GPIO4为输出状态。

【几点说明】Http请求工具为firefox浏览器插件，简单实用。当然cRUL工具也可以完成以下步骤。

图6 修改GPIO4为输出

图7 修改GPIO4输出高电平

5.CoAP访问

webiopi除了支持REST之外，还支持CoAP。CoAP是一个轻量级的建立在UDP之上的传输协议。REST API建立在TCP（或者HTTP）之上，在两个设备之间传输实现需要建立TCP连接（三次握手），传输的过程中每个数据包都需要应答，传输接收之后需要关闭连接（二次确认关闭）。而CoAP协议建立在UDP之上，在REST基础上做了简化。CoAP协议首部只有4个字节，传输的过程中又分为需要应答包和不需要应答包，所以相比TCP来说节约了网络带宽更适合小设备使用。CoAP是个不错的协议，幸好webiopi也支持它。

若测试CoAP，可在firefox浏览器中安装copper插件，这使得firefox浏览器可以输入coap开头的url地址，而不仅仅是http开头的url地址。其他的部分和REST相似，例如修改GPIO4的高低电平输出。