树莓派应用之“魔镜”

项目简介

原理：树莓派智能镜子，又称“魔镜”，即在我们照镜子的时候，能同时看到镜子上显示的一些信息，例如时间，日期，天气，新闻头条，问候语等。它的原理就是我们通过网页编程将我们想要显示的信息显示在屏幕上，然后通过一块单向透视镜贴在屏幕上即可，整个过程可以大致分为配置环境，网页编程两个部分。

材料准备

显示屏

我们购买显示屏的时候有三种情况
1.购买裸屏
所谓裸屏就是单指一块液晶屏幕，不带外壳，不带屏幕驱动，如图1.1所示，这种情况下我们需要自己购买相应的驱动板，如图1.2所示，驱动板上一般有HDMI接口，我们再买一根HDMI转HDMI线连接树莓派和驱动上HDMI接口即可。

图1.1 裸屏

图1.2 屏幕驱动

2.购买带有HDMI接口的显示器
如果你买的是带有HDMI接口的显示器，这就比较方便了，直接买一根HDMI转HDMI线和树莓派连一起就行了，但是由于我们最后还要把屏幕和镜子贴在一起也就意味着需要把显示器外壳拆掉。（现在带HDMI接口的显示器一般都是大屏超薄的，比较贵一点，驱动一般不是装在屏幕背面而是外壳上）

3.购买带有VGA接口的显示器
目前市面上20寸以下的显示器，一般都是带的VGA接口，如果我们想要和树莓派相连，需要一根HDMI转VGA连接线。（注意：这里使用的HDMI转VGA线必须是有源的，否则树莓派很可能会被烧坏，想知道原因的话百度一下即可）

树莓派相关硬件

单向透视镜

这个镜子是魔镜制作关键部件之一，就是审讯犯人用的那种镜子，光强那一侧看镜子会是一面镜子，光暗那一侧看镜子是透明玻璃，具体效果和单向透视镜两侧光线对比有关。（淘宝上有卖这种镜子的，加包装和运费下来不是太便宜，因此有些人选择在亚克力板上贴膜来替代它，不过贴的时候可能会出现气泡，显示效果也不太好）

外壳

我们最终是要将镜子显示器和其它的一些东西整合在一起的，所以外壳是必要的，根据个人情况可以选择自己制作或者找专门的厂家定制。

环境搭建

启动配置

1.通过sudo raspi-config进入树莓派配置界面，点击Boot Options选项，使得树莓派启动后进入桌面而不是命令行模式。点击change timezone，配置所在时区使树莓派显示正确时间。

2.旋转屏幕并使树莓派支持HDMI热插拔
树莓派BIOS设置储存在系统启动分区中，在这分区中有一个config.txt文件，载有所有设置。通过sudo nano /boot/config.txt指令进入该文件内，在该文件中加入代码display_rotate=1使得屏幕竖屏显示，加入代码hdmi_force_hotplug=1使得树莓派支持HDMI热插拔，让显示器连接更加稳定。

无线配置

由于在显示器上显示的日期，天气，新闻都需要实时更新，所以必须连接上无线网，使用树莓派3的玩家可以这样配置：通过命令sudo nano /etc/wpa_supplicant/wpa_supplicant.conf进入WIFE配置文件，然后配置WIFE用户名，密码，保存退出即可。

相关软件包安装

在安装任何软件包时都要通过下列语句更新一下，确保安装的是最新版本：sudo apt-get update && apt-get upgrade –y
1.网络服务器Apache的安装

sudo apt-get install apache2 apache2-doc apache2-utils

2.PHP环境的安装

sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache

3.开源浏览器chromium的安装
这一步是比较容易出问题的一步，所以请严格按照步骤来：
第一 进入 chromium下载页面，下载和下列三个文件类似的文件（注意50.0版本的会出现问题，我用的48.0的版本，49.0版本的需要你们自己试一下）

第二 将下载好的三个文件放入树莓派某一个文件夹内，例如chromium文件夹,然后通过命令cd /home/pi/chromium切换到该文件夹目录，在该目录下通过下列两条命令安装下载的三个文件：

