How to Make a DIY Smart Mirror

by WickedMakers in Circuits > Raspberry Pi

183578 Views, 615 Favorites, 0 Comments

How to Make a DIY Smart Mirror

How to make a DIY Smart Mirror

A "Smart Mirror" is a two-way mirror with a display behind it that is typically used to display useful information like the time and date, the weather, your calendar, and all sorts of other things! People use them for all kinds of purposes. You'll see them placed in the bathroom, in the kitchen, as a vanity, all over the place!

We have plans with even more detail, available on our Patreon:

https://www.patreon.com/posts/53230713

In this tutorial, we demystify the process of building a DIY Smart Mirror and walk you step-by-step how to make one using materials you can get online or at your local stores. Our goal is to show you that building a DIY Smart Mirror is not as hard as you might think, and to inspire you to try it!

We recommend watching the video above and following along with the written steps!

Supplies

Parts & Materials:

Tools:

Cut the Wood for the Back Frame

SmartMirror_Master.00_01_32_25.Still004.jpg
SmartMirror_Master.00_01_50_05.Still006.jpg
SmartMirror_Master.00_01_46_16.Still005.jpg
SmartMirror_Master.00_01_55_19.Still007.jpg
SmartMirror_Master.00_02_04_21.Still008.jpg

The gist of our design is we're going to use a regular picture frame and extend the back of it to create more space for the parts like the monitor and Raspberry Pi. To do this, we're going to use 3/4" plywood and cut some strips.

You'll need (4) strips that are 1.75" wide and then two more that are 1.5" wide. We left a 1/4" reveal around the edges, so for our 18" x 24" frame, the (2) long strips are 25.75" and the (2) shorter ones are 18.25".

Tip: Don't have a saw? The nice folks at the big box stores like Home Depot will usually cut them for you if you bring in a list of measurements and ask nicely. :)

The other (2) 1.5" wide strips will get cut to final length later on, but for now, they should be a minimum of about 25" long to be safe.

We're going to assemble the frame using pocket holes, so we'll set up our pocket hole jig for a 3/4" cut and then drill two holes in the ends of the two shorter sides.

Paint and Assemble the Back Frame

SmartMirror_Master.00_03_42_20.Still015.jpg
SmartMirror_Master.00_02_28_01.Still009.jpg
SmartMirror_Master.00_03_04_07.Still011.jpg
SmartMirror_Master.00_03_09_05.Still012.jpg
SmartMirror_Master.00_03_41_12.Still014.jpg

After some tests with different paint types, we found that simple black acrylic paint on the birch plywood gave us the most similar color to the black frame, so we painted all of our pieces with it so they matched.

Once dry, we then added vertical pocket holes on each of the pieces which will be used to attach it to the back of the picture frame. Note: You can do this before painting, we just forgot! :)

We placed the holes 3" in from each end. It's important to ensure the depth of your pocket holes is accurate. These are going in from the back so if they're too deep, the screws will poke through the front of the picture frame!

Next, we assembled the frame together using the pocket screws, ensuring each corner is square as we go so we have a perfectly square frame when we're done.

Attaching the Frame to The...Frame

SmartMirror_Master.00_04_13_00.Still019.jpg
SmartMirror_Master.00_00_51_20.Still002.jpg
SmartMirror_Master.00_03_49_12.Still016.jpg
SmartMirror_Master.00_03_50_17.Still017.jpg
SmartMirror_Master.00_03_58_29.Still018.jpg

We flipped the picture frame so it was face down and then placed the back frame on top of it. We used a bit of super glue on the back of the plywood to help it stay put while we attach the pocket screws.

It's important to ensure the position of the back frame is perfectly centered on the back of the picture frame.

If you have clamps, they really come in handy here to make sure you have a good tight fit when you attach the pocket screws. We attach the two screws into each side for a secure fit.

Putting in the Two-Way Mirror

SmartMirror_Master.00_05_48_28.Still024.jpg
SmartMirror_Master.00_04_54_21.Still021.jpg
SmartMirror_Master.00_05_18_21.Still022.jpg
SmartMirror_Master.00_05_28_25.Still023.jpg
SmartMirror_Master.00_06_17_13.Still025.jpg

Smart Mirrors work by using a "two-way mirror" (also called a one-way mirror, which is...very confusing!). What's significant about a two-way mirror is that one side allows light to pass through and the other side is reflective. That allows you to put something like a display or a monitor on the back and shine light through.

The mirror we're using is 1/4" thick and is very high-quality glass so we'll get a lot of light passing through while maintaining a clear reflection. However, these types of mirrors are very expensive. If you're on a budget, a great option is to use an acrylic mirror. Here's an example of one: https://amzn.to/30UF2JV

