ezgif-4-5d181e9b42.gif

本文介绍如何在H5页面控制树莓派GPIO

仅实现以BCM编码方式控制GPIO,其他方式未做.

演示地址:http://gpio.exmll.cn/ 点击BCM编码列即可控制对应GPIO

1.部署准备

1.树莓派3b+

2.webpy

3.杜邦线\LED灯若干

2.安装webpy

2.1 pip install web.py

2.2 如果2.1安装失败

使用sudo wget http://webpy.org/static/web.py-0.38.tar.gz

sudo tar -zxvf web.py-0.38.tar.gz

cd web.py-0.38

sudo python setup.py install

3.新建code.py文件

#!/usr/bin/env python

# -*- coding: utf-8 -*-

import web

import sys

defaultencoding = 'utf-8'

if sys.getdefaultencoding() != defaultencoding:

reload(sys)

sys.setdefaultencoding(defaultencoding)

try:

import RPi.GPIO as GPIO

except RuntimeError:

print("导入 RPi.GPIO 时出现错误！这可能由于没有超级用户权限造成的。您可以使用 'sudo' 来运行您的脚本。")

urls = (

'/', 'index',

)

app = web.application(urls, globals())

render = web.template.render('templates/')

class index:

def GET(self):

name = '树莓派40pin引脚对照表'

footnote = '欢迎收藏'

wiringPi = 'wiringPi编码'

BCM = 'BCM编码'

fun = '功能名'

pin = '物理引脚'

web.header('Content-Type', 'text/html; charset=UTF-8')

return (render.index(name,footnote,wiringPi,BCM,fun,pin))

def POST(self):

i = web.input()

channel = i.channel

mode = i.mode

state = i.st

print(i)

stateStr = ''

if state == '1':

stateStr = '高电平'

else:

stateStr = '低电平'

setGPIO(mode,int(channel),int(state))

return ("SUCCEED:以BCM方式设置GPIO%s为%s" % (channel,stateStr))

def setGPIO(mode,channel,state):

if mode == 'BOARD':

GPIO.setmode(GPIO.BOARD)

if mode == 'BCM':

GPIO.setmode(GPIO.BCM)

GPIO.setwarnings(False)

GPIO.setup(channel, GPIO.OUT)

GPIO.output(channel, state)

if __name__ == "__main__":

# web.wsgi.runwsgi = lambda func, addr=None: web.wsgi.runfcgi(func, addr)

app.run()

4.新建templates文件夹 并在文件下新建index.html

$def with (name,footnote,wiringPi,BCM,fun,pin)

$name

jQuery(document).ready(function(){

jQuery("li").click(function(){

state = 1;

if(jQuery(this).hasClass("bcm"))

{

if(jQuery(this).hasClass("outColor"))

{

state = 0;

jQuery(this).removeClass("outColor");

}else

{

state = 1;

jQuery(this).addClass("important outColor");

}

jQuery.post("/",{

channel:jQuery(this).text(),

mode:"BCM",

st:state

},

function(data,status){

alert(data);

});

}

if(jQuery(this).hasClass("bord"))

{

alert(jQuery(this).text()+"bcm");

}

});

});

body ul li{

text-align:center;

height:40px;

line-height:40px;

}

.outColor{

color: red;

}

.threev{

background-color:rgb(255,160,32);

}

.firvev{

background-color:rgb(255,33,21);

color: white;

border: 1px solid black;

}

.gray{

background-color:rgb(190,192,191);

border: 1px solid black;

}

.white{

background-color:rgb(255,255,255);

border: 1px solid black;

}

.bcm{

background-color:rgb(255,239,176);

border: 1px solid black;

}

.wiringpi{

background-color:rgb(199,237,160);

border: 1px solid black;

}

.darkblue{

background-color:rgb(5,51,255);

color: white;

border: 1px solid black;

}

.blue{

background-color:rgb(1,255,255);

color: black;

border: 1px solid black;

}

.black{

background-color:rgb(0,0,0);

color: white;

border: 1px solid black;

}

.grassgreen{

background-color:rgb(148,222,73);

border: 1px solid black;

}

.purple

{

background-color:rgb(157,68,185);

color: white;

border: 1px solid black;

}