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.
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.
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.
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.
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.
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.
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.
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.
I’ve come up with the hardware costs as follows for the prices in USD of the items when I purchased them.
- Raspberry Pi 2: $35
- Tapp Plastics Reflective Panel: $50
- LVDS Controller Board: $20
- LCD Panel: $35
- Power Supply: $10
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.
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.
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
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.