Magic Mirror – version 1


Introduction

A while back I discovered the exiting world of “magic mirrors”. I don’t remember how or where it caught my attention, but I knew at that time I had to make one! The idea of having key information for planning the day readily available on a mirror, where me and my family looked every morning, seemed fantastic!

And very high-tech… Me like!

This was just before I would have my 10 weeks parental leave for my second son, so I imagined this was a nice side-project to baby feeding and diaper changing.

Software

At first I considered using Windows 10 IoT since I’m mostly a Microsoft dude with knowledge of C#. But I learned the hard way that it didn’t support neither build-in WiFi or the Raspberry Pi camera. Then I discovered Michael Teeuw’s Magic Mirror project on GitHub. I installed it on a Raspberry Pi 3 I had lying around and was up and running in a couple of hours – including setting up Raspian.

Magic Mirror allows third-party developers to create custom modules and it has a growing community of people who builds them.

But in the beginning there wasn’t many third-party modules. So I decided I had to learn the software things around it before I started to build the mirror itself.

Learning by doing is the way I learn and I needed an idea for a module! My bathroom FM-radio will be rendered useless sometime in 2017 when digital DAB replaces analog FM in Norway. I want to be able to listen to music somehow. I accidentally found a Spotify Connect implementation for Raspberry Pi with an HTTP interface. That made it rather easy to make my first real module for Magic Mirror: Spotify Connect UI (GitHub).

My general rule for what should be shown on the mirror is very simple: I don’t want to display “everything” on the mirror, just the important stuff that helps plan the day! If I want to see soccer scores or cartoons I can do that on my laptop or mobile. OK, my Spotify-module didn’t exactly fit this rule, but since I made it (cough) …

Fundamentally I think an input interface has to work every time and for everyone. I did some testing of different user interaction techniques:

  • Camera for facial recognition was too unreliable to be usable. I had hoped to show some modules, like my personal calendar, only to me
  • Camera for motion detection. The idea was to turn on the TV-service on the Raspberry only when someone was in front of it. Unfortunately my monitor turns blue with a message when the display is off and used too long time to turn on again. I saw that someone suggested to put a relay on the power to the LCD lights only, but I didn’t want to risk destroying my monitor
  • PIR-sensor for turning on/off the monitor. Don’t work through glass, but I would have had the same problem as camera with blue screen anyway
  • Voice control is too unstable too, especially since my native language is Norwegian. Maybe it works good with English, but that is not the language I want to force my family to use.
  • Gestures was something I really wanted to implement to be able to hide/show things I didn’t want “everyone” to see, like my calendar or technical information like system temperature. Unfortunately I had no luck getting this sensor to work. I later found that the “gesture” sensor that DealXtreme sold me wasn’t a gesture sensor at all. I have now ordered the correct model with gesture control for next version of the mirror…

Hardware

Screen

One of the first things I had to decide was how big this thing was going to be. The existing mirror on the bathroom was 80 cm wide including frame. Using a screen size calculator I worked out that this was comparable to a 36″ screen, excluding the frame. Removing space for the mirror frame, and then the frame of the monitor itself, I ended up deciding upon a 32″ screen. Probably would 34″ be better, but there aren’t many of those.

I wanted the mirror to be as narrow as possible so I had to find a monitor that 1) wasn’t too deep and 2) had at least one HDMI on the side. Very few product photos are photographed from the side or behind, so it wasn’t always easy to find a monitor that matched.

I bought a used 32″ Grundig LCD for NOK 1.000,- at Finn.no.

The next step was to strip it for the outer plastic and redundant parts on the inside. A bonus was that the speakers could easily be dismantled and moved around in the frame.

Frame

Reading a few magic blog posts of other people’s experience with building a magic mirror I realized that one of the biggest challenges was how to fasten the mirror itself to the frame and the frame to the wall.

I spent quite some time in 3D Builder to figure how I should build the frame and hang it on the wall. It was very useful to “simulate” different sizes to find the correct measurements.

3d

Parts from left to right: 1) french cleat, 2) dummy box for everything inside (monitor, power, Raspberry etc),  3) frame and 4) mirror

I figured out that a slot on the inside of the frame would probably be best for securing the mirror in place. I also invested NOK 1.800,- in a handheld router I hopefully will get to use later.

For hanging the frame on the wall I found after a lot of searching a method that seemed to be perfect: a French Cleat. It let’s you securely hang the mirror close to the wall. You basically cut a board 45 degrees the length way. But you need good tools – which I didn’t have. I ended up using a hand saw and the result was not perfect. Good enough, but I wish I had a professional saw for a cleaner result!

Having already calculated the screen size I went down to the local hardware store and bought a long 15 x 100 mm wood board and cut it for the frame.

Mirror

When the frame was finished I knew how big mirror I needed. I saw many recommendations to use real glass. Using foil on top of normal glass is very prone to scratches when cleaning or general handling during the build process, so a real mirror made the most sense to me.

