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