文章分类

相关文章

树莓派-通过Web网页实现对树莓派的关机和重启操作

分类:树莓派     发布:2017-09-14     来源:本站     浏览:1240 次

实现思路:

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; }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h3>
                树莓派Web控制中心</h3>
            <p class="lead">
                用于控制连接到树莓派的各种传感器
            </p>
        </div>
        <div class="panel panel-primary">
            <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">
                        <button type="button" class="btn btn-danger btn-trigger">
                            <i class="fa fa-power-off"></i>关机</button>
                    </div>
                    <div class="col-xs-3 btn-item">
                        <button type="button" class="btn btn-primary btn-trigger">
                            <i class="fa fa-refresh"></i>重启</button>
                    </div>
                    <div class="col-xs-3 btn-item">
                    </div>
                    <script type="text/javascript">
                        var url = "ajax/pi.php";
                        $(function () {
                            $(".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({
                               
    

上一篇:给程序员的19个忠告

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