Floating Smart Magic Mirror From Old Laptop With Alexa Voice Recognition

30,308

503

28

Posted in TechnologyElectronics

Introduction: Floating Smart Magic Mirror From Old Laptop With Alexa Voice Recognition

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.

Materials used:


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

Software used

1. Windows

2. Rainmeter

3. Rain meter widgets as linked in the software page

Voice Activated Challenge

Grand Prize in the
Voice Activated Challenge

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

Share

Recommendations

  • Microcontroller Contest

    Microcontroller Contest
  • Science of Cooking

    Science of Cooking
  • Pocket-Sized Contest

    Pocket-Sized Contest
user

We have a be nice policy.
Please be positive and constructive.

Tips

5 Questions

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?

https://www.newegg.com/Product/Product.aspx?Item=9...

https://www.newegg.com/Product/Product.aspx?Item=N...

https://www.newegg.com/Product/Product.aspx?Item=N...

https://www.newegg.com/Product/Product.aspx?Item=9...

4 more answers

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" :(

0

Hey Mate,
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.

It's a one way mirror. about 80-90% of the light that hits the surface from the mirror side is reflected rather than absorbed. And about 80-90% of light from the other side of the mirror surface passes through the film. This works because the light sources are from different sides of the mirror film. Additionally, the less light that comes from behind the film, the more reflective the mirror side becomes because the light coming from it is mostly reflected light. This is why the background of the display is black in color. Hope that answers your question!

How does a touchscreen work through the glass and mirror film?

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

Would a 2001 vintage laptop that can't run anything past WindowsXP be enough? I have an old Dell Inspiron 8200, and I can't even give it away on CraigsList. I would probably use Ubuntu, as I don't trust windows XP anymore.

0

Rainmeter 3.3 Final Release worked on XP, you could try installing it and seeing if the widgets you want run well, before starting the project.

28 Comments

this is very awesome. I think I will build one this summer, however I want to try for the touch display, I know with some phones if your carefully take them apart, you can separate the touch sensor and the display. The touch display looks like a large piece of glass with wires attached. I wonder, if anyone knows if the same is true for touch screen laptops and if so, would a coat of mirror paint on the back affect it at all. Cause then you could reassemble the screen, so it looks like a mirror unless it is on. Also a AMOLED display would be amazing here, because the black pixels, don't release light...

other than that, this is an amazing project.

kudos

Gandolf

A "one-way" mirror is simply partially silvered material, which reflects/transmits equally in both directions. The optical illusion of "one way" mirrors depends entirely on the room being more brightly lit than the space behind it. It's all about the contrast. Minus a small amount of absorption by the material, the percentage reflected + the percentage transmitted light cannot add up to more than 100%. In truth, if the material is reflecting 90% of the light, then it is transmitting only 10% of the light from the monitor behind the mirror. Eyes are not good judges of brightness, but careful measurement of your mirror with a light meter will confirm that it cannot simultaneously transmit 80% of the light from the monitor while also reflecting 80% of the room light. Luckily there is still enough light from the monitor getting through to make the magic mirror effect work, so it doesn't really matter if it's only 10-20% of its natural brightness. You could just edit out the misinformation in your introduction. :)

1 reply

Thanks for the clarification. I will updated my Instructable to reflect this. :)

Guys, I've figure it out. If you take a look at the the pictures at the top of this post you will notice the lower left and right pictures. At the bottom of his mirror is the TOUCH PAD. That is how Seral navigates his screen. He is probably pointing to a particular icon just for effect, BUT he would be using the touch pad to move around.
I have an old HP TX1000 laptop that has a touch screen and will it and this project to create something similar.
Hope this helps the TOUCH PAD queries.

Yes, you are right! However, I also have a leap motion attached which uses my hand movement to move the cursor making it a gesture based mouse.

You could use Unified Remote and control it from your phone or tablet.

1 reply

That's a great idea. Thanks for the suggestion!

I am not understanding how the touchpad is working from beneath the glass. Could you explain how you have done that?

1 reply

The touchpad isn't beneath the glass. I mounted it to a plate that is below the mirror. I simply popped the touchpad out of the laptop and placed it under the mirror. I extended the original ribbon cables that connected the touchpad to the motherboard. Does that answer your question?

This is a very cool project. Great job! I can picture this for use in many practical applications.
I might try to build a smart bathroom mirror for my 72 year old mother.
I can picture it with daily news, weather, medicine schedule.. and more.

1 reply

Glad you like the project. Medicine schedule sounds like a fantastic addition. Keep me posted on your build!

I find it awesome how you choose to use Rainmeter. I remember playing with it way back in Windows XP.. Nice one, I wanna do it one day! =D

1 reply

Thanks! Rainmeter comes with the advantage of having some really cool widgets and a huge community of users which was a huge advantage over the --understandably--
limited widgets on the magic mirror app.

Way too much trouble for my lazy butt cool!.....

1 reply

Haha, It's not a very long build. I'm sure you could get a prototype up in a weekend!