接着上一篇《树莓派-通过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自动退出就可以了。