Building a Smart Mirror
Turning an Old Mirror into a Smart Mirror for $150.
May 23, 2017

Over the past year or so, Smart Mirrors have become increasingly popular side projects. I loved the concept, but a lot of the implementations I’d seen online were big and clunky; the majority of builds involved disassembling a full-size computer monitor and building a mirror frame around it.

I didn’t have a spare monitor laying around, and definitely didn’t want to pay full-price for something I might break while disassembling. I also didn’t love the idea of having my mirror jut out from the wall the four or five inches that using a full-size monitor would require.

I put the idea on hold for a while, but kept an eye out for new designs that might prove easier and cheaper to build. Eventually, I discovered what was by far the best-looking smart mirror build to date and was inspired to build my own version.

I wanted to make sure that my mirror looked good, was inexpensive to build, and, most importantly, was something I’d actually use. I built the hardware from easy-to-source components, and the software using a simple Node.js web-app.

photo of mirror mounted bright
My Smart Mirror
The Hardware

I already had some of the components I knew would be required for my project. I had an unused Raspberry Pi 2 laying around as well as an old hanging mirror. The difficult piece would be acquiring the two-way glass, as well as a thin enough display.

The Mirror

Full disclosure, I already owned a hanging mirror with appropriate dimensions for my project, and I did not include it in my project’s $150 estimate. That said, an old mirror shouldn’t be too hard to find at your local yard sale or thrift store.

photo of mirror disassembled
photo of mirror light on
photo of mirror light off

The two-way glass proved a more difficult acquisition. Two-way glass acts as a mirror as long as there isn’t a light source on the other side. In the case of a smart mirror, the glass allows the light from the lighter-contrast parts of the display through the mirror while allowing the rest of the mirror to remain reflective.

I called around various local glass shops and found that even a small piece of custom-cut, specialty glass would cost hundreds of dollars. Online shops were cheaper, but not by much. Given the expense of glass, I ended up opting for a piece of two-way mirror acrylic from Tapp Plastics. A 1/8” thick, 12” x 24” sheet cost about $50 plus shipping.

The plastic worked out pretty well, though it was a bit bendy and difficult to get to lay flush in the frame which caused a little bit of distortion at the edges of the mirror . If I were building this again, I’d probably have opted for a thicker, more rigid piece of plastic.

The Display

I explored a number of options for a display; I wanted something cheap, thin, and large enough to cover at least half of my mirror’s surface.

I thought about buying a cheap, used tablet, but I didn’t want to spend a ton of time tinkering with its software to get it to display a full-screen application. I also looked at independent screens sold for DIY projects, but these were generally small and a bit expensive.

Many of the smart mirrors I’d seen online used disassembled full-size computer monitors, but I hadn’t seen anybody repurpose a smaller display like a laptop’s. I did a bit of research and found that replacement panels for older models of laptops were cheap and plentiful.

These bare-bones display panels use an LVDS interface which means that in order to drive an HDMI video signal to them, some conversion is needed. Fortunately, there are a bunch of control boards built for exactly this purpose.

photo of screen on table

I ended up buying a controller board, power adapter, and display for around $50 total.

The Computer

I used a spare Raspberry Pi 2 to drive the display and run my dashboard’s software, but if I didn’t have the spare I would have bought a Raspberry Pi 3 which is a bit quicker and has built-in WiFi.

I had originally tried to use a Raspberry Pi 1, but found that it wasn’t powerful enough to run the full-screen browser I needed to create a seamless display.

Assembly

I wanted the assembled mirror to be totally self-contained. The frame I’d chosen was a little bit too thin to house all the required components behind the mirror, so I had to add a few pieces of wood behind the frame to give it enough room. In total the mirror protrudes a reasonable two inches from the wall.

photo of screen control
photo of screen clips
photo of mirror closed
photo of mirror internals

I held the display in place behind the mirror using shelf pegs, I covered the remaining surface of the mirror with black foam board. This board also acted as a mounting point for my Raspberry Pi, Display Board, and cable routing. I used another piece of black foam board to cover the electronics and keep out any stray light.

photo of mirror width
photo of mirror camera
photo of mirror kitchen

Costs

I’ve come up with the hardware costs as follows for the prices in USD of the items when I purchased them.

The Software

With the mirror assembled, I started thinking about what data I actually wanted the mirror to display. To do this, I worked backwards from my day-to-day routine and asked what I could do to make it a little more efficient.

photo of dashboard

Dashboard Requirements

I started with my commute. Seattle has a somewhat real-time bus schedule system vended through the app One Bus Away. Unfortunately, even these timetables can be wildly inaccurate, so I have to constantly refresh the app to determine when I should leave the house. Ideally my mirror would be able to display the next departures from bus stops near my apartment and update regularly.

Next to my commute, the most important part of my daily routine is the weather. Seattle’s weather needs no introduction. The first question I have in the mornings is “What’s the weather?”. I wanted my mirror to be able to tell me the week’s weather at a quick glance.

The time and date was an obvious addition, and the headlines of the day were something that I wouldn’t necessarily need, but might be nice to have.

Implementation

Data Sources

Using these requirements, I started working out how to retrieve the data required to build each of the four components: transit, weather, headlines, and time.

For transit, I discovered that One Bus Away offered free access to real-time transit data via an API. For weather, I discovered that Forecast.io’s (the company that builds the excellent Dark Sky mobile app) has a weather forecast API. I had about a million options to retrieve headlines, and ended up going with the NYTime’s.

Hosting & Rendering

I like JavaScript for simple stuff like API proxying and transformation so I used express.js to serve and render my dashboard. I was able to get the dashboard stood up in a weekend. The code for the dashboard is available on Github.

Deployment

With my single-page dashboard built, I needed a way to start a browser in full-screen mode on my Raspberry Pi. This is pretty easy to do using Chromium and Kiosk mode, and I’ve outlined instructions on the project’s Github page.