I recently saw multiple posts about smart mirrors, so I decided to give this a try myself, and I want to document the process, and whether I succeed, here. This first part is about figuring out what components to use, what should be possible once it's done and how I'll go about programming the software. Here are some other projects of this kind:
Medium: My Mirror is smarter than yours
Hardware
- Some LCD Mirror, probably 24 inches, possibly with the back cover taken off to make it thinner
- A two-way mirror. Pretty expensive and hard to get here in Germany, I only found a few shops online. This will be around 60-100€
- Raspberry PI, hopefully. I'll have to try whether a Pi 3 is fast enough. A Pi 1 isn't even supported by electron (see below)
- All the required cables
- A wooden Frame that I will build myself once I know the exact dimensions.
- (optional) some sensors (ultrasonic, laser object detection; see below) and capacitive touch buttons from eBay
- (optional) a rather cheap speaker box from amazon or ebay, if I decide that I want some sound in there
The 2-way mirror will reflect the bathroom light while letting some light of the LCD through, so both the mirror and the display can be seen. The display will be attached right to the mirror's back, with no path for light from the outside to pass through the mirror from behind. The Display will be hooked up to the raspberry PI, which will connect to the internet through Wi-Fi. If I decide to include a speaker, that will also be connected to the PI and directed downwards, so the sound can get out of the wooden enclosure through some holes in the bottom. Finally I'll have one wire for power supply for all the items inside. Power supply is actually very important since I plan on leaving it turned on 24/7, so the power supplies should be reliable and not burn up in flames after long usage. To save some energy, the display should not always be turned on, but switch off a couple of minutes after I leave and turn back on when I standin front of the mirror again. The ultrasonic sensor will provide that information to the PI which can turn the display on and off based off of the sensor value.
Why have all those buttons and sensors? I plan to include some basic interactive functionality, like scrolling up and down a news feed or opening a specific news article to read the full story. For scrolling, I imagine having two laser sensors atop of each other that detect objects up to 15cm away, so they can detect my hand, and, based off of which activates first, the direction I'm "swiping". I haven't tested how well that works though, so maybe I'll abandon that idea. The other input method will be 5 capacitive touch bottons along the bottom. I might change those out for physical buttons if the touch buttons are too insensitive to be covered with some protective piece of plastic, or if they need too much space inside the frame, but I'd like to have them, touch is always better :P Either type of buttons would be grouped into 4 context specific buttons and one home button, that brings me back to the main screen. The other 4 can be mapped to different actions, like opening a selected article, playing/pausing a video, dismissing a notification etc, based on the UI state. Because of their flexible nature, they'll have their icons displayed above them on the LCD, so I can adjust them to the context.
Software
I'm currently developing the software using Electron, a Project by Github, that allows to write native Apps using HTML/CSS/JS by including Chromium and NodeJS, which work perfectly together. So I can use Chromium to display the UI, and use NodeJS in the background to read sensor states etc. It'll also have an http server with a corresponding Android App to change settings and the UI arrangement on the mirror. One of the first challenges with the design was how to connect to Wi-Fi. There are npm packages to set a Wi-Fi password and select a network, but how would I type in a password with just five buttons? I first thought about Bluetooth and the Android App, but quickly abandoned that because of how troublesome bluetooth always has been for me when developing some Android stuff in the past. So I remembered how I entered the Wi-Fi password on my TV: It just displays an on-screen keyboard which you navigate through with your UP/DOWN/LEFT/RIGHT/ENTER buttons on the remote. Exactly five buttons, like my mirror, so I quickly put together a little keyboard to enter the Wi-Fi password. I have a working Version of it on codepen.
Since I haven't bought most of the parts so far, I'm currently designing the Electron App, right now I just finished a rough design of the home screen. It features 3 sections, one for status info at the top (weather, clock, system status etc.), one scrollable stream of content in the middle (news, calendar entries etc.) and a row of icons for the buttons at the bottom. One of the buttons should hide the stream section for when I don't want anything to clutter up the mirror so it can fully be used as a mirror.
I can't test it on the Pi right now since I only have some v1 Pis around. They have ARMv6 CPUs and Electron needs ARMv7, so I have to wait until my Pi 3 arrives and test out whether scrolling and animations are smooth enough there. If not, I'll have a big problem. My choices are to get another type of board for the project, or change everything as a whole, either by going with more low-level software, like a python desktop application, or better hardware, though I don't know about any x86-based small computer like a Raspberry PI.