Smart mirrors are all the rage, but I really didn't want to pay $5,000 for one, didn't want one in my bathroom, and really wanted full control over the software. My solution? Build my own. Here is what I came up with:
First built and functional prototype of my smart mirror! Still working on the software of course pic.twitter.com/eAmWeXkyA0— North McCormick (@NorthMcCormick) January 24, 2017
This smart mirror includes a touch-free interface that can sense your gestures in front of it to navigate. We've got a 20" display area and then some extra mirror around the edges to fill the space nicely.
I want to clarify that this post isn't meant to be a tutorial but more of a narrative around my project and why I did what I did. There are a plethora of half finished or half assed tutorials online for how to build your smart mirror and after diving into a few I realized a few common pitfalls that I had solutions for:
- Software/Hardware continuity
- Real user value
- How to actually build it
Having a set of requirements for any project is super helpful. They should guide you and help you paint a clear vision of what you want to end up with. Here's my short list (not all inclusive) of requirements:
- Software that any developer can build on
- Thin, sleek, and realistic
- A hint of magic
- Fairly easy build
Let's dive in...
I really did not want to resort to using an old tablet for my mirror. Why? They become pretty useless. You have no access to sensors through the mirror, you're confined to that platform, no way to navigate it, and sharing your interface is almost impossible. Who else has that exact piece of hardware or build set up? Probably very few people. I decided to go completely custom build:
- Computer: Raspberry Pi 3
- Monitor: 1080p thin LCD monitor (cables on the side)
- Hover circuit from Hover Labs
Raspberry Pi 3
I chose the raspberry 3 for two reasons: Price and performance. While the Pi3 isn't anything spectacular in performance it definitely gets the job done. With a few good tweaks and some proper setup the Pi3 handles bluetooth, wifi, HDMI, and more without a hitch. It has a very slim profile because it doesn't require you attach another board on top of it to handle networking. I'm running the latest raspbian (Jessie) and was able to set up NodeJS (more on this later), get my boards communicating over i2c/gpio, and the necessary OS setup in under 2 hours, doing it again I'm sure I could have that all ready in less than 30 minutes.
I've seen a few different display types used in some of these projects. Old monitors, tablets, even expensive screens that use the ribbon cables and are really really thin. Old monitors might not be compatible, tablets (again) are confined, and the super expensive screens... are expensive.
I grabbed this modestly priced monitor (https://www.amazon.com/gp/product/B00S8W8QMG/ref=oh_aui_detailpage_o04_s00?ie=UTF8&psc=1) off of amazon and it's got some qualities that will really help out the project. The monitor is thin, like a centimeter for the display and less than an inch for the back PSU/ports panel.
Edit: I went to go grab a picture and am realizing that they actually sent me the wrong monitor! It must have been an older model. I feel lucky that the one I got still worked but a) be cautious with this supplier. I only bought it for the super fast shipping and you can probably get equivalent monitors for cheaper elsewhere. And b) if they do ship you the one they're advertising, your frame will be even thinner!
It's super important to remember that you really want your ports to be on the sides of the monitor because if you have your ports facing outward, you probably won't be able to mount your mirror nicely.
The monitor also does sound over HDMI, and while sound isn't required it adds a great set of user feedback to let them know that their actions are being captured.
I bought this board (http://www.hoverlabs.co/products/hover/) about a year ago and never had the chance to use it, but it's so much fun.
Though I don’t think they advertise it anymore, the hover can actually see through certain materials. I discovered late in the project that it does not work through the mirror. I assume whatever it’s sensing actually does get reflected back, blocked, or scattered to the point that it can’t recognize the gestures anymore. Never fear I modified the mirror plans and added the white strip (the material of picture frame mats) at the bottom of the mirror. It’s still very aesthetically pleasing but also allows me to have that magic I was talking about earlier.
Note: I had the original hover board and have not worked with the newest version. I really want to buy it and play with it, but that’s another day for another post.
Ah software, the thing that breathes life into our electronic devices. Most smart mirrors haven’t convinced me on this front in the slightest. I’d like to change that.
Front End: AngularJS 1.6
On-board server: NodeJS
Back End/DB: Firebase
Why web based?
The amazing thing about web based software is that it can be run virtually anywhere. Whether you’re streaming on a virtual screen to a device, loading remotely, storing the app in memory, web based works. It’s also super easy for people to build on and maintain.
More about the front-end
The front end as stated before is built using AngularJS. AngularJS has a very large community and is supported really well. Having a stable and competitive technology in the mirror was big want. The software which I’ve dubbed as BlackOS is a fairly smart piece of work (if I may say so myself) since it is being built to allow developers to extend the software! I’m building out frameworks and using them in the stock apps to crash test them. It handles all the special UI, app events (like gestures from the hover), notifications, and more.
Another big benefit of using a web based front end is that if an app wants to interface with their own API, it doesn’t require any modification to the rest of the software. They can just pop in their calls and be good to go.
A bit about the server
The front end and server communicates via web sockets for a snappy and easy way to send/stream any data needed from the hardware. I originally had it all written in Python but it very quickly became really hard to manage AND using Python really makes it difficult to port over to other machines. It just doesn’t feel as easy to do it (I know there are people who will argue with me but after living in the node world for so long, I just can’t look at python).
At the same time as I rewrote the server, I had to port over the library for Hover. You can see and use that here: https://github.com/NorthMcCormick/hover-nodejs (Again this might only work for the legacy hover, once I get a Hover 2 in I’ll update that repo with anything I find.
Now instead of managing all sorts of crazy threads in python I could re-build my server in 30 minutes using NodeJS and have it running exactly as I wanted it. This hopefully will also allow me to write in some kind of lazy loading set up for 3rd party modules to run with their apps but I haven’t gone into that much yet.
The server will eventually start playing more of a system level role to do tasks that shouldn’t really be exposed to the front end such as notifications, cron jobs, hardware interfacing, etc.
What about the back-end?
I’ve got an experimental piece in the front end that allows you to store your preferences and manage your mirror from an app on your phone. This gives you the full setup control and then some. Firebase is fantastic, fast, usually free, and backed by Google. It seems like a good bet. Not much happens on this layer yet but there’s a lot of room to grow.
Do we get to see the source?
Soon! There is still a lot of work that needs to happen on the software side to make this a more complete package. I’ve got a small roadmap that includes: hosted versions of the mirror, notifications, integrations, a public app, etc. I will open source as much of this as I can when it’s slightly more mature. I would love the community to help it grow.
How did I do on my requirements so far?
Software that any developer can build on
By using modern languages and libraries this should give new and old devs the power to build onto the system. There’s a lot of work to do here, though.
Thin, sleek, and realistic
The mirror is super thin and sleek. I want to do another mirror that doesn’t have a frame but I’m still working out those details, but after this build I definitely think it’s possible.
A hint of magic
The way you interact with the mirror captures the small bit of magic that I needed. Once I started using it to navigate during testing I learned that while it’s limited in what gestures you can use, that helped me think about the OS in small interactions. The user isn’t going to be using the mirror to browse through their instagram feed and won’t be using it to type messages.
I think I did okay here. I could have waited longer on my shipping times and ordered from Newegg or other vendors and gotten a few of the items cheaper. I think I could have saved about $50-60 but overall it wasn’t bad for being on the fly with not a lot to go off of.
Fairly easy build
The construction itself wasn’t too bad, took about an hour and a half. I had to measure, score, and cut the mirror (I used a 1mm acrylic two-way mirror piece behind glass) which I had to go back and re-do because of the white bar. Using double sided gorilla tape strips I was able to adhere everything into a solid block. I used electrical tape to wrap some of the cables and tape down the other pieces and that’s worked great so far. The elastic bands, hooks, picture frame, paper, and tape can all be found at Target.
I’m doing research on proximity sensors and other ways to add some magic to the mirror. It would be awesome if the mirror could identify a user by their device (proving to be super difficult because Apple masks the radio data from iOS8+) or just use a proximity sensor to activate.
Some back lighting might be in order too, I have a bunch of old RGB strips that I can throw together to show different colors for whether the user has a notification or even to signify the time of day.
There are two big things in the software that I’ll be working on over the next month: Integrations and SDKs.
While I can’t build a true SDK I can give developers the tools they should need to build the apps using standard components and functions.
Integrations are a trend that’s moved software in a new and better direction. Being able to integrate with things like IFTTT or Zappier could make for some really cool apps and services. I’m working on a basic notification system and setting up a node server that anyone could run from Heroku for $7 a month on their cheapest plan that would give them 24/7 connectivity.
I will be following up to this post with a part 2: Software. Once the OS has got a bit more kick I’ll be showing that off and hopefully at the same time open sourcing it so that you can build and setup your own mirror.
If you’re interested in more details feel free to reach out via the comments!