My New Project: A Smart Mirror

After having finished up my Raspberry Pi retro gaming box, I was looking for anther project and came across this article. I immediately determined that this was something I absolutely needed in my life. Like, right now.

What's a smart mirror? 

It's just like a regular mirror except that there is some kind of screen behind the that displays information that floats around your reflection. The information shines through because it's actually two-way glass (you know like the kind you see on TV when the police are interrogating their prime suspect?).

After a little bit of reading, I came across an OpenSource project called MagicMirror which can run on anything that NodeJS will run on, but is designed to work on mini-computer boards like the Raspberry Pi.

Planning the smart mirror to be... well... smart!

I really don't want my smart mirror to actually be dumb, so here are the smarts I'd like to build into it:

• Facial recognition so that I see a different view than my wife does. I'm not interested in how long her drive to work is going to be, for example, nor does she care when the next 501 streetcar is arriving.
• Motion/presence sensing so that the screen is only on when someone is standing in front of the mirror
• Voice control to explicitly tell the mirror to change views (say, in case facial recognition doesn't work) and to do cool stuff like take voice memos and translate them to messages on the mirror.
• Integration with smart home devices

I thought about touch control -- there are some cool projects that integrate touch control into their mirrors -- but I have two small children who I envision will want to play with the mirror all the time, and the last thing I want is my mirror to be covered in fingerprints.

And finally, some of the information I'd like to see:

• Current date and time
• Current and forecasted weather conditions
• Calendar events -- we're always forgetting when the kids have a birthday party to go to... having this right by the front door would be a huge help.
• Commute times and transit schedules
• Notes / messages / To-Do's / shopping list
• Sports scores
• Smart home information - thermostat temperature, door lock status, music currently playing on the Sonos system, who just rang the doorbell, etc.

Lastly, since this will be in the hall by the front door, my wife, while quite supportive, has mandated that this be a full length mirror. That complicates things a little, since they don't make screens so tall and narrow, but it is a design goal nonetheless. And it needs to be attractive looking. I don't want this to look like some high school physics project with all sorts of wires and such hanging out. It should look as attractive as any piece of furniture you'd buy in a store.

Setting up the Raspberry Pi

My Raspberry Pi has arrived, so I'm keen to get the software side of things started for my mirror. I ordered this kit from Canakit, which is basically just the Raspberry Pi and power supply. I already had an unused enclosure lying around from my RetroPie project so the only other thing I need to get started was a microSD card and an HDMI cable.

Install Raspbian

For this project, you need the Desktop GUI version of Raspbian, as MagicMirror runs in a browser. So I downloaded and installed Raspbian Jesse with PIXEL. I'm sure you could do this with NOOBs as well, but I felt comfortable enough with the full install. For the first little bit you need a keyboard and optionally a mouse, but once you've got the network configured you'll be able to do everything else over SSH.

Getting rid of all the stuff that comes with PIXEL

As far as free operating systems go, PIXEL Desktop is a pretty attractive looking OS. It comes standard with some beautiful background images, a bunch of utilities, and such. Basically everything you'd expect out of a standard desktop OS install. However, none of this I need for my mirror project. Given the choice, I would have installed without the GUI altogether, but it's a requirement for MagicMirror. So I set about making PIXEL disappear. One of the great things is PIXEL's ability to be customized. By right-clicking on the menu bar, for example, you can get rid of pretty much everything. I left only the menu button, which will only be visible during startup when MagicMirror has not yet loaded.

Since I'm going to be using a PIR sensor to turn the screen on and off, I disabled PIXEL's screensaver and screen blanking timeout. Disabling the screensaver was actually trickier than it should have been... I first needed to install the XScreenSaver package, then disable the screensaver from its configuration.

I also don't want to mouse cursor to be visible, so I installed a neat little utility to hide it:

sudo apt-get install unclutter

Default PIXEL Desktop

My PIXEL Desktop after removing pretty much everything. Only the menu button in the lower-left gives it away.

Installing MagicMirror

Installing MagicMirror on a Pi 2 or Pi 3 is incredibly easy. There's one line you need to run, and that's it:

curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh | bash

MagicMirror automated install.

Follow the post-install configuration instructions here, and you'll have a basic install of magic mirror.

Installing Modules

The heart of MagicMirror is its module system. There are plenty of modules to choose from, most of them are used to display information, but some are utilities, like a module to integrate profile switching based on facial recognition, or to provide visual feedback cues for voice control. Somewhat confusing is that there are two places to find modules - a link off the home page, and a section in the user forum, with little overlap between the two.

My basic install thus far has the following modules:

• Date & time
• Calendar
• Commute time
• Transit info
• Current and forecasted weather
• Sports scores
• Nest thermostat status
• Sonos system "Now Playing"
• Compliments
• News/RSS feed

MagicMirror's module system is pretty easy to use, and if you're so inclined, it's fairly straightforward to write your own. The entire screen is made up of HTML, styled with CSS, so customizing it is old hat for anyone who's ever done web design.  One of my goals is to make this mirror beautiful, and that includes the UI display.  So I took to heavily customizing the modules to all have a similar look and feel, and in a few cases, completely wrote my own modules.  For example, there was no module for TTC info (Toronto Transit) but there is a public data feed freely available.  So I wrote a module for that.  I also wrote my own scoreboard module for today's sports scores.

I am currently unsure how well the coloured elements will look when behind the two-way glass - I haven't ordered the glass yet, as I'm still finalizing the design for the frame -- so I might change this to be monochromatic later.

Next up... getting facial recognition working!