树莓派-通过Web控制GPIO针脚输出高低电平

最新推荐文章于 2024-08-02 20:11:41 发布
最新推荐文章于 2024-08-02 20:11:41 发布
阅读量8.2k 收藏 21
点赞数 1
分类专栏： 物联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a497785609/article/details/77984906
版权

接着上一篇《树莓派-通过Web网页实现对树莓派的关机和重启操作》的思路继续扩展，通过Web网页来控制GPIO针脚的电平输出。

实现思路

1.通过在树莓派上搭建一个http服务器，如：Apache，增加一个控制树莓派的页面。
2.通过在树莓派的控制页面，写入需要在终端执行的命令。
3.服务器端通过python，定时读取文件内容，执行终端命令。

效果图


实现步骤

1.搭建php+Apache环境：
本文主要描述程序编写，如何搭建php+Apache环境，可以网上查找资料，自行实现。
2.编写Web网页控制端：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>树莓派Web控制中心</title>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .page-header { margin: 20px 0; border-bottom: 1px solid #eee; padding-bottom: 0; text-align: center; }
        .btn-item { text-align: center; }
        i { margin-right: 3px; display: inline-block; }
        h1 { text-align: center; }
        .tip { font-weight: bold; color: black; }
        .lead { font-size: small; }
        .gpio-item { text-align: center; }
        .btn-gnd, .btn-gpio { padding: 10px 5px; margin-bottom: 5px; width: 100%; font-size: small; }
        .gpio .row { margin-top: 5px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h3>
                树莓派Web控制中心</h3>
            <p class="lead">
                用于控制连接到树莓派的各种传感器
            </p>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                设备</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-3 btn-item">
                    </div>
                    <div class="col-xs-3 btn-item">
                        <a class="btn btn-danger btn-trigger"><i class="fa fa-power-off"></i>关机</a>
                    </div>
                    <div class="col-xs-3 btn-item">
                        <a class="btn btn-primary btn-trigger"><i class="fa fa-refresh"></i>重启</a>
                    </div>
                    <div class="col-xs-3 btn-item">
                    </div>
                    <script type="text/javascript">
                        var url = "ajax/pi.php";
                        $(function () {
                            $(".btn-test").click(function () {
                                $.ajax({
                                    type: "POST",
                                    url: url,
                                    data: {
                                        action: "excute-linux-shell",
                                        cmd: "ls"
                                    },
                                    success: function (result) {
                                        $(".tip").html(result);
                                    }
                                });

                            });
                            $(".btn-trigger").click(function () {
                                var text = $(this).text().replace(/ /g, "").replace(/\n/g, "").replace(/\r/g, "").replace(/\t/g, "");
                                var cmd = "";
                                switch (text) {
                                    case "关机":
                                        cmd = "sudo shutdown -h now";
                                        break;
                                    case "重启":
                                        cmd = "sudo reboot";
                                        break;
                                }
                                if (confirm("确定要执行该命令吗？")) {
                                    $.ajax({
                                        type: "POST",
                                        url: url,
                                        data: {
                                            action: "set-linux-cmd",
                                            cmd: cmd
                                        },
                                        success: function (result) {
                                            $(".tip").html(result);
                                        }
                                    });
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                GPIO （蓝色->低电平，红色->高电平）</div>
            <div class="panel-body gpio">
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        左侧
                    </div>
                    <div class="col-xs-6 gpio-item">
                        右侧
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (9) 左05</button>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (6) 右03</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">17 (11) 左06</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">18 (12) 右06</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">27 (13) 左07</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (14) 右07</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">22 (15) 左08</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">23 (16) 右08</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (25) 左13</button>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">24 (18) 右09</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">05 (29) 左15</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (20) 右10</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">06 (31) 左16</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">25 (22) 右11</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">13 (33) 左17</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (30) 右15</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">19 (35) 左18</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">12 (32) 右16</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">26 (37) 左19</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (34) 右17</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">20 (37) 右19</a>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">16 (36) 右18</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 gpio-item">
                        <button disabled="disabled" class="btn btn-info btn-gnd">
                            GND (39) 右20</button>
                    </div>
                    <div class="col-xs-6 gpio-item">
                        <a class="btn btn-primary btn-gpio">21 (40) 右20</a>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $(".btn-gpio").click(function () {
                            if ($(this).hasClass("btn-danger")) {
                                $(this).removeClass("btn-danger").addClass("btn-info");
                            } else {
                                $(this).removeClass("btn-info").addClass("btn-danger");
                            }
                            var gpio = $(this).text().replace(/ /g, "").replace(/\n/g, "").replace(/\r/g, "").replace(/\t/g, "").split("(")[0];
                            var val = $(this).hasClass("btn-danger") ? 1 : 0;
                            $.ajax({
                                type: "POST",
                                url: url,
                                data: {
                                    action: "set-linux-gpio",
                                    gpio: gpio,
                                    val: val
                                },
                                success: function (result) {
                                    $(".tip").html(result);
                                }
                            });

                        });
                    })
                </script>
            </div>
        </div>
        <div class="panel panel-primary" style="border-color: #555">
            <div class="panel-heading" style="background: #555">
                终端</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-success" style="" role="alert">
                            执行：<span class="tip"> </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
请求处理代码（ajax/pi.php）： 

<?php 
$action=$_POST["action"];
if($action=="set-linux-cmd"){
	$cmd=$_POST["cmd"];
	$myfile=fopen("../python/cmd.txt","w") or die("unable to open file!");
	$txt=$cmd;
	fwrite($myfile,$txt);
	print_r($cmd);	 
}
else if($action=="set-linux-gpio"){
	$gpio=$_POST["gpio"];
	$val=$_POST["val"];
	
	$text="import os\n";
	$text=$text."import time\n";
	$text=$text."import sys\n";
	$text=$text."import RPi.GPIO as GPIO\n\n";
	
	$text=$text."num=".$gpio."\n";
	$text=$text."GPIO.setmode(GPIO.BCM)\n";
	$text=$text."GPIO.setwarnings(False)\n";
	$text=$text."GPIO.setup(num,GPIO.OUT)\n"; 
	if($val=="1"){
		$text=$text."GPIO.output(num,GPIO.HIGH)\n";
	}else{
		$text=$text."GPIO.output(num,GPIO.LOW)\n";
	}
	$text=$text."if(GPIO.input(num)==1):\n";
	$text=$text."	print(\"HIGH\")\n";
	$text=$text."else:\n";
	$text=$text."	print(\"LOW\")\n";
	
	$text=$text."\n";
	$text=$text."#GPIO.cleanup()\n";
	$text=$text."sys.exit(0)\n";
	
	$myfile=fopen("../python/gpio/gpio-".$gpio.".py","w") or die("unable to open file!");
	fwrite($myfile,$text);
	print_r($gpio."-".$val);
}
else if($action=="excute-linux-shell"){
	 $last_line = system('ls', $retval);
	 echo '<hr />Last line of the output: ' . $last_line . '<hr />Return value: ' . $retval;
}
?>
3.服务器端Python脚本（autorun.py） 

import os
import time
import RPi.GPIO as GPIO

while True: 
    file=open("/var/www/html/pi/python/cmd.txt","r")
    text=file.read()
    file.close()    
    
    if(text!=""):     
        file=open("/var/www/html/pi/python/cmd.txt","w")
        file.write("")
        file.close() 
        os.system(text)
    
    dir="/var/www/html/pi/python/gpio"
    list=os.listdir(dir)
    for i in range(0,len(list)):
        path=os.path.join(dir,list[i])
        if os.path.isfile(path):
            os.system("python "+path)
            print("excute "+path)
            os.remove(path)
    
    time.sleep(.3)
大致思路：

1./var/www/html/pi/python/cmd.txt 文件用于控制树莓派的重启或关闭，每次通过php页面来写入shell命令，当然要传入其他命令，也是可以的。

2./var/www/html/pi/python/gpio 目录用于存放控制GPIO针脚的py脚本，上面的autorun.py将会设置为开机启动。

3.while True语句将一直循环执行，当发现cmd.txt中有命令时，读取cmd.txt文件，并执行语句，执行完后将cmd.txt置空，下次循环时将直接跳过。

接着继续遍历/var/www/html/pi/python/gpio目录，如果发现有python脚本，则调用python命令执行python脚本，执行完后，将其删除。

4.因为GPIO的针脚一旦设置为高电平或低电平后，如果没改变其输出电平，将保持设置的电平输出，所以执行完设置电平的脚本后，python自动退出就可以了。

2017-9-19 10:17:27 补充：

利用 Tornado 服务器创建http端口侦听，比轮询方式更好。 

1.tornado安装
方式1：pip 安装：
sudo pip install tornado


方式2：源代码安装：
wget https://pypi.python.org/packages/source/t/tornado/tornado-4.3.tar.gz
tar xvzf tornado-4.3.tar.gz
cd tornado-4.3
python setup.py build
sudo python setup.py install

2.编写http服务器代码

#coding: utf8 
import sys
import tornado.ioloop
import tornado.web
import tornado.httpserver
import tornado.options
from tornado.options import define,options

class IndexHandler(tornado.web.RequestHandler):
        def get(self):
                self.render("index.html") #请在py脚本同一目录放置此页面
        def post(self): 
                arg = self.get_argument('q')                
                self.write("your arg is:"+arg)
                
if __name__ == '__main__':
    tornado.options.parse_command_line()
    app = tornado.web.Application(handlers=[(r"/",IndexHandler)])
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(8018)
    tornado.ioloop.IOLoop.instance().start()
代码很简单，设置请求路径为"/"时，由IndexHandler处理，请求分get和post两种方式，可以根据传入的不同参数做不同的处理。


3.程序改进

将最初的实现方式结合到tornado服务器方式即可，思路已很清晰了，详情请参考：树莓派-通过Web控制GPIO针脚输出高低电平(改进版)


清山博客
关注
专栏目录
树莓派实现web控制GPIO教程（安装方法更简单，网页效果更好）
weixin_34295316的博客
03-17 584
原文：http://www.shumeipai.net/read.php?tid-455.html 昨天在网上看到一个老外用树莓派web控制GPIO的视频，刨根问底终于找到了源码的出处，今天写个教程给大家，方便大家使用，这里也要感谢这位叫trouch的原作者，本来想修改修改的，后来觉得还是保持原汁原味吧，这个教程我就只当搬运工和翻译，有能力的童鞋可以改改试试！/ v, j" a1 W$ D1 J...
树莓派-通过Web控制GPIO针脚输出高低电平(改进版)
清山博客
09-22 6113
之前写过一篇《树莓派-通过Web控制GPIO针脚输出高低电平》采用的是Apache+php+python方式，通过网页端修改配置文件，再由python定时轮询，执行命令的方式实现的。 python轮询配置文件的变更，显得很鸡肋，影响性能。后面发现用python的Tornado Web服务器可以进行改进，下面进行讲述。 一、Tornado是什么 Tornado一款使用 Python 编写的，相
基于树莓派的智能家居中控系统：集成Flask、HTML、JavaScript与MQTT协议的文心一言AI接入（代码示例）
最新发布
嵌入式极客小张
08-02 1354
本文介绍了基于树莓派的AI接入文心一言智能家居中控系统的搭建过程。该系统利用树莓派作为主控单元，通过DHT11传感器和继电器模块实现环境数据采集和设备控制。后端采用Flask框架和SQLite数据库，前端使用HTML、CSS和JavaScript构建可视化界面，支持用户手动控制设备。系统还接入了文心一言API，实时获取天气信息，提升智能家居的自动化水平。通过该项目，用户能够享受更便捷的智能家居体验。
树莓派3B+ 网页控制GPIO（WebOPi）rpi3-webiopi
11-03
树莓派3B+ 网页控制GPIO（WebOPi）教程资源，适合在树莓派安装WebOPi的资源。 教程地址：http://blog.csdn.net/kxwinxp/article/details/78379546
树莓派--web控制gpio
Yale的博客
03-15 2403
一直找不到好的办法在web端控制思路，网上当然有现成的，比如webiopy，不过那个可以全部的引脚，我想做的是控制某一个引脚。也有大佬用tornado，flask实现的无奈这两个都没接触过，不过后期优化项目的时候会考虑用flask重写一遍我现在的目的就是用php来实现想着：php中用system函数执行python xx.py其中xx.py是控制某个GPIO的脚本不过实际执行是失败的，加了sudo...
树莓派4B+ 手机h5网页控制GPIO
L_Y000的博客
12-09 1011
借鉴自：树莓派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.ge.
（树莓派）使用web 界面控制GPIO 输出
原谅我这一生不羁放纵爱自由
10-13 723
from bottle import route, run import RPi.GPIO as GPIO host = 'xx.xx.xx.xx' GPIO.setmode(GPIO.BCM) led_pins = [18, 23, 24] led_states = [0, 0, 0] switch_pin = 25 GPIO.setup(led_pins[0], GPIO.OUT) GP...
树莓派GPIO引脚输出输入高低电平
weixin_45532178的博客
03-06 5758
1.导入GPIO库 import RPi.GPIO as GPIO 2.改变GPIO的模式 GPIO.setmode(GPIO.BCM) 3.设置管脚为输出 GPIO.setup(2,GPIO.OUT)#这里以GPIO2为例 4.设置管脚输出高电平 GPIO.output(2,GPIO.HIGH) 5.设置管脚输出低电平 GPIO.output(2,GPIO.LOW) ...
GPIO输出高低电平 - 杨奉武 - 博客园1
08-04
【GPIO输出高低电平】是嵌入式系统中常见的操作，尤其在ESP8266这样的微控制器上，用于控制外部设备的开关状态或者进行数据传输。GPIO（General Purpose Input/Output）是通用输入/输出端口，可以配置为输入或输出...
STM32L0XX中控制GPIO口输出高低电平之BRR&BSRR
Andy的博客
11-11 2897
STM32L0XX中控制GPIO口输出高低电平之BRR&BSRR
树莓派实现web控制GPIO教程
01-28
昨天在网上看到一个老外用树莓派web控制GPIO的视频，刨根问底终于找到了源码的出处，今天写个教程给大家，方便大家使用，这里也要感谢这位叫trouch的原作者，本来想修改修改的，后来觉得还是保持原汁原味吧，这个教程我就只当搬运工和翻译，有能力的童鞋可以改改试试！
树莓派-Web控制家电
勿在浮砂筑高台
04-12 4812
**给学生做的一个智能家居的教程： 采用树莓派作为服务器，我们通过访问服务器的方法，控制树莓派的I/O口的高低电平，I/O口接上继电器（实现低压控制高压），继电器上你就可以随意接上你想控制的家用电器啦！在网页页面上就可以控制了！**直接点击页面上的“关闭”、“打开”按钮就可以实现通过网络控制家中的灯了下面是效果图： 教程 安装FLASK 使用Flask（http://flask.poc
树莓派学习笔记——webiopi网页控制LED
互联网
04-04 937
0.前言 webiopi是一个可控制树莓派GPIO的web框架，该框架面向物联网IoT开发。该项目托管于google，并可在sourceforge上下载到源代码。现在webiopi已经发展到0.7版本，webiopi支持REST Server，CoAP server，并提供python库和javascript库，毫无疑问的说webiopi是一个优秀的框架。 虽然webiopi是一个...
树莓派 GPIO高低电平输入
morgan2018的博客
04-07 1133
树莓派Pin layout： import RPi.GPIO as GPIO import time pinInput= 21 #pin40 - BCM21 according to above table GPIO.setmode(GPIO.BCM) # set to BCM mode GPIO.setwarnings(False) GPIO.setup(pinInput, GPIO.IN) #set GPIO.IN mode, other can set GPIO.OUT mode whil
简单WiFi控制小车系统（树莓派＋python＋web控制界面)
热门推荐
Five—菜鸟级的博客
01-05 3万+
~~ 如果有什么问题可以在我的Five-great的博客留言，我会及时回复。欢迎来访交流 ~~ 下面是小车 好丑对不对 ，不过反正可以蛇皮走位就行。 蛇皮走位演示视频：https://pan.baidu.com/s/1RHHr8bRHWzSEAkrpwu99aw 只需要一个index.html 和Index.py就可以实现简单WiFi控制小车。 ...
通过WIFI控制端网页控制树莓派GPIO口（Python环境下使用wiringPi控制GPIO串口通信）
wuwenbin12的博客
03-10 1993
通过网页远程控制树莓派GPIO串口通信，在python环境下使用C语言编辑的wiringpi库
网页控制esp8266的8个GPIO引脚状态方法(三)
perseverance51博客
03-19 793
网页控制esp8266的8个GPIO引脚状态方法(三) 看了别人的控制一个引脚，不过瘾，来个一次性控制8个引脚的状态。 效果展示： 源代码： #include <ESP8266WiFi.h> #include <WiFiClient.h> #include <ESP8266WebServer.h> #include <ESP8266mDNS.h> ESP8266WebServer server(80); const char* ssid = "ME
GPIO的引脚控制(树莓派篇)
栋哥修炼日记
03-19 6164
40个pin引脚，放大如下所示 1、引脚的分类 电源引脚 gpio控制引脚 gpio通讯引脚 2、控制引脚编程时候的三种编码方式 板载编码（GPIO引脚号码） 主要是按照主板上引脚排针的编号 BCM编码（python） WiringPi编码（C/C++） 我们可以在树莓派的终端使用操作命令行的方式就行查看你自己的办卡信息。 1、查看编码方式 pinoput 2、查看全部的编码 gpio readall 3、例子1，GPIO控制引脚点亮led灯 直接在树莓派的终端输入以下的 .
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值