The first shop I went to wanted NOK 2400. Luckily I checked a couple of others. Glassmester1 at Alnabru (Oslo) wanted NOK 900 when I visited them, but changed the price on email to NOK 1300 after “checking more”. It was still cheaper than the others…

The build process

Here I’m testing the placement of the different components inside the frame (that is held together using Gaffa tape).

20160802_131652
Testing placement of the different components.

Ventilation/power cord holes were drilled. I made sure I could stick the power cord through one of them. I also checked that the holes weren’t so big that they might weakening the frame.

20160921_092848
Frame ready to assemble

The Outer frame was painted white using a special paint for kitchen/bathroom furniture. I had to spend NOK 386 for 3 liters of paint, when I only needed 2-3 deciliters. I possible could have used normal, white paint to save some money.

20160923_085434
Frame painted
20160923_085601
Closeup of slot for mirror, ventilation hole and french cleat

Since the monitors weight would hang on the left and right boards, the weak spot would be the upper corners. I therefore attached two carpenter’s squares to make the structure stronger.

20160923_090953
Reinforced the uppers corners where all weight of the monitor will be

Now I was ready to put the mirror inside the frame.

20160923_091422
The mirror is in place.

I was very happy with my decision to use slots in the board!

20160923_091444
Mirror fits perfectly!

I then screwed the bottom board in place, but didn’t use glue because I wanted the option to slide out the mirror on a later stage.

To make sure light from the components wasn’t visible through the mirror, I had to find something black to cover everything but the LCD screen itself. Since the size is quite big, it was difficult to find black cardboard in correct size. I found a black rubber carpet at Biltema that is normally used to make custom carpets for cars. At NOK 299 it isn’t cheap…

20160923_093636
Black rubber mat with a hole cut for the monitor.

When I tested to assemble the Magic Mirror I noticed that the monitor would make it impossible to get the power cord through the holes. So I therefore did this before putting the monitor in place.

20160923_094434
Power cord

Next I screwed the speakers in place on top of each ventilation holes.

20160923_094505
Speakers

To make sure the mat was held in place I screwed a ledge I had available to the upper board.

20160923_095602
Ledge keeping the rubber mat in place.

Now it was time to fasten the monitor. I made two custom boards that would keep the monitor in place. I used just two screws on each since I believe that would be enough and it makes it easier to take the monitor out later.

20160923_101035
Board holding the monitor in place angle 1
20160923_101047
Board holding the mirror in place angle 2

20160923_101103

I then had to solder the wires to the speaker because they fell off.

20160923_102716
No IoT project is complete without a bit of soldering!

I didn’t want the bright light of the IR receiver (for remote controlling the Magic Mirror) to be visible through the mirror, so I made sure the IR light is available through one of the lower ventilation holes. Not the best solution, but I don’t use the remote to other things than to tune brightness once.

20160923_103115
IR light seen through one of the lower ventilation holes.
20160923_103121
The IR light seen from behind.

The Raspberry Pi and a temperature sensor is fastened using Gaffa tape.  I will replace it with a 3D printed side mount later.

20160923_104054
Low tech mounting of Raspberry Pi and temperature sensor

Finally, everything is ready for mounting on the wall!

20160923_104106
Everything in place!

I put the mirror on the bathroom wall where it should be, without fastening it. At this time I got my first really big disappointment. The mirror was noticeably darker compared to the old one! I had suspected it earlier when I tried the mirror with the black mat behind it, but hoped it was because of different lighting conditions.

Damn, my wife would never accept this!

This was a real setback since the whole point of this project was to make it possible to quickly see what would happen that day during the morning cleanup.

Plan B was to put it in the outer corridor. It was not ideal because we normally not spend more than the time it takes to put on shoes and a jacket. But out of other choices I went with that.

I removed the old mirror and screwed on the second part of the French cleat. Notice I don’t put the screw’s on a straight line since I guess that would weaken the board if it starts to crack.

20160923_121106
Ready to mount!

Finally I used a power outlet for the lamp in the roof and guided the wire as nice as I could to it.

I made three mistakes at this stage that I later have to fix:

  1. The outlet for the lamp will of course turn off the mirror as well. Duh!
  2. Since I need to lift the frame up to release it from the French cleat I will have to remove the cable organizer since it’s too close to the frame.
  3. Ideally I should have put the frame 30-40 cm up to align better with the eyes when standing.

Anyway this is how it looks now:

20160925_123424
Magic Mirror ready for use!

Misc

  • I’m using the monitors own feature to turn off the monitor at midnight and on at 05:00 in the morning.
  • I’m using snippets on Juice SSH-client on my mobile to quickly run script for making backup and updating the RPi itself and MM and it’s modules

Future improvements

In addition to the obvious fixes mentioned before I want to do the following:

  • Add a module for public transport information (only visible in the morning when we need it) DONE: https://github.com/CatoAntonsen/MMM-Ruter
  • Add a gesture sensor to be able to turn on some modules
  • Get facial recognition to work better

Have you built a Magic Mirror or something similar? Share your experiences in the comments section below!