To install the mirror, first, we removed the clear plastic and the cardboard backing in the picture frame. But, we saved the cardboard since we're going to use it! We then fold up all the little metal tabs to make room for the mirror.

Next, we gently place the mirror into the frame, bright side facing forward (dark side back). It fits perfectly but it's obviously important to be gentle so we don't scratch it. Once it's in, we carefully bend down all the metal tabs to hold the mirror in place.

Disassembling the Computer Monitor

SmartMirror_Master.00_08_22_28.Still034.jpg
SmartMirror_Master.00_06_28_24.Still026.jpg
SmartMirror_Master.00_07_04_23.Still028.jpg
SmartMirror_Master.00_07_25_03.Still029.jpg
SmartMirror_Master.00_08_02_23.Still031.jpg
SmartMirror_Master.00_08_11_00.Still032.jpg
SmartMirror_Master.00_08_16_03.Still033.jpg

Before we start, we turn on the monitor and raise the brightness to the maximum. Next, we remove the stand at the bottom, then lay it face down on something soft so it doesn't get scratched.

There are two small screws near the power/HDMI ports that come out first, but we save them since we're going to use them later!

Next, we used a small flathead screwdriver to pop all the tabs around the outside and take off the back panel. This reveals a line of small screws around the edge on the back that we then took out. With those screws out, we could then carefully remove the front bezel.

There's a small set of buttons on the bottom that turns the monitor on/off/etc. so we carefully take those out so they don't get damaged.

Finally, we take that cardboard piece from the picture frame and lay it down, removing any metal tabs it has first. We then use a ruler to place the monitor face down on the board exactly in the center. We trace around it with a pencil and then use a sharp utility knife to cut out the rectangle, being as careful as we can to get super close to the line and not leave any gaps.

Now you can see how we fit the monitor perfectly into the cardboard!

Install the Monitor Into the Picture Frame

SmartMirror_Master.00_08_38_19.Still035.jpg
SmartMirror_Master.00_08_41_26.Still036.jpg
SmartMirror_Master.00_08_46_06.Still037.jpg

With everything prepped, we clean the back of the mirror with a microfiber cloth (this is the last chance to do that!), and then we place the cardboard back into the frame. The monitor then fits perfectly into the space we cut out for it, facing the back of the mirror.

With a hot glue gun, we trace around the edges to secure the monitor to the board.

Note: if your rectangle cut out is bigger than your monitor, then light can escape from the back through the mirror. You can use some tape over the edges to block the light if need be.

Attaching the Back Strips to Secure the Monitor

SmartMirror_Master.00_09_42_06.Still043.jpg
SmartMirror_Master.00_09_11_10.Still038.jpg
SmartMirror_Master.00_09_15_19.Still039.jpg
SmartMirror_Master.00_09_24_09.Still040.jpg
SmartMirror_Master.00_09_26_06.Still041.jpg
SmartMirror_Master.00_09_36_17.Still042.jpg

Remember those other two strips of plywood we cut in the beginning? We now attach those to the back of the frame to hold everything tightly in place.

First, we need to cut them to the exact size so they fit into the back frame. You can technically do this at the start, but for a perfect fit, you're better off waiting until your frame is assembled and then marking and cutting them to the exact size they need to be.

Once we cut them, we drill a single pocket hole into the end of each one.

The first one gets placed at the bottom of the monitor to support it's weight and gets pushed in as tightly as it can go and screwed into place. The second is placed about three-quarters of the way up against the back of the monitor to hold it up against the mirror tightly.

Each of these is 1/4" less wide than the outer frame to account for the cords passing over them in the back.

Assembling the Raspberry Pi

SmartMirror_Master.00_09_47_03.Still044.jpg
SmartMirror_Master.00_09_53_27.Still045.jpg
SmartMirror_Master.00_09_59_12.Still046.jpg
SmartMirror_Master.00_10_08_20.Still047.jpg

To power our Smart Mirror, we're using a Raspberry Pi computer. We recommend picking up the entire kit so you get all the various parts and pieces necessary, including a perfectly sized case.

We start by inserting the memory card into the Pi and then placing it into the plastic case. We can then attach the power cable and the HDMI cable. You should also plug in a keyboard and mouse into the USB slots.

Next, we boot up the Pi for the first time. We're prompted to "Install" the operating system, so we simply follow the on-screen instructions until the Pi boots up. It then asks us for a few basic questions like Timezone, Wifi, etc.

Note: If you don't have an extra monitor at home, we recommend doing this step prior to disassembling the other monitor!

Installing and Customizing the Magic Mirror Software

