如何使用webiopi网页控制LED

这篇文章将为大家详细讲解有关如何使用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().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;
        }