假装您已经完成了对webiopi框架的安装

并且已经能在html上控制树莓派io口输入输出的切换和高低电平切换,接下来请开始操作

step1 路径

1、在pi的某个位置创建一个文件夹,例如 /home/pi/myproject 作为主文件夹

2、在myproject中创建python, html两个文件夹

如下:

home
- pi
  - myproject
    - python
    - html

 

step2 python

1、新建script.py文件,如/home/pi/myproject/python/script.py

2、编辑script.py

import webiopi
import datetime
GPIO = webiopi.GPIO
LIGHT = 17 # GPIO pin using BCM numbering
HOUR_ON  = 8  # Turn Light ON at 08:00
HOUR_OFF = 18 # Turn Light OFF at 18:00
# setup function is automatically called at WebIOPi startup
def setup():
    # set the GPIO used by the light to output
    GPIO.setFunction(LIGHT, GPIO.OUT)
    # retrieve current datetime
    now = datetime.datetime.now()
    # test if we are between ON time and tun the light ON
    if ((now.hour >= HOUR_ON) and (now.hour < HOUR_OFF)):
        GPIO.digitalWrite(LIGHT, GPIO.HIGH)
# loop function is repeatedly called by WebIOPi 
def loop():
    # retrieve current datetime
    now = datetime.datetime.now()
    # toggle light ON all days at the correct time
    if ((now.hour == HOUR_ON) and (now.minute == 0) and (now.second == 0)):
        if (GPIO.digitalRead(LIGHT) == GPIO.LOW):
            GPIO.digitalWrite(LIGHT, GPIO.HIGH)
    # toggle light OFF
    if ((now.hour == HOUR_OFF) and (now.minute == 0) and (now.second == 0)):
        if (GPIO.digitalRead(LIGHT) == GPIO.HIGH):
            GPIO.digitalWrite(LIGHT, GPIO.LOW)
    # gives CPU some time before looping again
    webiopi.sleep(1)
# destroy function is called at WebIOPi shutdown
def destroy():
    GPIO.digitalWrite(LIGHT, GPIO.LOW)

 

step3 HTML&JS

1、在html文件夹中创建一个index.html文件,例如 /home/pi/myproject/html/index.html

tips: webiopi.js和jquery.js默认储存在项目源目录中,不需要添加在html文件夹中

2、代码如下

<!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">
    <title>WebIOPi | Light Control</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    webiopi().ready(function() {
        // Create a "Light" labeled button for GPIO 17
        var button = webiopi().createGPIOButton(17, "Light");
        // Append button to HTML element with ID="controls" using jQuery
        $("#controls").append(button);
        // Refresh GPIO buttons
        // pass true to refresh repeatedly of false to refresh once
                webiopi().refreshGPIO(true);
    });
    </script>
    <style type="text/css">
        button {
            display: block;
            margin: 5px 5px 5px 5px;
            width: 160px;
            height: 45px;
            font-size: 24pt;
            font-weight: bold;
            color: white;
        }
        #gpio17.LOW {
            background-color: Black;
        }
        #gpio17.HIGH {
            background-color: Blue;
        }
    </style>
</head>
<body>
    <div id="controls" align="center"></div>
</body>
</html>

 

step4 配置

1、编辑/etc/webiopi/config

config需要修改权限

$sudo su

$chmod 777 config

搜索到[script] 并且添加如下所示代码以加载python脚本

...
[SCRIPTS]
myproject = /home/pi/myproject/python/script.py
...

2、定位到[HTTP],添加如下所示代码使webiopi框架加载HTML

...
[HTTP]
doc-root = /home/pi/myproject/html
...

3、定位到[REST] 可以省略

...
[REST]
gpio-export = 17
gpio-post-value = true
gpio-post-function = false 
...

gpio-export 确定可以在REST API上导出的 GPIO(使用BCM排列)gpio-post-value 允许/禁止远程更改GPIO值(LOW / HIGH)gpio-post-function 允许/禁止远程更改GPIO功能(IN / OUT)

test

sudo webiopi -d -c /etc/webiopi/config

现在可以再8000端口访问 GPIO 17的LED灯(这个LED灯需要自行添加)

1 个评论

  1. 通告:webiopi使用Marco – 通信科协

发表评论