How to make a Smart Mirror using an old monitor, a Chromecast, a picture frame, and too much time on your hands.
Lately I’ve been stepping deeper and deeper into the bottomless pit that is home automation. If you’re not familiar with home automation, maybe you’ve heard of the “Internet of Things.” Although these two mindsets differ slightly (automation strives to make things, well, automatic, while IoT usually just means putting wifi on an appliance like a coffee maker or crock pot), they have one thing in common: they’re both rather expensive. A typical off-the-shelf home automation hub (like, say, the Logitech Harmony or Samsung Smarthings) will set you back about $100. Add to that whatever sensors, lights, switches, or remotes you might want and you’ll be looking at closer to the $300.
Cheaper home automation alternatives manifest themselves as DIY open source projects, usually making use of a Raspberry Pi or Arduino. These require some fundemental coding know-how, or at least a few hours browsing YouTube and support forums. There are some great free open source projects out there, like Home Assistant and OpenHAB, with a lot of supportive communities who are willing to help.
As I’ve been looking at ways to make my house smarter, I stumbled upon Smart Mirrors, sometimes referred to as Magic Mirrors. Basically, a Smart Mirror is a DIY project that slaps a display behind a two-way mirror, then shows useful information like the time, weather, upcoming calendar events, etc. Here’s a picture of one of the cooler smart mirror projects I found when I started doing some research:
You can Google plenty of other similar projects that have had amazing results.
I decided that I wanted to make a Smart Mirror, but I wanted to do it with (mostly) stuff I already had laying around the house. I wasn’t against going the Raspberry Pi route, but I have zero coding experience and wanted to see if I could do it with what I already had before buying a miniaturized computer. I took a quick inventory of old gadgets and cables I had in my office closet, and here’s what I came up with:
- Chromecast (version 1)
- Old Dell monitor w/power cable (only VGA input)
- VGA cable
- Smart outlet (already integrated into my home automation system)
- Extension cord
My idea was relatively simple: find a way to plug the Chromecast into my old monitor, then find a way to continuously cast whatever information I want on my smart mirror to the Chromecast. Once that’s working, mount the monitor to a two-way mirror, and hang the whole contraption from the wall.
As you can imagine, it quickly turned into a multi-month long project that took unexpected twists and turns, and more than a little ghetto finagling. Below you’ll find the chronicle that led me to creating my first ever Smart Mirror. I’ll tell you up front that not only did I get it to work, but I got it to work well. Here’s my tale, with accompanying pictures.
The first thing I needed was an HDMI to VGA adapter. I found one on Amazon for $8 (here’s a link), and it even has a cute little aux-out port. Sweet.
Once the adapter arrived, I needed to test the initial contraption. I hooked it all up (Chromecast -> adapter, adapter -> VGA cable, VGA cable -> monitor), and turned the monitor on. And…
You can’t see it well, but the monitor has an error message saying, “Cannot Display This Video Mode.” Great. Some quick Google searches revealed that the monitor in question was too old to support the Chromecast’s resolution. Welp, that’s not going to work.
After about a week of contemplating whether I actually wanted to spend money on a new monitor, I finally decided to turn to Craigslist and Facebook Marketplace. I found a small Polaroid TV for sale (yes, Polaroid makes TVs. No, they don’t print pictures). It ran me $30, but the TV had more inputs and outputs (including HDMI! Yay!), as well as built-in speakers. Pretty swaggy. Here’s the TV I purchased.
Next, I needed a two-way mirror. This proved problematic in the frugality department; two-way mirrors are rather expensive. A 16in x 20in mirror runs just over $80 from my local glass shop, so I decided to take a different route first. After more Googling, I landed on trying out mirrored window film.
Most hardware stores sell all different types of window film. Usually, people apply this stuff the their house’s windows to help keep it cool in summer, or to apply decorative patterns. I found online threads full of people debating their use with Magic Mirrors — the trouble is that they’re difficult to apply without getting a “fun house” mirror effect (warping, bubbling, etc). On the plus side, window film is cheap. A 3ft x 15ft roll only set me back about $20. With that much material, I knew I could try applying it multiple times if the first effort didn’t yield mirror-y enough results.
Finding the window film was a journey in and of itself. I went to Lowes, who said they were out of stock. I went to Home Depot — no dice. Finally, I turned online and found that my local Lowes did in fact have them in stock (sigh). I placed an online pickup order, and finally had my precious film.
The next decision was what to apply the window film to. I could purchase a sheet of glass, but then would need to build some sort of frame for it. Also, glass isn’t cheap. The other option is to buy a clear sheet of acrylic, but this usually adds to the warping “fun house” effect due to acrylic being flexible. I ended up going the acrylic route anyways (call me a masochist), which was my first mistake. My second mistake was that I bought a (approx.) 1.5ft x 4ft sheet. At the time, I was thinking “hey, if I’m going to do this I might as well go big and build a full-lengh mirror.”
The problem was that applying the window film to this massive sheet turned into a several hour long lesson in frustration. My wife (bless her) helped me out, but in the end we both decided to abandon the acrylic and look for alternatives. This sunk cost ended up being about $30, but luckily I still had plenty of window film for the next try.
We decided that sticking to a smaller form-factor would be more manageable, and that glass was a necessity. In the end, we found a wood picture frame at Walmart. It looked good, was a manageable size at 16in x 20in, and it came with glass. Bingo. It set us back about $10 or so. We applied the window film, and decided it was good enough to move on.
At this point I had everything I needed build a prototype of the physical mirror. The next step was to figure out the software side: how could I use a Chromecast to display an ongoing feed of relevant data? Usually, Chromecasts are used with a TV to watch YouTube, a movie, or pictures of cats. They’re not really supposed to display an ongoing feed, and they require an additional device to tell it what to show in the first place (i.e., you start a YouTube video on your phone, then “cast” it to your TV).
Down the Google rabbit hole I went, searching high and low to see if others have solved this problem. To the best of my knowledge, based on what I found on forums, websites, and blogs, nobody had tried using a Chromecast for a Smart Mirror project. However, businesses do use Chromecasts to display what’s referred to as “Digital Advertising Signage” or just “Digital Signage.” One way a business might implement this is with a menu displayed on a TV. Another is by having a standlone display that shows revolving advertisements. There are entire companies that build the backend to allow Chromecasts to display an ongoing feed of information — but most of them cost a monthly or yearly fee. Finally, I found one that does it for free so long as you use only one display. They’re called AdSignage, and they saved my butt.
AdSignage pulls off their magic trick through Chrome. Essentially, you sign up and add your Chromecast as a player, assigning it a unique alphanumeric key. Next, you build a web page on the AdSignage website that contains whatever you want to display on your Chromecast. Finally, you tell their media server where you want the web page displayed using the key you created earlier. Chrome allows you to cast that web page to your device using built-in browser functionality. The best part is that once the cast begins, it no longer relies on your computer. You can close Chrome and turn off your computer — the cast won’t be interrupted.
Once I tested everything and understood how the pieces fit together, it was only a matter of figuring out what I wanted my Smart Mirror to show, and how to best fit that into the canvas using HTML. I decided on a few key pieces of functionality:
- Current time and date
- Current weather
- Upcoming calendar appointments
- A daily Calvin & Hobbes comic strip
I searched the web, finding the best widgets/code for each piece of fucntionality. I didn’t want to reinvent the wheel — plenty of people have made these pieces of information for the web, negating the need for me to create something new. I tried several variations of each widget. Here’s what I ended up going with:
- Current time and date: timeanddate.com
- Current weather: powr.io
- Upcoming calendar appointments: Google Calendar (synced with my iCloud calendars).
- Daily Calvin & Hobbes: I pointed an existing RSS feed to Feedwind, which creates a widget that can be embdeded into a web page as an iFrame. The RSS feed pulls the comics from Go Comics. Here’s a link to the final widget.
Once I was done messing around with formatting, iFrames, and text sizes, I was ready to test it on the monitor/TV. First, I stripped the TV of its plastic shell and removed the speakers from their enclosures.
To be honest, I wasn’t sure if I was even going to need/want the speakers at all. But, I figured they were there, so I might as well keep them in case I want to implement audio somewhere down the road.
My first thought was to stick the speakers to the side of the monitor. I used super glue, and initially this worked. Eventually they fell off, and I stuck them elsewhere. You’ll see that in a picture further down.
Next, I needed to test that the somewhat-ghetto AdSignage-to-Chromecast solution worked. I plugged everything in, initiated the cast, and…
Woohoo! It worked! As you can see, in an early build I was trying to fit a daily XKCD in addition to Calvin & Hobbes. This proved more trouble than it was worth, as XKCD has a different sized comic nearly every day. I decided to just go with C&H.
With the screen stripped down and the cast working, I was ready to install it to the “mirror.” I cut out cardboard to fit the empty space around the monitor. This helps disguise where the monitor is — otherwise it’s sitting in front of a white wall and the display sticks out like a sore thumb. I wanted it to blend. Here’s the initial setup:
The dangling pieces are an IR receiver (for a remote that didn’t come with the TV), an aux-out jack (for headphones), and the TV control buttons. Also visible in the picture are some fisheye screws and mounting brackets. Those were my solution to the next problem: how to affix the display to the picture frame. It’s too heavy for glue or tape, and drilling anything into the metal housing wasn’t an option as I didn’t want to accidentally damage the display.
I decided that the best way to make it work was to essentially hang the display on the picture frame. I screwed one fisheye screw onto each side of the back of the picture frame, then used metal hanging cord (not sure this is the right term, but its the same stuff used to hang picture frames) to tie the display to the frame. One long cord went along the bottom of the display, acting as a seat. Then I used the screw at the top of the display (seen on the picture to the very left) to tie another cord along the top. I cinched the cords tight, making the monitor flush with the front glass.
Once that was done, I screwed two hanging brackets into my wall, and used the same metal cord to hang the mirror/display contraption. Here’s what version 1 looked like:
Not bad! My wife and I used this version of the mirror for several weeks, and it worked great. For a while I experimented with a Chromecast Audio (separate device from the Chromecast being used with the display) attached to the speakers, but found that having two Chromecast devices in one project just felt like too much. I also tinkered with the widgets after finding the weather widget to be too dark. Initially, I used the Dark Sky widget (pictured above), but eventually went with the aforementioned powr.io widget. It’s bigger and prettier.
The above enhancements birthed version 2 of my Chromecast Smart Mirror. But I still wasn’t completely satisfied.
I had been experimenting with using one of my old iPhones as a security camera when I’m away from the house. To do this, I use an app called Manything — it detects motion and sends alerts to you, plus it integrates with IFTTT, making it flexible with other home automation uses. I started to wonder, what if I could mount my phone to the smart mirror and have it be a security camera from behind the two-way mirror? This curiosity led me to Chromecast Smart Mirror version 3.
To make this happen I cut out a square of cardboard from the back of the mirror. I’ll refrain from using the word “peephole” …but there it is. Next, I used a cubed piece of foam stuff from a recent Amazon order to secure my old iPhone. I cut a hole on the front for the camera, and along the bottom for the charging cord. I ran an extension cable up and plugged both my phone and the Chromecast into this. Finally, I used that tried-and-true metal cord from earlier to hang all my wires/cables from. This keeps them from hanging down the bottom of the mirror. Here’s what it looks like from the front:
BOOM. There it is. Chromecast Smart Mirror version 3, in all her glory. As a final piece of automation, I plugged the display into one of my smart outlets down below. This outlet turns off whenever I leave the house, and back on whenever I return. I can also tell my Amazon Echo to turn the smart mirror on or off, preventing me from having to physically move (movement is so 90s).
There are some limitations to this final-ish version of my Smart Mirror. First, occasionally the Chromecast stream will fail. This means I have to get back on my computer and re-initiate the stream. This happens maybe once/week, so I wouldn’t really call it a big nuisance.
Next, somewhere along the line the IR receiver for the display stopped working. Although the display didn’t come with a remote, I do have a Logitech Harmony Hub which allows me to duplicate IR signals and use my phone as a remote. When I first bought the display, the IR reciever worked perfectly with my Harmony Hub. After tinkering around with the display and mounting it, however, the reciever stopped working. This sucks for a couple reasons, and it leads me to my next limitation…
The smart outlet works just as you’d expect when turning the display off. If I leave the house, the outlet cuts the power to the display and shuts it off. When turning it on, however, it doesn’t actually turn the display on. It only allows power to pass to the display, meaning I have to physically push the “on” button. If the IR receiver worked, I could have my Harmony Hub tell the monitor to turn on. Since that doesn’t work, I have to physically press the button.
With those three things in mind, I’d still call this project a massive success. Not only was I able to accomplish what I set out to do, but I was able to do it for only about $100 when supplies and that dastardly acrylic sheet sunk cost are taken into consideration.
If you thought this project was interesting and would like to talk to me more about it, please feel free to leave a response here on Medium, or shoot me a note on Twitter. Also, if you’re interested in home automation you can check out /r/homeautomation, /r/magicmirrors, and /r/amazonecho on Reddit. I’m constantly finding new ideas for projects within these communities.
I’m sure this project isn’t over — I’ll add to it, tinker with it, and change it as I go. Still, I think the end product was worth the time and money. I use this thing every day, and it saves me from having to whip out my phone to check the weather or see the time which is nice. I think the next step is to use AirFoil to add the Chromecast as an audio player for my whole-home audio setup…basically it would turn this version 1 Chromecast into a Chromecast Audio…hmm, I’ll be right back.