您的位置：首页 > 运维架构

使用webiopi网页控制LED

2015-04-14 00:00 579 查看

摘要: 通过网页方式控制LED

webiopi是一个可控制树莓派GPIO的web框架，该框架面向物联网IoT开发。该项目托管于google，并可在sourceforge上下载到源代码。现在webiopi已经发展到0.7版本，webiopi支持REST Server，CoAP server，并提供python库和javascript库，毫无疑问的说webiopi是一个优秀的框架。

虽然webiopi是一个优秀的框架，但是webiopi由python，javacript语言编写，并提供了REST和CoAP形式访问方式，学习和掌握webiopi需要不少的基础知识。对于那些认为C语言、寄存器操作、16进制协议可以解决一切问题的嵌入式工程师来说，python和javacript，REST和CoAP协议显得臃肿不堪并毫无用处。但是事实并非如此。
【webiopi和其他网页控制LED的区别】
1.后台，完善的RESTAPI可实现GPIO端口的方向控制、输出控制和输入检测。
2.前台，完整的javascript API，方便用户创建标签并和后台API相联系。

一、 webiopi的安装
下载最新的webiopi 并上传到树莓派，然后解压并安装

tar xvzf WebIOPi-0.7.1.tar.gz
cd WebIOPi-0.7.1
sudo ./setup.sh

安装的过程需要持续一些时间，webiopi会自动安装一些必要软件并解决依赖关系。

二、测试安装是否成功
可以输入以下命令：

Webiopi -h

若安装成功会出现以下提示：

三、运行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。

主界面是这样

点击GPIO Header进入

可以查看GPIO引脚的状态

四、完成网页控制LED
安装完webiopi之后，webiopi的home目录为/usr/share/webiopi/htdocs，在htdoc目录中有index.html文件便是上文的导航界面。
现在我们把这个html文件上传到该目录下，命名为myindex.html，内容为：

<!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">
<meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
<title>WebIOPi | Demo</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
webiopi().ready(function() {
// GPIO24和GPIO17为输出
webiopi().setFunction(24, "out");
webiopi().setFunction(17, "out");
var content, button;
content = $("#content");
// 创建一个不同按钮，按钮ID为hold，名称为LED1，并绑定按下和松开事件
button = webiopi().createButton("hold", "LED1", mousedown, mouseup);
content.append(button);
// 创建一个GPIO按钮，编号为GPIO17，按钮名称为LED2
button = webiopi().createGPIOButton(17, "LED2");
content.append(button); // append button to content div
// 不自动刷新界面
webiopi().refreshGPIO(false);
});
function mousedown() {
// GPIO24 输出高电平
webiopi().digitalWrite(24, 1);
}
function mouseup() {
// GPIO24 输出低电平
webiopi().digitalWrite(24, 0);
}
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 160px;
height: 45px;
font-size: 24pt;
font-weight: bold;
color: black;
}
.LOW {
background-color: White;
}
.HIGH {
background-color: Red;
}
</style>
</head>
<body>
<div id="content" align="center"></div>
</body>
</html>

我的物理连线是这样的，把LED小灯的负极连接到6号引脚，负极接到11号引脚（GPIO 17），没有采用专业的图形工具绘制，不喜勿喷

输入以下指令运行程序：

sudo webiopi –c config

浏览器中输入IP地址和端口号： 172.16.2.222:8000

最终效果：按下LED2会点亮，再按以下就会熄灭

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 树莓派 webiopi 控制LED 网页

相关文章推荐

新的分享

章节导航