这篇文章将为大家详细讲解有关如何使用webiopi网页控制LED，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比奎屯网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式奎屯网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖奎屯地区。费用合理售后完善，十多年实体公司更值得信赖。
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，内容为：
WebIOPi | Demo
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);
}
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;
}
