文档章节

使用webiopi网页控制LED

webxiaohua
 webxiaohua
发布于 2015/04/14 18:29
字数 939
阅读 218
收藏 1

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会点亮,再按以下就会熄灭

© 著作权归作者所有

webxiaohua
粉丝 10
博文 44
码字总数 29786
作品 0
普陀
程序员
私信 提问
使用webiopi控制树莓派的GPIO引脚电平(WEB在线管理)

1、必须安装python开发版,即python-dev,不然后面很多软件都会安装不成功,提示目录无法找到之类的。(教训) 正常情况下,以上在线安装命令即可安装成功,但运气不好的是,笔者在安装时,在...

quanpower
2014/04/20
965
0
arduino WiFi入门课程(2)输入输出+抓取网页内容

     WiFi      wemos D1开发板   需要准备什么   硬件方面需要一块 wemos D1开发板,LED灯、330欧姆电阻以及电脑   软件方面需要arduino IDE   你将学到什么   1、你将学...

Python与Arduino
2018/03/08
0
0
第三章:如何通过网页控制pcDuino的GPIO

前面的2篇帖子已经向大家介绍了如何利用pcDuino搭建一个web服务器和通过网络访问pcDuino的GPIO状态, 第一章:如何将你的pcDuino设置为web服务器 第二章:如何通过网页来读取pcDuino的GPIO状...

pc朵拉
2013/08/08
1K
0
[嵌入式开发板] iTOP-4412实现web控制led

本文转自迅为:http://www.topeetboard.com 大家好,上一章我们讲了在iTOP-4412开发板上搭建web服务器,这一章我 们在前面一章的基础上讲解一下通过web网页实现控制LED。 要实现控制led,我们...

歌之王子殿下
2016/03/14
293
0
【物联网(IoT)开发】使用 Arduino 和 Python在 Bluemix 上开发一个 IoT 应用程序之控制LED灯开关

上篇“【物联网(IoT)开发】Arduino 入门 Hello World(LED闪烁)”只是通过将一段程序烧录到Arduino开发板上控制LEC闪烁,没有任何连网动作,也就是说断开网络提供电源依然还可以工作。本文将...

微wx笑
2016/10/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
8
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部