After my many [hard-learnt-lessons](/projects/mikes-mirror-overview/) building a Smart Mirror the past few months, I decided it might be a good idea to share some of those lessons with others in the community.



# The Talk

At the start of the year I gave [a different talk](talks/a-game-developer-learns-machine-leaning-then-talks-about-it/) at the local Machine Learning Meetup group about my very basic explorations of Machine Learning in game development and it went well and the audience was receptive to non ML-heavy talks so I thought it would be a good place to talk about my mirror project although it wasnt strictly Machine Learning focused, it did involve using some off-the-shelf face recognition and audio recognition ML tools.

I produced a slide deck from my previous condensed blogposts on the topic:

1. [Mikes Mirror - Overview](projects/mikes-mirror-overview/)

2. [Mikes Mirror - Hardware](projects/mikes-mirror-hardware/)

3. [Mikes Mirror - Software](/projects/mikes-mirror-software/)

If you are interested the [slides are available](https://docs.google.com/presentation/d/1nD3MhRzxJPYn63N_mdyxkSFqVFoFneQpcYXBlVICJEE/edit?usp=sharing) and the published show is here:

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ1P3FygWOUhfUXsfnzCyJQoeyjZbVx-Oynq4vPBSVRZgsXp6OPJm2OPNH6o-vK87fkXZrPPEOwKETy/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

The talk went really well. Everyone had a bit of a laugh and I think learnt a little bit about what it takes to build a small IoT device, so im really glad I did it.

Building the frame and assembling [the hardware](/projects/mikes-mirror-hardware/) for my Smart Mirror was a tough but fun journey. But now its time for what im good at, the software.



# Parts

This is a 3 part series, find the other parts here:

1. [Mikes Mirror - Overview](/projects/mikes-mirror-overview/)
2. [Mikes Mirror - Hardware](/projects/mikes-mirror-hardware/)
3. Mikes Mirror - Software

# Research

I started off by doing a bunch of reading and research on what software to use on my mirror.

I discovered a popular project called [MagicMirror<sup>2</sup>](https://magicmirror.builders/) which is an electron based smart mirror project. Magic Mirror comes with a huge number of [Third Party Modules](https://github.com/MichMich/MagicMirror/wiki/3rd-Party-Modules) that you can use to add all sorts of functionality to your mirror in a modular way.

I initially experimented with MagicMirror<sup>2</sup> but quickly found myself getting frustrated at the way the code was structured. I felt that developing my own modules as going to be a pain so I decided I could probably save some time in the long run by rolling my own solution.

# Mikes Mirror

![Mikes Mirror on GH](./githubss.png)

My from-scratch solution uses React, Typescript and Electron for the front end with Python and Dlib for the Facial Recognition part and Sonus (snowboy, Google Cloud) for the speech recognition part and a number of other libraries.

# Profiles

One of the key requirements for me (that MagicMirror was missing) was that the mirror should support multiple different people using the mirror. I wanted this ability so that when someone stands in front of it they get a mirror that is tailored to them.

I call this user-specific content a "Profile" and is simply another react component that contains a collection of "Plugins" that are laid out however you want. So for example here is my Profile:

```typescript
import * as React from "react"
import Particles from "../plugins/particles/Particles"
import Clock from "../plugins/clock/Clock"
import WeatherChart from "../plugins/weather-chart/WeatherChart"
import ProfilePicture from "../plugins/profile-picture/ProfilePicture"
import SystemInfo from "../plugins/system-info/SystemInfo"
import css from "./styles"

export default class MikesProfile extends React.Component<any, any> {
  componentDidMount() {
    // Play a sound when showing the profile
    new Howl({ src: ["./bell.wav"] }).play()
  }

  render() {
    return (
      <div className={css.profile}>
        <Particles />

        <div className={css.rootContainer}>
          <div className={css.hozContainer}>
            <Clock />
            <div className={css.flex} />
            <ProfilePicture url="../facial_recognition/faces/mike.jpg" />
          </div>

          <div className={css.flex} />

          <div className={css.hozContainer}>
            <WeatherChart />
            <div className={css.flex} />
            <div className={css.vertContainer}>
              <div className={css.flex} />
              <SystemInfo />
            </div>
          </div>
        </div>
      </div>
    )
  }
}
```

# Plugins

Most of the logic is contained within composable "Plugins".

![Plugins](./pluginsss.png)

For now I have only written a few plugins. I have included them in the main repo but they could quite easily be extracted out into separate repos much like MagicMirror<sup>2</sup> does it.

Unlike MagicMirror<sup>2</sup> my widgets are much much simpler to develop as they are just React components. IMO this is a perfect use-case for the component based, only-update-when-needed nature of React.

[Checkout some of the widgets in the repo](https://github.com/mikecann/mikes-mirror/tree/master/src/widgets) for examples of how simple and intuitive they are to develop.

[![](./general-ss.jpg)](./general-ss.jpg)

A couple of examples of plugins are:

- clock - displays a clock and date
- display-deactivator - when the widget is mounted it waits for a set amount of time before turning off the display, when it is unmounted it turns the display back on again. This is great for saving power when no one is stood infront of the mirror.
- face-profile-switcher - will change profile when it detects that person infront of it
- system-info - reports some system stats like CPU and MEM load
- weather-chart - shows a chart of the Perth weather

# MobX

I use MobX to manage the state on some of the more complex and core functionality such as the facial profile switching and the voice commands. Having a centralized state also means it can more easily be shared between components and reduce coupling.

# Facial Recognition

I had spent quite a bit of time trying to get Facial Recognition working how I wanted. In the end I ended up using the awesome [facial_recognition](https://github.com/ageitgey/face_recognition) library on github.

The facial_recognition library in turn relies upon Dlib which means that its a bit of a pain to install (LOTS of dependencies) but I did eventually get it working with reasonable performance on my target hardware.

For now im using a modified version of [facerec_from_webcam_faster.py](https://github.com/ageitgey/face_recognition/blob/master/examples/facerec_from_webcam_faster.py) example that comes with the library. I modified it to read from a directory of faces rather than hardcoding them. I also modified it to report results as JSON to stdout which then is read by the main process in the Electron app.

[![](./webcam-active.png)](./webcam-active.png)

Currently the facial recognition only trains on a single example of peoples faces. This means that its not as accurate as it could be particularly under different lighting conditions.

The library does contain another example [face_recognition_knn.py](https://github.com/ageitgey/face_recognition/blob/master/examples/face_recognition_knn.py) which is a little more complex but supports training a face with multiple examples using the k-nearest-neighbors algorithm. I hope to integrate that with the webcam sometime in the future.

# Speech Recognition

Speech recognition was actually harder that I had imagined it would be. I bounced around quite a few different libraries trying to get them to work on my hardware.

In the end I settled on a javascript project called [Sonus](https://github.com/evancohen/sonus). Its a pretty simple project that combines the hotword detecting power of [Snowboy](https://github.com/Kitt-AI/snowboy) with the more complex sentence comprehension power of [Google's Speech-to-Text API](https://cloud.google.com/speech-to-text/).

Like the Facial Recognition, Sonus runs in a separate process that is spawned by the Electron app and then communicates via a JSON protocol over sdtout.

Snowboy continually listens in a background for a given hotword (mine is "smart mirror"). If it detects the hotword then Sonus starts streaming the recording to the Google Speech-toText API which analyses it and returns partial a partial match as you speak and then the final match once you have finished speaking.

[![](./voice-commands.png)](./voice-commands.png)

This combined local-only Snowboy plus cloud based recognition power of Google means that I am able to keep costs and processing requirements down for the mirror.

There are definitely some issues with Snowboy however which I hope to solve in the future.

1. It only works on Linux. This means that should I ever want the mirror to be powered by windows in the future then I cant. It also means I have to develop on my ubuntu laptop rather than my desktop. This isnt a total show stopper however as I really like linux and am hoping to move my desktop machine over to the OS soon.

2. Snowboy comes with a bunch of different pre-trained hotwords and you can even supposedly train your own using [their API](https://snowboy.kitt.ai/). My experience trying to train my own model using my own samples however didnt work. Even the popular pre-trained models dont seem to work particularly well with female voices. Kelsie for example doesnt seem to reliably trigger the hotword for example.

# Voice Commands

Just being able to turn speech into text is pretty useless unless you can then do something with it. So I built a system thats capable of recognising the text and matching it to a command to be triggered.

At first I was using a simple regex matching strategy but quickly found that was limited. A simple example is the regex `lock profile` would be triggered by a user saying "lock profile" and "unlock profile". Now obviously there are ways of working around this but there were a number of other more complex edge-cases too, so I decided to go looking for a better solution.

Natural language detection is a well studied area and there were a bunch of different options on NPM. After playing with a few I settled on [natural-language-commander](https://github.com/will-wow/natural-language-commander). It doesnt have many starts but definitely deserves more (I do love libraries written in Typescript).

So now I can structure my commands like this for example:

```typescript
nlc.registerIntent({
  intent: "lock profile",
  utterances: ["lock profile", "lock my profile"],
  callback: () => profiles.lockProfile(),
})

nlc.registerIntent({
  intent: "lock profile to..",
  slots: [{ name: "Profile", type: "STRING" }],
  utterances: ["lock profile to {Profile}", "fix profile {Profile}"],
  callback: (profile: string) => {
    profiles.unlockProfile()
    profiles.changeProfile(profile)
    profiles.lockProfile()
  },
})

nlc.registerIntent({
  intent: "unlock profile",
  utterances: ["unlock profile", "unlock my profile"],
  callback: () => profiles.unlockProfile(),
})
```

Much better! For a full list of commands in the mirror you can see this file: [commands.ts](https://github.com/mikecann/mikes-mirror/blob/master/src/commands.ts)

I will definitely be adding more as I go.

# Text to Speech

One key feature of any "smart assistant" type project is the ability for the assistant to speak back to you.

For now I opted for a simple solution provided by the [GNUstep speech engine](http://manpages.ubuntu.com/manpages/trusty/man1/say.1.html). Once installed on the OS all I need to do from the app is spawn a command-line instance with the args `say "hello world"`.

The voice quality is pretty basic is you are used to more advanced assistants from the likes of Google or Apple but will do for now.

I did consider just plugging into Google's Text-to-Speech API but decided that I didnt really want the roundtrip time associated with sending the text to the cloud then downloading the resulting WAV file and playing it even though the quality of the returned speech would be far superior to GNUstep.

Perhaps in the future ill research a custom DNN-based text-to-speech solution.

# Future Plugins

Theres so much more I want to add to the mirror but I felt that in its current state its "good enough" for demonstration at least. I suspect that this will be a project that I will keep coming back to and tweaking as I go over a number of months and years.

Some random things I would love to add:

- Live Fitbit stats from my watch
- Voice controls for our Chromecast for our TV
- Speech for when people join and leave the wifi network
- Breaking news reports when something major happens in the world
- .. anything else I can dream up!

[![](./cute-cat-ss.jpg)](./cute-cat-ss.jpg)

# Conclusion

Well I hoped you enjoyed reading about my Smart Mirror project. It took me quite a bit longer than I had hoped to get it to a presentable state. There are just so many options and things to play with. Every time I thought it was "good enough" I would go off on another tangent learning something else which would take me weeks.

Despite the time and cost overrun however I found it a fun and worthwhile project and if this is your sort of thing I definitely recommend giving it a go. I just hope this series of posts helps so you can learn from my mistakes. Please do let me know via email or in the comments below if you give it a go.

Thanks again for sticking with me through these lengthy posts. Let me know in the comments if you enjoyed this, perhaps ill do an update to the project sometime in the future.

# More Reading

This is a 3 part series, find the other parts here:

1. [Mikes Mirror - Overview](/projects/mikes-mirror-overview/)
2. [Mikes Mirror - Hardware](/projects/mikes-mirror-hardware/)
3. [Mikes Mirror - Software](/projects/mikes-mirror-software/)

So I decided to build a Smart Mirror as a hobby project. I knew that I could handle the software side of thing but building a frame and wiring the electronics up was going to be a whole new adventure.



# Parts

This is a 3 part series, find the other parts here:

1. [Mikes Mirror - Overview](/projects/mikes-mirror-overview/)
2. Mikes Mirror - Hardware
3. [Mikes Mirror - Software](/projects/mikes-mirror-software/)

# Research

So first thing I did when trying to work out how to build this thing was to look at other people's efforts. I watched hours of Youtube videos and read just about every post on the [Magic Mirror forum](https://forum.magicmirror.builders/category/12/show-your-mirror).

I recorded some of the best ones I liked in a [Trello Board](https://trello.com/b/dYbx0Zc0/smart-mirror):

[![](./trello-board.png)](./trello-board.png)

# Requirements

After doing the research I realised there were way too many different options so in an attempt to narrow my possibilities I would enumerating my requirements:

1. It must be able to fit in the little alcove near my front door:

[![](./alcove.jpg)](./alcove.jpg)

2. Ideally it will blend in with the other wooden furniture in the apartment.
3. Its a rental apartment so we cant put holes in the wall, so it must be light enough to be able to be supported by stick-on hooks.
4. The processor must have enough power to run Facial Recognition, Speech Recognition and a display at a decent framerate all at the same time.
5. It shouldnt cost too much

# The Computer

To perform the various functions of the mirror I needed a computer of some sort. It needed to be small and light enough that I could attach it behind the mirror.

One of the most obvious and well known options for this is the Raspberry Pi. Through my research I had discovered that there were a great many other types of devices with significantly higher specs than the Pi. This great article lists 20 of them for example: https://www.techrepublic.com/pictures/want-a-more-powerful-raspberry-pi-choose-from-these-20-alternatives/

In the end I decided to buy not one but two computers.

[![](./both-computers.jpg)](./both-computers.jpg)

Firstly the Pine Rock64:

[![](./rock64.jpg)](./rock69.jpg)

This is a cheap ARM powered board the size of a credit card that according to reviews is significantly more powerful and more memory for the price than the Raspberry Pi 3.

I also decided to buy an Up Core:

[![](./up-core.png)](./up-core.png)

The Up Core is about 4 times as expensive at the Rock64 but is even more powerful and significantly, it runs on an Intel x86 CPU instead of an ARM CPU. This is important because I knew from past experience that there may be issues trying to get things to work on ARM powered devices.

Projects on Github tend to be written with x86 in mind and drivers tend to expect common operating systems, so with the Up Core being x86 means that I can run Ubuntu or even Windows if I want.

When they arrived I tinkered with both but ended up using the Up Core in the mirror due to the extra performance and the compatibility of the operating system with all the software.

# Camera

I looked at quite a few different cameras on Aliexpress.com. I had a lot of unknowns.

- I wasn't sure if there were going to be drivers for them
- I wasn't sure if the quality was good enough for facial recognition
- I wasn't sure what lens-angle I needed
- I wasn't sure how I was going to build it into the frame.

In the end, due to my uncertainties and the fact that they were all relatively cheap, I decided to pick up three different cameras:

[![](./cam1.jpg)](./cam1.jpg)
([Zbravo 720p endoscope](https://www.aliexpress.com/item/HD-720P-6LEDs-5-5MM-USB-Endoscope-Borescope-Snake-Inspection-Pipe-Tube-Video-Mini-Camera-IP67/32747992958.html?spm=a2g0s.9042311.0.0.1ee84c4dtkgQAk))

[![](./cam2.jpg)](./cam2.jpg)
([Diske 720p pinhole camera](https://www.aliexpress.com/item/HD-Micro-USB-Camera-1-0MP-USB-CCTV-Camera-720P-USB-Module-With-Cables-USB-Board/32825411576.html?spm=a2g0s.9042311.0.0.1ee84c4dtkgQAk))

[![](./cam3.jpg)](./cam3.jpg)
([Kayeton 1080p camera](https://www.aliexpress.com/item/2MP-Full-HD-1080P-Webcam-OV3660-UVC-Plug-Play-Android-Linux-Windows-Mac-USB-Camera-Module/32815156322.html?spm=a2g0s.9042311.0.0.1ee84c4dtkgQAk))

I ended up using the third camera in the end mainly due to the superior picture quality over the others.

One thing to note for next time is that all 3 of the cameras had no trouble running on both Linux and Windows. I didnt have to go searching around for drivers, they just worked :)

# Microphone

As with the camera I wasnt sure about microphones. I ended up picking up this cheap one from ebay:

[![](./mic1.jpg)](./mic1.jpg)
([usb mic](hhttps://www.ebay.com.au/itm/Mini-Wired-USB-3-5-Capacitance-Studio-Microphone-SF-555B-Black-for-Computer-TO/262945101741?ssPageName=STRK%3AMEBIDX%3AIT&_trksid=p2060353.m2749.l2649))

It does the job but I think ill have to invest in something a little more sensitive (and expensive) soon so I can use the voice controls from a further distance.

# The Display

I decided early on that I wanted the display to reach all the way to the edge of the mirror. During my research I noticed that some people mounted a smaller display behind a large mirror thus giving the illusion of a large screen:

[![](./submount.jpg)](./submount.jpg)
(img showing monitor mounted in only a small part of the frame)

I was concerned that this might be noticeable under some lighting conditions. I also wanted to be able to show things in each corner of the mirror. So for me I needed to have a single large display that covered the entire mirror.

At first I considered using a touch sensitive display of some-sort. After some more thought I realized that it would probably be dangerous having people poking the screen on the wall when its only attached by sick-on hooks. Instead of touch I would use voice and camera as input.

I had a choice to make around whether I wanted to use a PC computer monitor or a TV. LED TVs usually start at about 32" and go all the way up to a bajillion inches. I had about 40" of space to work with in the little alcove but as I was weight constrained and TVs tend to be heavy I was starting to think that probably a PC monitor would be best.

Another factor that made me decide on a PC monitor instead of a TV was the resolution. I was concerned that because you would stand relatively close to the mirror you might notice a lower resolution (720-1080p) TV.

[![](./tvpixel.jpg)](./tvpixel.jpg)

So for those reasons I finally decided on a PC monitor. After some searching on Gumtree for 32" inch (about as big as they affordable get) displays I decided that it didnt cost that much more to buy one new. That way I could get exactly what I wanted whereas I was constantly compromising on Gumtree.

So the one I picked up in the end was an Acer 31.5" Monitor ER320HQ from Office Works:

[![](./thedisplay.jpg)](./thedisplay.jpg)

Its got everything I need, a bright 100,000,000:1 contrast display with Full HD (1920 x 1080) resolution and critically only weighed 4kg once I had taken it apart.

[![](./thedisplaytakenapart.jpg)](./thedisplaytakenapart.jpg)

# The Glass

Another of the key components of a Smart Mirror is the two-way glass.

It functions in much the same way a pair of mirrored sunglasses work. Its reflects all light from one direction but allows light from the other direction to pass through.

This means that when a pixel in the display is white then it will shine through and be visible, otherwise you eye will just assume there is nothing there and see the reflection instead.

[![](./two-way-diagram.jpg)](./two-way-diagram.jpg)
(source [twowaymirrors.com](http://twowaymirrors.com/))

Just like the display I had a lot of different potential options for the glass.

1. A pre-cut two way mirrored glass
2. A two-way laminate plastic which you can stick onto a regular piece of cit glass.
3. An acrylic two-way layer.

I decided against number 3) because I had seen examples of it where it had warped a little bit which detracted from the effect somewhat. I thought about 2) but in the end I decided it would probably be safer just to get it pre-made and thus save me the potential of making a mistake applying the laminate.

So option 1) it was. I ended up phoning around a whole bunch of glass suppliers and recording their prices and availability on Trello:

[![](./trello-glass-card.png)](./trello-glass-card.png)

In the end I chose the cheapest supplier... I should have known that something was up when they quoted me half the price of all the others...

About a week later I got a call saying that the glass was ready for me to come pick up, so I excitedly hopped in the car and drove the 30 minutes to pick it up. It was wrapped up so I didnt get to check it out until I got home:

[![](./first-glass.jpg)](./first-glass.jpg)

At first I was impressed, then I turned it over and realised that it was mirrored on BOTH SIDES. Doh! I gave them a call and explained to them that when I asked for a "two way mirrored glass" I didnt mean it was mirrored on both sides... They tried to argue with me for a while, I even quoted the definition of "two way mirror" to them:

> A one-way mirror, also called two-way mirror[1] (or two-way glass) and semi-transparent mirror, is a reciprocal mirror that is partially reflective and partially transparent. The perception of one-way transmission is achieved when one side of the mirror is brightly lit and the other side is dark. This allows viewing from the darkened side but not vice versa.
> (source [wikipedia](https://en.wikipedia.org/wiki/One-way_mirror))

In the end they relented and decided to give me a refund. Sigh.

So now I was onto the next cheapest supplier. I placed an order and a week later I went to collect it. I got it home and unpacked it to discover it looked great:

[![](./second-glass.jpg)](./second-glass.jpg)

Except for that engraved logo at the bottom of the mirror.. FFS! I cant have that on a mirror that is supposed to have a display shining through!

I called them up and they explained that it was common practice for them to engrave on all their "safety glass". Well as I wasnt aware of that fact and it wasnt mentioned to me on their website so they agreed to cut me another piece and _not_ engrave it this time.

So another week goes by and I finally pick up a piece of glass that is actually "two-way" and doesnt have an engraved logo on it, huzzah!

# Building the Frame

Now I had the display and the glass I can finally start the part that was concerning me, the wooden frame.

I was concerned because I had very little experience with woodworking and had virtually no tools. So after watching a few more videos of people making wooden mirror frames I thought I had a basic idea of how I was going to put it together.

[![](./frame-in-two-parts.jpg)](./frame-in-two-parts.jpg)
(yes I diagrammed it out in Unity)

It was basically going to be constructed in two parts which were then to be glued together. According to the videos I had watched, wood glue was apparently really strong and up to the task of keeping it all together.

So off to Bunnings I went and picked up bunch of tools and wood and got to work on the frame.

First I cut 4 bits of wood for the box part of the frame:

[![](./cutting-wood-to-size.jpg)](./cutting-wood-to-size.jpg)

I joined them together with some nails and glue.

Then I cut some more pieces for the front part of the frame and started to glue them to the box:

[![](./gluing-wood.jpg)](./gluing-wood.jpg)

Things were going well, at this point I was feeling like a bit of a Swanson.

[![](./swanson.jpg)](./swanson.jpg)

.. I knew things were going too well... I just noticed this:

[![](./big-overlap-problem.jpg)](./big-overlap-problem.jpg)

That's quite an overlap. Unfortunately I didnt have any more spare wood so I decided that it was something that I could fix with sandpaper... lots of sandpaper:

[![](./rounded-corner-no-overlap.jpg)](./rounded-corner-no-overlap.jpg)

Hey presto! Its fixed :) Its a little thinner on one side but you cant really notice it unless you are looking for it.

One other problem was my poor job at sawing the 45 degree angles for the front of the frame. This was definitely a problem as that was a part you were going to be looking at all the time so that gap really detracted from the quality of the frame.

It was at that point that Kelsie's dad introduced me to the wonders of wood putty:

[![](./wood-putty-crack.jpg)](./wood-putty-crack.jpg)

Huzzah! Problem sovled, just a little more sandpaper and you couldnt tell my rookie mistake was made.

Next up I needed to cut out holes for the speakers for the frame.

[![](./drill-speakers.jpg)](./drill-speakers.jpg)

To be honest, the speakers are on of the main reasons for the mirrors thickness. I think if I was to do it again I might rethink where I place the speakers so that I can try to make the mirror a little thinner.

[![](./speakers-inserted2.jpg)](./speakers-inserted2.jpg)

So now the frame is done its on to staining it roughly the same colour as the rest of the furniture in the apartment.

[![](./about-to-stain.jpg)](./about-to-stain.jpg)

[![](./fully-stained.jpg)](./fully-stained.jpg)

Hey its starting to look quite good, now I just have to worry about assembling it all and attaching it to the wall.

# Assembly

Now I had all the parts I started to assemble them together.

First I laid down the glass mirror side down, then placed the display ontop of it:

[![](./glass-and-display-in-frame.jpg)](./glass-and-display-in-frame.jpg)

I then attached the speakers and the display control board using double sided padded tape. Then wired it all up.

[![](./display-controller-attached.jpg)](./display-controller-attached.jpg)

If you look closely in the above picture you can see that I use angled brackets to hold the display in place and stop it from moving around when I put it on the wall. These are screwed into the wood in a way which meant it would be tricky to remove.

I also screwed in two hooks which I then fastened a piece of yellow string between, this part was surprisingly tough to do. Because I used nylon string it kept stretching and going slack. I wish I knew more about knots, perhaps some sort of self-tightening knot would have done it?

I then grabbed a HDMI cable and attached the Up Core to it and powered it on..

[![](./upside-down-display.jpg)](./upside-down-display.jpg)

It works! But its upsidown.. Whoops! Now that I had screwed everything in, it wasnt really going to be feasible to unscrew it and turn it around. I didnt want to risk splitting the wood.

Fortunately I was able to change it in software so all is not lost, onwards!

# Attaching to the Wall

Now this was the bit that had me the most worried in the entire project.

Because its a rental we werent allowed to put nails or screws in the wall so I had to do the whole thing with adhesive wall hooks.

I whipped out the scales. The whole thing weighed 10.5 kgs which meant I would need 4 of the strongest adhesive hooks I could find at Bunnings:

[![](./wall-hooks.jpg)](./wall-hooks.jpg)

After a bit of help from Kelsie we finally managed to get it up on the wall and it held!

[![](./it-on-the-wall.jpg)](./it-on-the-wall.jpg)

We decided it was probably a good idea to leave it there over night to make sure that it was going to hold before doing anything else.

[![](./not-confident.jpg)](./not-confident.jpg)

Needless to say we werent sure it was going to work.

# Final Touches

Phew! It survived the night and that means we are on the home stretch, just a couple more things.

I attached the Up Core board to the back using some more padded double sided tape to prevent shorts.

[![](./assembly.jpg)](./assembly.jpg)

I then put it back on the wall and noticed that the wires looked kind of messy:

[![](./messy-wires.jpg)](./messy-wires.jpg)

So I picked up some cable tidies from ebay

[![](./organised-cables.jpg)](./organised-cables.jpg)

Then I added the camera and microphone to the top of it (I wish I had come up with a better place for these):

[![](./microphone-camera.jpg)](./microphone-camera.jpg)

Ahh much better, looking good! Now I just have to make the software work. As a professional software developer that should be easy.. right?

# Conclusions

Phew! That was a long process, thanks for sticking with me. It turns out, woodworking is actually much harder than I had expected. Apparently being good at making software doesnt automatically translate to being good at hardware, who would have thought it!

I made plenty of mistakes but im actually really happy with the result. I dont expect it to last a million years like a Ron Swanson crafted masterpiece but it does the job and doesnt look too out of place with the rest of the furniture :)

# Moar!

This is a 3 part series, find the other parts here:

1. [Mikes Mirror - Overview](/projects/mikes-mirror-overview/)
2. Mikes Mirror - Hardware
3. [Mikes Mirror - Software](/projects/mikes-mirror-software/)

I have been wanting to do this for a while and as I recently found myself with a little spare time I decided to finally do it... build a Smart Mirror.



# TL;DR

Checkout the [video](#video).

# What Is a Smart Mirror?

Put simply it is just a computer display behind a two-way mirror so you can both see your reflection and the monitor behind.

![Mirror explode](./mirrorexplode.jpg)
_(img src https://magicmirror.builders/)_

The key concept is that much like a pair of sunglasses or a police interrogation room, you can only see whats behind the mirrored surface if there is light shining through. This means that when the screen is dark you will get a reflection but when the monitor is displaying something you will see that through the mirror instead.

Connected to the display is a small lower-power computer such as a Raspberry Pi, this lets you show whatever you want on the mirror.

# Why?

Good Question. The short answer is: why not? The long answer is: I think its just a cool fun project plus there are a number of things this could be useful for. Its basically your own personal dashboard so on mine I have it showing the weather, time, and hopefully in the future my Fitbit stats from my watch.

![Mirror explode](./healthmock.jpg)
_(img src http://daniel-erhart.com/smartmirror.html)_

When you pair the mirror with some Facial Recognition or Audio Commands then it could become the smart-hub for your home except unlike pure audio devices such as Alexa or Google Home you can have a visual representation too.

# Building

The building of the mirror was quite an involved process so im going to dedicate posts to both the [software](/projects/mikes-mirror-software/) and [hardware](/projects/mikes-mirror-hardware/) side of things.

# Cost

So how much did the whole thing cost to build?

- Monitor - Office Works - \$257
- UpCore - \$181
- Two Way Glass - \$150
- Random Cables - \$25
- Woodworking Tools - \$112
- Wood - \$25

**Total: 750 AUD**

Which is quite a bit more that is strictly necessary and would probably be quite a bit cheaper if I was to do it again.

For example, the I ended up buying the display brand new from Office Works instead of picking one up cheaper on Gumtree. I had very specific requirements for the screen (read more in the [hardware](/projects/mikes-mirror-hardware/) post) and although I could have found a cheaper one second hand there would have been compromises.

The Up Core x86 processor was definitely more expensive than some alternatives. I did buy a cheaper processor ARM processor too but I was concerned about compatibility and performance so I decided to grab the more expensive UpCore x86 CPU as a backup. Im glad I did as its a great little machine and really powerful.

As I had no woodworking tools either, I had to spend about \$100 to buy some. This cost would obviously not be needed next time, tho next time I think I would probably go for one that didn't need a frame, read more in the [hardware](/projects/mikes-mirror-hardware/) post.

# Time

To be honest im not sure exactly sure how long it took. I really depends on how to measure the time, some things were done in parallel, but here is a rough breakdown:

- The thinking planning and research was over a week or two
- Time taken waiting for the CPUs to arrive was a couple of weeks to here in Australia
- Getting the glass cut (three times) was a few weeks
- Building the frame and assembling was done over about 3 days
- Writing the software has been off and on again for a few months (probably could be analysed from the [GitHub repo](https://github.com/mikecann/mikes-mirror))

So probably off and on again I have been working on for the last 3 months or so.

# <a name="video"></a> Video Demo

<iframe width="853" height="480" src="https://www.youtube.com/embed/FHjZnk6JYVQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

# What went well

- Im impressed with the performance of the Up Core. For the price and size this little thing performs really well and is x86 so runs just about anything you want.
- Im alo impressed with the monitor, it was really light and when I took it all apart the display controls still worked and fit nicely underneath.

[![](./bottom-controls.jpg)](./bottom-controls.jpg)

- Building everything on React and Electron was a good choice. It was quick to iterate and there are tons of prebuilt libraries out there thanks to NPM.

# When went not so well

- I had to order the two way glass three times (more on this in the [hardware](/projects/mikes-mirror-hardware/) post)
- Light from the window behind the mirror causes issues with the face detection sometimes. As a attempt at a solution I bought a desk lamp to try to illuminate your face a little more:

[![](./mirror-with-desklight.jpg)](./mirror-with-desklight.jpg)

- I put the screen in upside down so that on-screen display settings for the monitor are upside down, whoops!

[![](./upsidown-ocd.jpg)](./upsidown-ocd.jpg)

- Im really not a woodworker and so didnt do as good as job as I would have liked there (more on this in the hardware post).
- Racked up an expensive Google Bill because I was recording voice for 500 minutes when I wasn't aware it was running, whoops!

# Conclusions

It was a fun and challenging project. I would definitely recommend it if you are looking for a hardware / software project to work on. There's lots of room to customize it to your needs, just take a look at the [Magic Mirror forum](https://forum.magicmirror.builders/category/12/show-your-mirror) for other peoples projects to see how varied mirror designs can be.

If I was to do it again I think I might so for something that didn't require a bunch of woodwork like this frameless design from Max Braun:

[![](./frameless-mirror.png)](./frameless-mirror.png)

There's plenty more things I want to add and improve to the mirror. I suspect this will be a project ill keep adding to over time and maybe some time in the future I will do a follow-up post, so subscribe to keep up to date :)

# More Reading

This is a 3 part series, find the other parts here:

1. Mikes Mirror - Overview
2. [Mikes Mirror - Hardware](/projects/mikes-mirror-hardware/)
3. [Mikes Mirror - Software](/projects/mikes-mirror-software/)