sudo dpkg -ichromium-codecs-ffmpeg-extra_48.0.2564.82-0ubuntu0.15.04.1.1193_armhf.deb

sudo dpkg -ichromium-browser-l10n_48.0.2564.82-0ubuntu0.15.04.1.1193_all.deb chromium-browser_48.0.2564.82-0ubuntu0.15.04.1.1193_armhf.deb

这样chromium就安装好了
4.安装屏蔽鼠标的软件包

sudo apt-get install x11-xserver-utils unclutter

5.禁用屏幕保护和自动重启
通过sudo nano ~/.config/lxsession/LXDE-pi/autostart进入该设置文件，在@xscreensaver -no-splash前面加上“#”注释掉改行程序，然后再加上下列几句代码：

@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --kiosk --incognito http://localhost

这样就能禁用屏幕保护，并且让chromium浏览器在开机后自动启动，并开启全屏模式，并导向本地主页。
6.显示网页
在Apache安装好之后，会在树莓派中生成一个目录/var/www/html，我们将编写好的网页文件放入该目录内，然后重启树莓派，这样开机后，屏幕就会显示我们做成的网页了.

页面开发

这篇文档开头已经说了，我们需要显示的页面其实就是一个网页，所以页面开发这部分我们需要做的就是如何编写一个网页出来。首先说下网页需要显示的内容：时间，日期，天气，问候语，新闻，为了获得最好的显示效果，我们将网页背景设置为黑色，显示内容设置为白色。经过网上的一些调研知道，要把魔镜网页做出来需要学习HTML,CSS,JavaScript这三部分的内容，事实上，经过短期的学习，我们学到的东西仅仅有助于我们看别人的代码，要想全部看懂，并且写出自己的代码，需要更多的付出。这里给出本项目的源码链接(https://github.com/foreverwlh/Magic_Mirror)。下面我将对代码做一些介绍，帮助大家尽快搞清代码框架，并实现魔镜功能.

上图是魔镜项目文件的顶层目录结构，下面我将逐一介绍
1.CSS文件夹
这个文件夹里面放的是CSS文件，CSS文件称为层叠式样式表，主要与网页的布局有关，例如网页的内外边距，背景色，字体大小等等。
2.font文件夹
这个文件夹放的是我们使用的一些字体文件，供其它文件调用
3.images
这里面放的是一些图片，不影响显示，可以删掉。
4.js文件夹
这里面放的是js脚本文件，网页的动态显示主要由该文件夹内的文件实现，下图是js文件夹的目录结构

上面文件夹里存放的js文件是显示功能具体的一些代码，例如news文件夹里面有个news.js文件，是和新闻相关的一些代码，calendar文件夹和日历相关，compliments和问候语相关，temp_hum和温湿度有关，time与时间有关，weather与天气有关。
下面的js文件，需要注意两个，一个是config.js，一个是main.js，***config.js是配置文件，里面是各个功能的一些配置，这个文件非常重要，能够让我们在读不懂全部程序的情况下，更改显示效果（刚开始这个很重要哦）***。main.js的末尾是由一些.init（）语句结束的，如图3.3所示，可以说这几句语句控制着功能的显示与否，例如不想显示温湿度，把tem_hum.init();用“//”注释掉就行了，其它同理。

5.index.php
index.php是普遍意义上的首页，即我们树莓派启动后，显示的网页内容是由这个文件决定的，可以说这个文件调用了其它的所有文件。

未来展望

从产品角度来说，魔镜目前主要的问题一个是厚度，一个是成本，厚度大概4至5厘米，挂在墙上还是稍显厚，近千元的成本还是太高了。从功能上来说，除了实现基本的天气，日期等功能之外，扩展性还是很高的，例如可以在镜子上留言，增加语音交互，触摸等功能。但是个人认为需要注意的是，不要在镜子上显示过多的东西，显示东西过多，就失去了镜子的意义，一旦失去了镜子的意义，和普通显示屏就没啥区别了。