SmartMirror_Master.00_11_11_24.Still048.jpg
SmartMirror_Master.00_11_35_01.Still049.jpg
SmartMirror_Master.00_12_03_02.Still051.jpg

To run the smart mirror, we're using a free piece of software called "Magic Mirror". It's designed specifically for this, it's very fun to use, and it works GREAT!

The next step involves installing this software on our Raspberry Pi, which you can get at this link:
https://magicmirror.builders/

If you're not familiar with programming, this can seem very intimidating but we show in the video the simplest way to do it if you're not into coding at all.

The full documentation, including the "Installation" page that we use in the video, can be found here:
https://docs.magicmirror.builders/

We're looking for the 'Manual Installation' section (as shown in the images above) and we're going to simply copy/paste one line at a time into the 'Terminal' app on the Pi.

Essentially, it's:

  1. Copy the line
  2. Paste into Terminal
  3. Press 'Enter'
  4. When complete, repeat with the next line until the end.

When it's finished, the app will run for the first time and we'll see it open on our Pi!

Customizing your Magic Mirror

The best part about the Magic Mirror software is that it allows you to customize it. The default setup has basic things like a calendar, clock, weather, etc. but that is just the beginning. The documentation shows you how to add 'modules' so you can explore a whole world of customization.

For example, here are some of the modules we added:

  • Play YouTube videos
  • Control it with Alexa
  • Show what's playing on Spotify
  • Connect to our Nest thermostat
  • Show our Google Calendar

Installing the Electronics Into the Frame

SmartMirror_Master.00_12_57_11.Still052.jpg
SmartMirror_Master.00_13_15_28.Still054.jpg
SmartMirror_Master.00_13_07_14.Still053.jpg
SmartMirror_Master.00_13_19_26.Still055.jpg
SmartMirror_Master.00_13_31_19.Still066.jpg
SmartMirror_Master.00_14_07_12.Still059.jpg

Now that the software is ready to go, we can finally put everything into the frame. We start by attaching the 90-degree HDMI adapter on the back of the monitor, and connect the HDMI cable to it. Next, we'll attach the power cable for the monitor and tuck that to the side.

We'll then remove the Raspberry Pi from the plastic case, revealing two mounting holes on the bottom. Remember those two screws from the back of the monitor in the beginning? We're going to use one of them to secure the Pi to the monitor. The ideal place to put it is on the side, as shown, but there's a tiny little metal tab in the way of an otherwise perfect fit. We took a metal file and simply ground out a little piece of the plastic case to fit perfectly. (You can see this better in the video, link in step one.)

We can then screw the Pi case onto the back of the monitor with the single screw and then reassemble the Pi. This is also a good opportunity to install the heat sinks and fan that come with the Pi kit, to keep it cool while it runs our Smart Mirror.

Final Assembly and Cable Routing

SmartMirror_Master.00_13_38_08.Still056.jpg
SmartMirror_Master.00_13_53_09.Still057.jpg
SmartMirror_Master.00_14_01_10.Still058.jpg

Finally, the last step is to properly route all of the cables so that it's nice and clean in the back. We use a combination of a hot glue gun and velcro cable ties to secure all of the cables tightly to the back of the frame.

Don't have velcro? Zip-ties work great, or even some string or scotch tape will work fine.

We also hot glue the button pad to the back of the monitor for easy access.

Optional - Air Ventilation
If you're going to be running videos on the Pi, it can get quite hot! We recommend carefully drilling some vents in the sides of the back frame to promote airflow through the back. If you're simply running the Mirror with text only, you don't need to do this.

Optional - Cable Notch

We ran our cables through the wall directly behind the mirror, but if you're going to plug them in below the mirror you can cut a small notch in the bottom for the cables to pass through.

The Results!

IMG_1741.jpg
SmartMirror_Master.00_00_13_04.Still065.jpg
SmartMirror_Master.00_14_50_27.Still064.jpg
SmartMirror_Master.00_00_38_19.Still001.jpg
SmartMirror_Master.00_14_20_23.Still060.jpg
SmartMirror_Master.00_14_38_07.Still061.jpg
SmartMirror_Master.00_02_44_26.Still010.jpg
IMG_1740.jpg
SmartMirror_Master.00_14_48_08.Still062.jpg
SmartMirror_Master.00_14_45_27.Still063.jpg

Smart Mirrors are SUPER FUN! We love combining technology like this with hands-on making, it's like the best of both worlds. We spent a lot of time having fun customizing the mirror with different modules to really dial it in for our use case, and we couldn't be happier with the result. :)

Want to see more of our work?

Want to help support us and our channel? Join the Skeleton Crew on Patreon!