Ali (and Tasha) Vs. The Mirror of the Future™

Ali Ibrahim
Ali Vs.
Published in
7 min readMay 18, 2017

--

With all our pocket computers, watch computers, and laptop computers, you’d think we’re living in the future.

These computers are great and all, but I don’t think we’ve quite reached the future yet. No, I don’t think we’re living in the future until I can get the weather forecast just by glancing at a mirror.

The future is here!

Muhahaha

Tasha and I made the future a reality by building The Mirror of the Future™ at the 2017 Baltimore Hackathon.

A couple of weeks before the Hackathon, the idea for The Mirror of the Future™ popped into my head. It’s spring in Baltimore and that means cold, dreary days are followed by the most delightfully warm spring afternoons.

Baltimore springs can be crazy, but we get some sweet cherry blooms at least.

I love spring BUT my mornings could be just a little bit nicer if I knew the weather as I was getting dressed for the day.

So like any good engineer, I started Googlin’.

Googlin’

Turns out, I’m not the first person to have this idea. People are building so many Mirrors of the Future™ that there’s even open source software to support ‘em!

OK, maybe we’re living in the future.

To build The Mirror of the Future™, you need…

1 Raspberry Pi

We got a Raspberry Pi 3 Model B because it’s the latest and greatest, and it also has a built in WiFi chip.

Along with the Pi, we got an 8 GB microSD card. The microSD card came preloaded with NOOBS (New Out Of the Box Software). This meant less time fighting with operating systems.

Less is more.

We bought both the Pi and the microSD card (and a power supply) from adafruit.

(Protip: adafruit is a really cool resource for all the new toys we have nowadays. Check them out!)

1 Monitor

Tasha had an old monitor lying around that she lovingly refers to as “the cheapest, crapiest Asus monitor I could buy”.

Although The Mirror of the Future™ is from the future, it runs pretty well on outdated hardware.

“The cheapest, crapiest Asus monitor I could buy” is a teeny 19 inch monitor. It’s a little smaller compared to other examples I’ve seen, but it does the job.

1 Two-Way Mirror

You can find two-way mirrors online, but if you’re willing to put in a little work you can probably find one at a local glass shop. After contacting a few places around town in Baltimore, I bought one from Mirror Crafters Inc.

We wanted something close to a full length mirror, and for the best cool factor the monitor needed to be a tight fight inside the mirror. With that in mind, we got a two-way mirror cut to 17.5 inches by 48 inches.

A Bunch of Wood and Stuff

To house everything, we needed to build a frame around the mirror. We took some measurements and bought some poplar wood boards from Home Depot. We had tools, screws, etc. at home but you’ll need that stuff too.

We got all (most) of the things before the Hackathon so we could focus on building The Mirror of The Future™ during the event.

The Baltimore Hackathon!

After the Hackathon’s kickoff event Friday night, we got to hackin’ Saturday morning. We started by building the frame.

We designed the frame so it would fit around the mirror. To house all the things, we decided to make the frame two inches deep.

Building the frame required lots of sawing, sanding, and drilling.

Sawing, sanding, and drilling.

Once we had the frame built, we dropped the mirror in. Like any good hackathon project, it mostly fit together but we had to make a few adjustments…

A mistake is the opportunity to make another mistake.

But adjusting things is easy when you have an expert hacker like Tasha. 😉

1337 h4x0r Tasha

With the framing finished, we got some lunch and started playing with the Raspberry Pi.

Since our microSD card already had NOOBS installed, getting setup was pretty easy. Well, once we got a keyboard…and a mouse.

(Protip: you also need a USB keyboard and mouse.)

Raspbian booted as soon as we turned the Pi on and we were ready to go.

Hi Raspberry Pi 👋🏾

MagicMirror² is the software that powers The Mirror of the Future™. It’s an open source framework built using Electron. To install MagicMirror², we cloned the repo and installed some npm packages. There are some other steps too, but we just ran the provided install script because yolo.

After we got MagicMirror² up and running, we made a few tweaks. It comes with a few modules out of the box, but we only wanted a few: clock, current weather, and forecast weather. Tasha really wanted Daily XKCD, a third-party module, so we added that as well.

To add/remove modules, you update a JSON config file. If you’re adding a third-party module like Daily XKCD, you have to clone the third-party repo into your MagicMirror² repo. Nothing too fancy.

We kept things simple to get started, but there are a ton of modules out there. Since it’s an Electron app, writing a new module can be done with some HTML, CSS, JavaScript, and…patience. It’s exciting to imagine all the possibilities, but we still had a Mirror of the Future™ to put together.

After a taco break, we were ready to start putting some pieces together.

🌮🌮🌮

First, we pulled the monitor’s display out of the monitor. That might sound intimidating, but I just pulled a bunch of plastic apart.

The display is *inside* the monitor.

With the display removed from the monitor, we were ready to put it into the frame. We put the display at the top of the mirror. To hold it in place, we added a beam right below it inside the frame.

The Display of The Mirror of the Future™

With the display in place, we called it a day.

On the final day of the Hackathon, everything started to fall into place.

The best feels.

We’d been working on the back side of the mirror, but now it was time to flip it over.

We’ve been building a mirror this whole time?!

Aww, yeah

To help keep the mirror secure to the frame, we added some clear silicon between the frame and the mirror.

I’ve never seen a problem that couldn’t be solved with silicone.

Then, we cut some molding to make the frame around mirror look pretty.

I know what it looks, but I helped too. Seriously!

Now that the front of the mirror was coming together, we were ready to fill in the guts.

We wanted the display to be a little bit more secure, so we attached a Velcro strap to the frame. Once the display was in place, we strapped it in. Then we were ready to connect the Raspberry Pi.

The guts of The Mirror of the Future™. No one ever said it was gonna be pretty.

With everything in place, we brought The Mirror of the Future™ to life!

Hacking on The Mirror of the Future™.

We started MagicMirror² and voilà…

The future is here!

The Mirror of the Future™

In just a day and a half, we were able to build The Mirror of the Future™. It turns out you don’t have to know much about hardware, wood working, or two-way mirrors to build a Mirror of the Future™. You just need to have a little faith that you won’t fuck up a $100+ two-way mirror. 🙈

We still have a few finishing touches to make such as adding mounting hardware and staining the frame, but I’m calling this a win.

Ali (and Tasha): 1, The Mirror of the Future™: 0

Better luck next time, Future.

--

--