Introduction: Floating Smart Magic Mirror From Old Laptop With Alexa Voice Recognition
Grand Prize in the
Voice Activated Challenge
This is an entry in the
Epilog Challenge 9
Straight out of the future, the smart mirror is simply a display behind a one way mirror. One way mirrors can reflect most of light that hits the surface while still allowing some of the monitor's video behind it passes to the surface of the mirror.
The mirror also has an Amazon Echo Dot hidden behind it to enable all of Alexa's vast voice control features just by calling out to Alexa.
Unlike most of the smart mirror builds that are based of the Magic Mirror OS built for the Raspberry Pi, this smart mirror is built on a windows platform. There's nothing wrong with the Magic Mirror but it hasn't been built to be interactive and mostly displays static information. Furthermore the raspberry pi hardware struggles to do anything more than display static widgets.I wanted to be able to walk up to my smart mirror and be able to give it commands via voice. browse the web and maybe watch some YouTube/Netflix.
One more way my build differs is that I didn't want a frame around my mirror and wanted to maintain a floating glass look rather than building a frame around my smart mirror. To do this I drilled 4 holes into the mirror and attached the frame to these screws in the glass.
So after building this very smart mirror with my raspberry Pi as the brain, I decided to upgrade it to something more powerful, yet I wanted a cheap alternative especially considering how cheap the Raspberry pi is. The best way to do this was to use an old unused that was lying at home unused. If you don't have any old laptops, you can very easily get a second hand laptop of websites like ebay for dirt cheap.
1. Glass with 1 way mirror film applied by hand (you can also purchase a readymade one way mirror)
2. Wood, screws, nuts and bolts for attaching hardware to the frame.
3. A Cheap Display appropriate for your glass size. I bought mine second hand.
4. An old working Laptop
5. Amazon Echo dot
3. Rain meter widgets as linked in the software page
Step 1: Preparing the Electronics
Before you start disassembly, note that the following steps will most likely void your laptop and monitor's warranty. Do note, this step isn't cumpolsory and you can direectly atach your electronics behind the LCD. However removing the electronics of the laptop and monitor allow you to get a significantly thinner and easier to build mirror.
You also want to make sure all the hardware works before before you disassemble and install it in the mirror. You can also skip to the Software step to test the software and see if the OS runs well on your machine.
Before you start, make sure to discharge your body ESD or use ESD safe tools.
Start by removing all the screws you can find on your laptop. If need be, look for an online repair guide to see how the laptop is dissembled. Once inside, make sure to document any step you take either with a photo or with a written note. Take the motherboard of the laptop out and make sure that the WiFi card, ram, cooling fan, and hard disk are connected to the mother board. You can disconnect the laptop display cable, battery, track pad, and keyboard cables at this point. connect your motherboard to your external display and make sure that the bare motherboard can boot before you proceed. If the mother board can't boot, try to retrace your steps and figure out what part is preventng the motherboard from booting.
Once the laptop motherboard is ready, Decase the monitor too. Remove any bezel and stand till you're left with the bare lcd pannel and the small driver and power boards that are linked to it. Again make sure all the stippied components still work.
Lastly you wan't to solder a cable that plugs into the wall on one side and plugs into both the display and laptop power supply. This is a simple y shaped cable harness where the LCD and Laptop input power is parallel.
Step 2: Building the Frame and the One Way Mirror
I didn't want to build a tradional and simple frame where the frame would go around the mirror. I wanted to give the mirror a floating look so I hid the frame behind the mirror. To mount the frame to the back of the mirror, I drilled 4 holes according to the drawings attached above.
I used a combination of Wood stocks and screws to build a rectangular shape for the monitor to sit in. I used black tape to cover the areas of the glass taht the monitor doesn't cover so that light doesn't leak from behind the monitor.
Make sure the frame you build is strrdy enough to hold the LCD and all your electronics.
Since everyone's frame will differ depending on their hardware, I reccomend you build your frame as per your needs and as you see fit. I have attached pictures of my frame for reference.
Step 3: Mounting Everything
Mount all the electronics to your frame. One way to keep your mirror thin is to keep your laptop power supply in the area where the lcd pannel doesn't cover yet the mirror covers.
Add a way to attach your frame to your wall. I used 2 blocks drilled into my wall and a cable tension system to mount my frame to the wall. You want to make sure that all your hardware is working and that you have a power line running to where you're mounting your mirror.
I also hid an Amazon Echo Dot behind the mirror for voice recognition
Step 4: Configure the Software
The heart of this build is windows 10 that's running 'Rainmeter': a popular desktop skinning app available here.
Once you've mounted your mirror on your wall, go into to your display properties in windows and select the appropriate display scaling for you. While here, you also want to change your wallpaper to black because black parts of the mirror reflect more light. You also want to make sure that our mirror is set for 'never sleeping' in the power options. Lastly, make sure that the taskbar auto hides by right clicking the taskbar, clicking properties and selecting the auto hide feature.
Setup the Amazon Echo Dot as per the setup guide.
Download list. Use any widget you want in addition to the ones linked here:
Step 5: Navigating the Interface
You have a few options for navigation on the interface.
1. Use your voice for triggering Amazon Alexa to answer your query
2. Don't navigate. Use a wireless keyboard or team viewer to set up your smart mirror and leave it as is.
3. Use a touch compatible display (Best but priciest solution)
4. Use a leap motion. I tried this but the leap motion isn't precise enough and it gets tiring to hold you hand in the air for so long. Some good apps for using the leap as a mouse are mudra mouse and gamewave
5. Extend the laptop's track-pad. This is what I did. I extended the ribbon cable by cutting and soldering extra ribbon cable.
Step 6: Future Upgrades
I am using the track-pad of the computer at the moment to navigate the interface as you can see in some of the pictures. I tried other ways such as gesture control or touch but gesture control is too finicky with the leap motion and building a touch screen using IR lights is too complex and will make the mirror look ugly. In the future, I want to use a LCD panel with touch built in so it's minimal extra work for me to implement it.
Secondly, It makes more sense to use something more power efficient like the Intel NUC or Compute Stick rather than an old laptop for a mirror that will be powered 24/7
We have a be nice policy.
Please be positive and constructive.
Great build!! In your pictures, it shows you using a touch interface. How did you implement that in a floating glass format? Everything that I've been able to come up with has either a bulky frame or at least one edge with ugly PWAs sticking out that have to be covered.
Is that the case? I haven't looked deeply into touch monitor options, but I have seen how screens in touchscreen laptops and smartphones that don't have bezels could be a straight drop in upgrade.
Looking online, these desktop monitors seem to have touch without a bezel. Can you see if these would fit your use case?
One more thing I forgot to mention, I am using the leap motion to control the cursor in that image. Apps like GameWave and Mudra Mouse allow you to use your leap motion as a mouse
I wonder if the leap would work from behind the glass?
I haven't implemented a touch interface yet. I'm still using a trackpad at the bottom of the screen. The touch interface would be very simple to implement however. Just use a touch monitor instead of a non-touch panel like I did. I plan on upgrading to a touch panel soon and I'll post an update to this project then!
Darn. I got all excited when I saw the pictures of you prodding at the screen :(
Touch monitors have the same issue that I mentioned; They have a nasty PWA that has to wrap around the edge or they have sensors in a bezel that spoil that whole "floating glass" look. I also haven't been able to find a touch screen or resistive/capacitive overlay that big. You end up with a rectangle of touch sensitivity stuck off in a corner or along the edge to try to hide the wiring. The only viable solution that I've come up with for the true "floating glass" touch screen is to have the image projected like a teleprompter and have a camera behind the screen watching for fingers and gestures. (and it's tough to get my wife to let me knock a wall out for the "cool factor" :(
Sweet project man, beautiful job. Thanks heaps. But like Wimman I too am confused about the touch screen/track pad in step 5.
Most track pads I have seen are tiny, but in your photo's you seem to be touching the screen where the display is? So given the track pad is not transparent!!!
My questions are...
1. How are you touching the text as if it were a touchscreen, but only using a track pad?
2. How does the track pad work through the glass given it requires physical touch to work.
3. How have you made the track pad work where the text is, suggesting it is mounted in front of the LCD, which of course it cant be because they are not transparent..can it?
Cheers man, other than step 5. Great project, great explanation.
Thanks for your kind words and I'm glad that my instructable helped you. To answer your questions,
1. I'm not touching the screen. If you look at the bottom of the mirror in my picture, you can see a trackpad used for the actual navigation. What I'm using is a Leap Motion controller which tracks your hand movements and converts it to cursor movements. This makes it a hand gesture based mouse. More info in the instructable
2. track pads and touchscreens can work through thin layers of glass actually. Think of tempered glass screen protectors on mobile phones that don't hinder the phone's touch function. You just need to get glass that isn't too thick and test a small sample on your touch screen before using it.
3. I think question 1 answers this question :)
Will using a touch screen monitor work without issues through that glass layer?
Since the glass would be touching the capacitive screen's glass, the touch would work. Think of mobile phones that also use tempered glass screen protectors that don't hinder the touch sensitivity. Still I would recommend that you try a small cut out of the glass you plan on using on top of the surface of your monitor to make sure it works.