0%

树莓派制作空调遥控器2: 在网页中控制空调

在树莓派上使用命令行控制空调,实在太麻烦了,还不如空调遥控器方便。如果能在手机上远程控制,就方便多了。

空调遥控器系列教程

一、《树莓派制作空调遥控器1:使用红外发射管制作空调遥控器》
二、树莓派制作空调遥控器2:在网页中调用树莓派控制空调
三、树莓派制作空调遥控器3: 天猫精灵控制空调

效果

网页做的比较简陋,大家可以根据自己的需求添加更多的按钮、美化界面。如下:
空调遥控器网页

准备工作

  1. 完成了树莓派+红外发射管制作空调遥控器, 能够在树莓派上通过命令行控制空调的开、关等操作。
  2. 准备一台有公网IP的云服务器做中转,以便能够在外网访问树莓派,也可以使用其它方法做内网穿透。参考SSH端口转发原理和实战

搭建Web服务器环境

本次实验使用 Nginx + PHP来制作空调控制器的网页。如果已经安装好了,可以跳过这一步。

安装Nginx

  1. 安装nginx:
    sudo apt-get install nginx
  2. 安装完成后,网站根目录在/var/www/html, 编辑该目录下的index.nginx-debian.html文件,写入Hello, Nginx!
  3. 测试是否安装成功:打开浏览器输入http://127.0.0.1,能看到刚刚编辑的Hello, Nginx!说明安装成功。或者使用命令行: curl 127.0.0.1 ,也能够输出Hello, Nginx!

安装PHP

  1. 添加apt源。编辑apt源配置文件:
    sudo vi /etc/apt/sources.list.d/raspi.list
    在后面加入一行:
    deb http://mirrordirector.raspbian.org/raspbian/ buster main contrib non-free rpi
  2. 更新软件包列表:
    sudo apt update
  3. 安装PHP7.3:
    sudo apt install -y -t buster php7.3-fpm php7.3-curl php7.3-gd php7.3-intl php7.3-mbstring php7.3-mysql php7.3-imap php7.3-opcache php7.3-sqlite3 php7.3-xml php7.3-xmlrpc php7.3-zip
    安装过程中会提示某些服务需要重启,选择Yes即可。
  4. 测试是否安装成功:
    php -v
    如果显示php版本号,则安装成功,如下:

    PHP 7.3.2-3 (cli) (built: Feb 8 2019 15:05:54) ( NTS )
    Copyright (c) 1997-2018 The PHP Group
    Zend Engine v3.3.2, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.2-3, Copyright (c) 1999-2018, by Zend Technologies

配置Nginx解析PHP

  1. 编辑Nginx配置文件sudo vi /etc/nginx/sites-enabled/default, 找到# pass PHP scripts to FastCGI server, 在后面加入以下代码:

     location ~ \.php$ {   
         include snippets/fastcgi-php.conf;        
         fastcgi_pass unix:/run/php/php7.3-fpm.sock;    
    }       

    然后在index指令后面加上index.php,修改后文件内容如下:

  2. 修改配置后需要重新加载Nginx配置才能生效:
    sudo nginx -s reload

  3. 测试解析PHP。创建一个文件/var/www/html/index.php,写入php代码:

     <?php  
     echo time();

    保存后执行命令curl 127.0.0.1,返回时间戳即说明Nginx成功解析了php。

编写遥控器网页

目录结构

网页根目录在/var/www/html/,进入网页根目录,创建一个文件夹用于存储遥控器的网页:

cd /var/www/html
mkdir ac
cd ac

下面会创建index.htmlcontroller.php两个文件,目录结构如下:

ac/
├── controller.php  // 控制空调开、关
└── index.html      // 遥控器界面

PHP代码控制空调

首先编写 controller.php文件:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
// 获取从网页中获取遥控器的指令
$action = $_GET["action"];

// 把遥控器的所有操作存到数组中
// 如果除了开、关,还有其它按钮,请加入到这个数组中
$actions = ['on', 'off'];

// 如果传过来的操作,在上面数组中,则执行指令
if(in_array($action, $actions)){
`irsend SEND_ONCE aircon {$action}`;
}

保存文件后,在浏览器中打开:

http://你的树莓派IP/ac/controller.php?action=on

如果一切正常,空调此时会“嘀”的一声,然后开启。同理,将on改成off即可关闭空调:

http://你的树莓派IP/ac/controller.php?action=off

遥控器界面

接下来编写HTML界面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>空调遥控器</title>
<style>
.btns {
text-align: center;
}
.btn {
width: 200px;
height: 50px;
margin-top: 30px;
border: 1px solid #2ecc71;
background-color: #fff;
font-size: 18px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="btns">
<button class="btn" onclick="ctrl('on')" style="color: #2ecc71;">打开空调</button>
<button class="btn" onclick="ctrl('off')" style="color: #2ecc71;">关闭空调</button>
</div>
<img src="" alt="" id="test" style="display: none">
<script>
function ctrl(action) {
var img = document.getElementById('test');
var rand = Math.random();
img.src = 'controller.php?action='+action+"&r="+rand;
}
</script>
</body>
</html>

这里偷懒了,没有写发送请求的JS,直接创建一个img标签,图片地址设置为控制空调的网址。
虽然最后图片加载失败,但是php被调用了。Anyway, It works.
在浏览器中打开:

http://你的树莓派IP/ac/index.html

点击对应按钮就可以控制空调啦,效果如下:
空调遥控器网页

外网访问

完成以上网页后,只有跟树莓派同一个局域网内才能打开网页。本次实验使用一台云服务器,中转请求到树莓派上面,实现“内网穿透”。

在树莓派上执行:

1
ssh -NT -R :2009:127.0.0.1:80 root@111.111.111.111

其中root是云服务器的用户名,111.111.111.111改成云服务器的IP地址。
2009是在云服务器上开启一个端口,用于转发请求到树莓派。

接下来在浏览器中打开:

http://你的云服务器IP:2009/ac/index.html

即可看到熟悉的空调遥控器界面。