Hi there! Recently I dove into one of my bigger projects, which involved creating a “magic” mirror with the help of a Raspberry Pi (a popular System-On-A-Chip, more details here).

Now blog’s aren’t exactly my thing, but I’m trying to get better. Seeing as how this may be awful, feel free to check out the guide that I followed here.

Before and After:

Before assembly Finished project picture

Materials:


  • Monitor, I opted for a 22-inch Dell (~$100)
  • Picture frame that will fit the monitor (~$20, found at A.C. Moore)
  • Gila Privacy Window Film (~$30, can be found here)
  • Raspberry Pi (~$50, I purchased the kit here because it comes with a case and power supply too. You will also need a SD card, if you don’t have one lying around I purchased this recently and it worked well)
  • Various other materials including: electrical tape, black posterboard, wood 2x4, wood screws, double-sided tape or glue, power strip
  • Various tools including: alternative computer to program Pi from, scissors, utilty knife, saw, tape measure, squeegee, spray bottle

Hardware Assembly:


Part 1 - The glass

First, I took the glass from the picture frame and applied the privacy film to it. Fill the spray bottle with a mixture of water and soap to create a cleaning mixture. Then spray and clean both sides of the glass, you don’t want any fingerprints showing through! Take the Gila film and use two pieces of tape to peel the protective layer off. Next, spray both the side of the film that was protected and the side of the glass you will apply it to. Once they’re decently moist, apply them together and use the squeegee to remove any air pockets. Finally, use the utility knife to trim the excess sides of film from around the glass! This may take a few tries of practice to get the film removed enough so it can fit back into the frame, but the privacy film comes in 15ft strips so you’ll have plenty of error room to work with. Once back in the frame, you have essentially a two-way!

Part 2 - The monitor

In this segment we will prepare everything for the monitor and place it where it needs to be. For this section, I’d recommend assembling everything with the frame face down, so the back of the glass is to you. First, remove the bezel from your monitor. It’s a whole mini-project in it’s own, but something every Magic Mirror-maker must go through. A good video guide can be found here. Once the bezel is removed place the monitor face down on the glass in the center. Fill in the left over space on the sides with trimmed black posterboard, and secure the posterboard to the frame or monitor with the black electrical tape.

Part 3 - The wood

Once this is finished you must secure the monitor the the picture frame using the wood 2x4. This will vary for all projects based on how it will be mounted and the sizes of the frame and monitor. The general idea of what I did was to first cut two small beams about the width of the frame. I sawed a slit in the wood beams just enough to catch the end of the monitor frame, and when placed on the top and bottom of the frame the monitor would catch the slit and stay put. The wood beams must be nailed into the frame with the wood screws, pinning them monitor against the glass.

Wiring and Software:


Part 1 - The connections

Now here is where we must attach the Raspberry Pi to the back of the frame and run all the wire connections. I would recommend the use of 3M double-sided adhesive tape to stick the Raspberry Pi to the frame and stick other wires in place, I live by this stuff and use it all over my room. Once the computer’s in place, wire up the Pi and monitor’s power to the power strip, running the power strip cord out of the frame. Then connect the HDMI cord of them monitor to the Pi’s HDMI output (I had to use a VGA to HDMI converter). To help everything stay secured, zip-tie down the wires!

Part 2 - The software

First, you need to get a running version of Raspian (the Pi’s default OS) on the SD card. I’d recommend using PiBakery to customize your Raspbian like so:

PiBakery setup

Then you should be able to log into your Pi right from the command line and get started. Try this with:

Once logged your Pi, let’s get the Magic Mirror software up and running. We’ll first run the installer for the MagicMirror GitHub project and then configure it.

curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh | bash

There are many configuration options you can add to your setup. Let’s walk through a few of them (more can be found here).

Rotate the screen (in the case of a vertical monitor) and hide the rainbow startup cube
sudo nano /boot/config.txt

Then add the following lines to the bottom:

display_rotate=1
avoid_warnings=1 

And reboot

sudo reboot
Auto-hiding the Mouse Cursor
sudo apt-get install unclutter

Part 3 - Auto-starting the Magic Mirror

Ideally, we want this Electron app to launch everytime we reboot the Pi, so let’s configure that with the PM2 production process manager for Node.JS applications. Adapted from the GitHub project.

sudo npm install -g pm2

Load PM2 on boot (execute the command it tells you to after this is run)

pm2 startup

Next, let’s create a script for PM2 to start the mirror

cd ~
nano mm.sh

And enter in the file:

cd ~/MagicMirror
DISPLAY=:0 npm start

Then run chmod for executable access to the script and start the mirror

chmod +x mm.sh
pm2 start mm.sh
pm2 save

The End

And that’s it, I hope you enjoy the Magic Mirror you created and this tutorial was helpful! Be sure to toss me a follow on my Twitter if this helped you out!