Build a Voice-Controlled DIY Raspberry Pi Smart Mirror with Jasper

As per the prophecy: first, the finished product.

How it works

There are four major components to the voice-controlled smart mirror. The attached highly technical drawing illustrates how these components work together.

1. The two-way mirror

The two-way mirror is made of acrylic and sits flush over the monitor, allowing the graphics on the monitor to shine through while maintaining a mirror effect. I ordered my mirror through Tap Plastics (this one). Order the thicker mirror option (3/16") to prevent a "funhouse mirror" effect.

2. The monitor

I recommend an LED monitor for minimal power consumption, maximum crispness, and to prevent mirror glow at night. I also recommend a monitor with built-in speakers, but this is optional.

3. The Raspberry Pi

The Raspberry Pi is a small, credit card-sized computer that powers the whole thing, displaying the Magic Mirror interface and running Jasper, the voice-control system.

4. The box/frame

The box/frame houses all the components, including the microphone, and looks pretty.

Total cost

The total cost for this project (including the wood, monitor, Raspberry Pi, and mirror) was around $300-350.

The mirror in action

Cutting the box

I picked up a long piece of oak from Home Depot. I then cut all the wood to length, based on my misguided calculations (more on this later).

Box building

I used a handy jig made by Wolfcraft to form a neat 90-degree angle and then used countersinks and #8 screws to form the box.

Box is done!

Building frame supports

Because I'm going to be attaching the frame from the bottom, I need to add a few supports. I cut a few pieces of thin pine and screwed them into place from the inside. The screws I used were sized so that I wouldn't pierce the side of the box.

Unfortunately, I made my frame slightly too small so I wasn't able to add a support on the fourth side. My monitor bezel is deeper on one side and i hadn't taken this into account. I'll still be able to attach that section of the frame on the ends and use glue to support the rest, so everything will be structurally sound.

Also pictured here: the bluetooth speaker I was going to use that doesn't fit. Oh well.

Cutting the frame

Now that the box is built, it's time to build the frame. I measured and cut my frame pieces and then used my compound miter saw to cut the ends into 45 degree angles. Clamping each piece together and then cutting with my miter saw ensures that the edges will be at a symmetrical 45 degree angle. Don't forget to square your saw -- I used a few pieces of scrap pine to do this, measuring the output and calibrating my saw as needed.

Gluing the frame

I'm going to attach my framing from beneath so that the screws don't show, but first I need to get the frame nice and rigid. To do this, I'm going to glue it together, give it time to set, and then proceed to attach it from beneath. I laid down some newspaper, applied a small amount of wood glue to each corner, squared everything up with my speed square, and then used clamps to hold everything in place. Then, I waited a day for the glue to cure.

Note: Before gluing your frame, measure one last time to make sure that its inside dimensions are still correct (this can be a costly mistake both time-wise and material-wise!)

If you have a pocket hole jig, it will make the framing process much easier (I know what I'm asking for for Christmas).

Attaching the frame to the box

I applied a small amount of glue to the lip of the box and then drove screws through my box supports to attach the frame from the underside. This way, the screws won't show from the outside but the frame will be securely attached to the box.

The frame is ready for sanding! I've made a medicine cabinet. Again, I measured the box slightly too narrow so I won't be able to fit an interior support on one side of the frame. Thus, I used a little extra glue and these clamps to hold it in place so that that particular side will remain tight. Now I'm ready to sand and stain my box.

I got a little surprise in store for that guy.. The clamps!!

Sanding the frame

I used 220-grit sandpaper and my power sander to sand all exterior surfaces of the frame and box. The oak I purchased was already finished nicely so I didn't need to go rougher than that. I removed the excess saw dust with a damp cloth.

Staining the frame

I used a dark stain that will match the doors in my house. I'm not usually a fan of dark stains, but this one really brings out the oak's natural beauty. Follow the instructions on the can for your particular stain. For me, this process involved using a fine sponge brush to brush the stain on and then waiting 15 minutes until I got my desired color. Finally, I wiped off the excess stain with a soft, dry cloth (read: old shitty T-shirt). Finally, I waited 8 hours for the stain to absorb/dry fully before applying my clear coat.

Note: Do not let excess stain dry on your frame. Be sure to remove the excess prior to sealing.

Lookin' purdy

Sealing the frame

Using a foam brush, I applied a thin layer of polyurethane sealer. This will protect the wood and protect my stain.

I applied a thin coat using a foam brush, waited 4 hours, and then lightly hand-sanded using 220-grit sandpaper. This ensures even coverage.

Then, I applied a second coat, waited another 4 hours, and then lightly sanded with a slightly finer grit sandpaper.

Adding a third coat is optional, but I decided to do it. For the third and final coat, I created a 50/50 mix of polyurethane and paint thinner. This final coat will ensure that any small grooves and other gaps get a nice even coat. After the final coat, I waited 24 hours for everything to cure properly.

Looks nice!

Installing USB ports

To make (potential) debugging easier, I wanted to install some USB ports. This way I could easily install a keyboard or mouse if I don't want to connect to my Pi remotely. Down the road, I could also add a bluetooth dongle. I found a nice flush mount USB port set on Amazon. It's usually used to install USB ports in the dashboard of your car.

I used a 1-1/4" holesaw to cut the hole in the top of the mirror and then threaded the included plastic nut onto the back of the USB port.

Drilling ventilation holes

My monitor and Raspberry Pi are definitely going to generate a little bit of heat so I drilled some 1/4" ventilation holes in the top and bottom of the frame. You won't see these holes once the monitor is mounted since the front face edges of the frame extends beyond the sides. I guess you'll see them if you look directly at the top or bottom of the monitor, but the monitor is pretty tall, so this is doubtful. Also, who cares.

Adding mounting tabs

Next, I added some mounting tabs to the mirror. I cut two small triangles out of oak and drilled a hole in the center of each. Then, I glued and screwed each to the top inside corners of the frame. After attaching screws to the wall, I'll be able to slide the screws through these mounting holes from the outside and the screw heads will keep the mirror from sliding forward and to its death.

Attaching the mirror material!

Finally it's time to attach the mirror! I used a bit of trash bag material on the outside since I'm going to be removing the protective film from the mirror. This will keep it from getting scratched while I finish up my work.

I removed the outer protective film from the mirror and set the mirror into place. Since the mirror material is 1/8" (you can also order thicker material for extra money), I used a bit of tape to secure it in place and keep it from sliding. If you use silicone to secure it, or if your mirror is too large, you risk a "funhouse mirror" effect, where the material will warp and you'll look like a Conehead.

Luckily I didn't need to cut my mirror; I ordered it to size. But if you do have to cut your mirror, the manufacturer provided a nice material on doing so here:

This video also provides a quick example of what happens if you use the thinner mirror material for a very large mirror (read: funhouse mirror).

Cutting a cord slot and microphone hole

I used my dremel and a multipurpose bit to cut a small slot at the bottom to run a power cord through. Eventually I want to install a power outlet behind the mirror, but for now I can be lazy and power it this way.

Next, I drilled a hole for my microphone. I put it in the bottom of the mirror where you won't see it. The microphone itself is flexible, so if it doesn't pick up sound properly I can always pull it out further and curl it around the bottom of the mirror. I didn't want to drill a hole in the face of the mirror and ruin the look, although that would probably be the best location for a microphone. If you can find a flush mount microphone that's good, go ahead and do that. This one cost me about $8, so I don't have very high hopes for it.

In this photo, you can also see the space where I was going to put my bluetooth speaker -- I measured things (slightly) incorrectly and it won't fit, so I'm going to use the monitor's built-in speaker. It's not as loud or clear as the bluetooth speaker, but it will work for now. Later, I'll connect the speaker via bluetooth and set it next to the mirror or something.

Installing the monitor and monitor mounts

The monitor is held in position from the sides by long wooden blocks that also act as strength members for the frame itself. However, to keep the monitor from falling backwards and keep it flush against my mirror I made some small, removable blocks out of pieces of scrap wood. I can easily remove these supports in case I need to take the monitor out. I don't think I'll need to, but just in case.

I thoroughly cleaned all the sawdust out of the mirror, removed the protective film from the inside of the mirror, cleaned the monitor's glass thoroughly, and put the monitor into place. Then, I attached my monitor supports. Good to go!

Routing cabling

I decided to attach everything to the back of the monitor so that I can freely remove the monitor from the mirror for some reason. Again, totally unnecessary. I used foam tape to mount everything in place, and began to route my cables. I used some velcro straps to keep everything neat.

One thing I like about the monitor I got (aside from it being insanely cheap) is how slim it is. This allowed me to keep my mirror looking more like a mirror and less like a medicine cabinet. However, it's definitely posed some challenges, like the need to cut the monitor's power supply cable and solder on an adapter so that it wouldn't protrude beyond the plane of the frame. So I did that thing I just said.

Then I screwed up

I recently refinished some exterior doors on my house using a nice glossy marine varnish and had some leftovers. I thought I'd put one final semigloss coat to make the frame really pop. So I taped off the mirror with painter's tape, applied the final coat, and then removed the painter's tape -- and along with it came strips of tint from the mirror. :( It looked really bad.

Then I made it worse

"No worries", I thought; "I'll just repeat the process, tape the entire mirror off, and remove all the tint." After all, I really only need it to be a one-way mirror.

It looked really really bad

I succeeded in removing (most) of the remaining tint, along with huge specks of mirror material. It looked like I dragged it behind my car for a few blocks.

tl;dr; Don't let painter's tape touch your mirror

I tried flipping the mirror over but there was an uneven glow coming through. So $60 and 9 days later, my new mirror arrived. I'm not too upset about it; I'll definitely salvage the old mirror material for a future project!

It's a good thing I mounted everything to the monitor itself -- swapping the mirror out was a breeze. Here's Sydney inspecting it for explosives.

Replacement mirror in place! This time, I ordered the mirror a little larger so that no tape was needed to hold it in place.

Hanging the mirror

I used two wall anchors and strong stainless steel screws to create mounting points on the wall. Then, I simply threaded these screws through the mounting tabs I created earlier.

I measured wrong and accidentally mounted it too high. I'm 6'4" so this is not a big deal but I plan on lowering it later so that others can enjoy it more easily. :)

All mounted!

Hiding the cord

I used a Cordmade cord raceway/track to hide the cord. Someday I'll install an outlet behind it for maximum awesomeness.

Here's a close-up of the microphone, which peeks out of the bottom and works great! Not bad for an $8 microphone, but I recommend splurging on a slightly nicer one since it will be easier for Jasper to understand you.

Making the mirror voice-controlled

Because it's kind of a long process, I wrote a separate guide on adding voice controls to the Raspberry Pi is an always-on, open source voice-control platform that's pretty awesome.

In the near future, I plan on using Amazon's Alexa voice platform, which it just opened for public use!

Installing the Magic Mirror interface

Magic Mirror is essentially a webpage that's hosted on a web server running on your Raspberry Pi. Originally created by Michael Teeuw, the Magic Mirror interface is really nice out of the box and only needs minor customization. I've written a separate guide on installing Magic Mirror on your Pi.

All done!

This has been a fun project, and it's already given me tons of ideas for other projects. If you have any questions about doing this project on your own, post below and I'll do my best to help you out.

The weather widget -- it's definitely almost summer!

The calendar widget -- let's go Rays!

Mandatory selfie reminding me I need to shave.

Thanks for the random compliment, inanimate object!