树莓派4B+ 手机h5网页控制GPIO

最新推荐文章于 2022-04-22 21:01:07 发布

L_Y000

最新推荐文章于 2022-04-22 21:01:07 发布

阅读量1k

点赞数

文章标签： python web app html5

本文链接：https://blog.csdn.net/L_Y000/article/details/121826989

版权

借鉴自：树莓派3B+ 手机h5网页控制GPIO - 简书 (jianshu.com)

源码亲测有效，有细微的问题需要注意。

1.安装web.py

我用的是python3，所以需改为pip3

pip3 install web.py

成功安装界面如下

2.新建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()

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

$def with (name,footnote,wiringPi,BCM,fun,pin)
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$name</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<script>
         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");
                  }

             });
         });

    </script>
<style>
   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;
    }
</style>
</head>
<body>
<div data-role="page" id="pageone" data-theme="f" >
    <div data-role="header">
        <h1>$name</h1>
    </div>
    <div  class="ui-grid-a mgin">
        <div class="ui-block-a">
            <div class="ui-grid-c" data-role="navbar">
                <ul>
                    <li class="wiringpi">$wiring