使用WebIOPi把树莓派变成联网设备

通过一个web界面访问和控制树莓派以及树莓派上连接的设备能为我们打开了一个全新的充满创造性的世界。要让树莓派实现这一能力，还有一种途径—使用WebIOPi。当然要用好 WebIOPi 确实需要一些技术，但使用这个框架创建相对简单的web应用并不像想象中那么复杂。我们前期也讨论了一些关于树莓派远程控制的文章，可扩展查阅：

使用Node.js控制树莓派的GPIO接口

树莓派安装Windows 10 IoT 并实现远程连接

准备工作

第一件事是如何在树莓派上安装 WebIOPi。从 WebIOPi 的网站上下载最新的 WebIOPi-0.7.1.tar.gz文件包，把它放到Raspberry Pi上的 /home/pi 目录。然后,使用以下命令解压缩：

#tar xvzf WebIOPi-0.7.1.tar.gz

切换到WebIOpi目录，运行：

#sudo ./setup.sh

进行安装。启动WebIOPi：

#sudo /etc/init.d/webiopi start

如果希望 WebIOPi 在系统引导时自动启动，请运行

#sudo update-rc.d webiopi defaults

如果 WebIOPi 启动并运行成功，就可以将浏览器地址指向http://raspberrypi:8000 (把 Raspberry Pi 的实际IP地址或域名替换raspberrypi)，然后使用 WebIOPi 用户名和 Raspberry 密码登录即可。(请参阅“更改密码”框。)如果一切正常，应该会看到一个web页面，其中有几个不同的网页链接。

更改密码

如果你的树莓派可以从互联网上直接访问，你应该立即更改默认密码。使用命令：

#sudo webiopi-passwd

输入默认用户名 webiopi , 以及新密码。或者，也可以通过输入所需的用户名并指定密码来替换默认的 webiopi 用户，完成之后，重新启动：

#sudo /etc/init.d/webiopi restart

WEB控制LED

使用WebIOPi，我们可以通过按下web页面上的按钮来打开或关闭特定的GPIO 针。实物连接中需要将LED和一个270欧姆电阻跨接到3.3V和 GPIO 25 引脚上。在web页面中，按下GPIO 25旁边的按钮，可以在输入和输出之间切换状态，从而打开和关闭LED。

WebIOPi工作正常后，我们就可以构建一个简单的web应用程序了，其中包含了一个切换LED状态的按钮。首先创建 /home/pi/project/html 目录。创建一个新的文本文件，将下面中的代码粘贴到其中，并将该文件保存在 /home/pi/project/html目录中，修改名称为index.html。HTML内包含了两个主要的块:一个是JavaScript代码块，其中包含一个函数，该函数定义了一个用于控制GPIO 25针的按钮，以及一个指定外观的CSS样式表。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>WebIOPi | LED Control</title>
  <script type="text/javascript" src="/webiopi.js"></script>
  <script type="text/javascript">
    webiopi().ready(function() {
    var button = webiopi().createGPIOButton(25, "LED");
    $("#controls").append(button);
    webiopi().refreshGPIO(true);
    });
  </script>
  <style type="text/css">
  button {
    display: block;
    margin: 5px 5px 5px 5px;
    width: 105px;
    height: 45px;
    font-size: 24pt;
    font-weight: bold;
    color: white;
  }
  </style>
</head>
<body>
  <div id="controls" align="center"></div>
  </body>
</html>

接下来，需要重新配置WebIOPi，使其使用 /home/pi/project/html 目录作为web文档的根目录。运行：