How to make a magic mirror with a Raspberry Pi and an old monitor

You might have seen it in a futuristic Hollywood blockbuster, but did you ever think about how you can build your own magic mirror and be the star of the show yourself? If you’re unfamiliar with what exactly a magic mirror is, it’s a smart mirror capable of displaying your daily schedule, the date and time, weather, and other important updates. Read on below to see how you can make your very own.

First thing’s first: the project itself is slightly complicated. It takes a two-way mirror, an old computer monitor, and a Raspberry Pi, which provides the power. No low-level hacking is required.

Blogger Dylan Pierce and his magic mirror.

For a complete break-down, here’s what you’ll need.

• A computer screen (that you can take apart)
• An observation mirror
• A Raspberry Pi with casing along with a micro USB power cord
• A SD-card (8GB)
• A network adapter
• Wood frame
• HDMI-to-VGA-adapter
• A mouse and a keyboard with USB
• A second computer (for fixing OS)

Select a monitor and mirror

When it comes to the size of the mirror, it depends on the kind of monitor you select. One important aspect is to make sure you get a monitor with the inputs located towards the center of the monitor rather than on the sides. Otherwise, it could be difficult to fit the frame, and the Raspberry Pi’s HDMI cord must also fit.

Being the most essential piece of the whole project, the mirror, being acrylic and plastic-like, is easier to work with compared to an actual mirror. It’s simple (and safer) to cut it in several different ways to make it fit the way you need. Be sure to order a mirror that’s close in size to your monitor so you can build with ease.

Build the case

Building the case doesn’t require much work. This part is basically all about cutting your pieces to fit the monitor into the case. By doing this, you’ll be able to remove the monitor without any issues.

An important tip here is to screw holes at the top and bottom of the case, giving the Raspberry Pi some airflow. You should also make one of the holes at the bottom of the case large enough for a power plug to fit through, since you’ll need it when you’re wiring your monitor and Raspberry Pi’s power through the case.

Attach the frame to the case

This step may be the simplest of all. To avoid a hassle, be sure to stain the frame and case separately before gluing the mirror between them. Afterwards, gluing everything together is all there is to it.

Install the Raspberry Pi

Now the fun begins. Ideally you’d want to have just one cord coming out of the bottom of the case to supply power. The easiest way to do this is to buy a two-way power splitter. Then all of the components can nicely fit together on the back of the monitor, with the help of some industrial tape, as pictured above.

The point of this is to supply power to both the monitor and the Raspberry Pi with a single cable. Simply hook up the Raspberry Pi to the monitor, and Ethernet to the router. Next, if you already hadn’t, you’d have to install Raspbian, the Raspberry Pi Foundation’s official operating system. Once you’re through the NOOBS installation process, you’ll be rewarded with the Raspberry Pi boot sequence.

Turn the Raspberry Pi into a kiosk

It doesn’t make sense for your magic mirror to just display the Raspberry Pi desktop, and fortunately, there are a few ways to get your Raspberry Pi to work like a kiosk. Blogger Dylan Pierce had luck following the following steps while building his mirror.

Install Chromium

Depending on your Raspbian version you may run into a few issue with this. The raspberry Pi behind Pierce's mirror (pictured above) is running version Jessie of the Raspbian OS. There have been some changes to the Raspbian repository, including the removal of Chromium, which is the easiest browser to set up as a kiosk.

You can browse the Internet, but Pierce found that this is what worked best:

wget http://ftp.us.debian.org/debian/pool/main/libg/libgcrypt11/libgcrypt11_1.5.0-5+deb7u3_armhf.deb

wget http://launchpadlibrarian.net/218525709/chromium-browser_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

wget http://launchpadlibrarian.net/218525711/chromium-codecs-ffmpeg-extra_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

sudo dpkg -i libgcrypt11_1.5.0-5+deb7u3_armhf.deb

sudo dpkg -i chromium-codecs-ffmpeg-extra_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

sudo dpkg -i chromium-browser_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb

Run Chromium on startup

Once Chromium is installed, you can configure it to open on startup and in full screen mode:

Open the autostart settings:

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

Disable the screensaver by adding a # in front of the line:

@xscreensaver -no-splash

And add the following lines:

@xset s off @xset -dpms @xset s noblank /usr/bin/chromium –noerrdialogs –kiosk –incognito “http://localhost”

Exit and save. Now you’ve disabled the screensaver, disabled power management settings, and have the Chromium browser opening in kiosk mode on localhost on startup.

Using your Wi-Fi network

There are a number of tutorials for getting your Raspberry Pi on wireless. If you’re already in terminal, it’s as easy as editing your wpa_supplicant file:

sudo nano /etc/network/interfaces

And edit the network setting:

network={ ssid=”Network name here” psk=”password” } I’m assuming you’re smart and not using the ancient and insecure WEP protocol on your router.

Now restart your Wi-Fi connection with these two commands:

ifdown wlan0 ifup wlan0

Don’t worry if you see an obscure error. You can experiment to make sure your change worked by using ifconfig.

If you’re wlan0 device has an assigned IP address, you’re free to disconnect the Ethernet connection and install your backboard.

Set up the webpage

With a functioning kiosk of sorts, it’s time to get the actual webpage up and running. Pierce has written his own application for this, and encourages others working on this project to use it. He used the PHP micro-framework Lumen with jQuery and Moment.js.

Installing a web server

In order to host the webpage you’ll need to install a web server, and to run Lumen you’ll need php installed:

sudo apt-get update sudo apt-get install nginx php5-fpm php5-cli php5-mcrypt git

This could take a while, but once it completes, you need to configure Nginx to know where the MirrorMirror site is located:

sudo nano /etc/nginx/sites-available/mirror.conf

Then paste the configuration in this gist:

mirror.conf

Be sure to save and exit. Next, activate this configuration by running:

sudo ln -s /etc/nginx/sites-available/mirror.conf /etc/nginx/sites-enabled/mirror.conf sudo service nginx reload

You should now have a php enabled web server running on your Pi.

Installing MirrorMirror

This is the final step of the project, installing the actual webpage. Make a folder projects  inside of /home/pi  and move into it:

mkdir /home/pi/projects cd /home/pi/projects

Clone the MirrorMirror web app with this command:

git clone https://github.com/ctrlaltdylan/MirrorMirror.git

Install Composer which will install Lumen’s dependencies:

curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer

Use composer to install Lumen’s dependencies to get MirrorMirror up and running:

cd MirrorMirror composer install

Know that Nginx needs to be able to write/read files inside of the storage  directory for the Lumen application to work.

sudo chmod -R 777 storage

Go to http://localhost  and you should see your version of MirrorMirror up and running.

Current features:

• Displays forecast and animated weather icon.
• Displays date and time.
• Displays a random greeting, currently there’s only one but planning on adding more.

 Happy building! If you have any suggestions, leave them in the comments section below.

Source (including all images): blog.dylanpierce.com