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

接着上一篇《树莓派-通过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);
                                    }

发表评论