这篇文章将为大家详细讲解有关如何使用webiopi网页控制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 并上传到树莓派，然后解压并安装
[code]
tar xvzf WebIOPi-0.7.1.tar.gz
cd WebIOPi-0.7.1
sudo ./setup.sh
[/code]
安装的过程需要持续一些时间，webiopi会自动安装一些必要软件并解决依赖关系。
二、 测试安装是否成功
可以输入以下命令：
[code]
Webiopi -h
[/code]
若安装成功会出现以下提示：
三、 运行webiopi
输入以下指令运行webiopi
[code]
sudo webiopi –d –c /etc/webiopi/config
[/code]
【说明】
-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），没有采用专业的图形工具绘制，不喜勿喷
输入以下指令运行程序：
[code]
sudo webiopi –c config
[/code]
浏览器中输入IP地址和端口号： 172.16.2.222:8000
最终效果：按下LED2会点亮，再按以下就会熄灭
关于如何使用webiopi网页控制LED就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
