k1ll1n/smart-mirror

Learn how to build your own Smart Mirror

##SmartMirror-Angular-Annyang

I was motivated by the HomeMirror project by Hannah Mitt [link]. One of the biggest issues was looking for two ways mirror. After looking hard, I finally found a factory based in Singapore who could sell me two ways mirror. I have purchased and built one mirror based on Hannah Mitt project and it was pretty awesome.
The next thing that I wanted to do it to add interactivity into the project. Currently, the display device (in my case, Nexus 7 & Surface Pro 3) is hidden behind the mirror, hence, the touch surface becomes inaccessible. I have started to explore some solutions. I have forked Evan Cohen [SmartMirror] project so that I can work with Smart Mirror Open Source community.

###Project Demo Page Click this to see on your browser: [link].

###In Action How to build a mirror [Youtube].
Testing the first page [Youtube].

###1. Using Voice Command ####Google Now Since the HomeMirror project was initially built on Android platform, Google Now is the most promising feature to look into it. Since KitKit (Android 4.4) and above, Google Now voice command can be activated from anywhere in Android even if the screen is Off. Awesome. The only catch is that we have to use keyword OK Google each time when we want to activate. Open Mic+ (FREE) app offers users to replace the built-in command voice any other keyword. With combination with Tasker ($4.99) app, there is a huge potential on what it can be done with it.

Sample photo taken from Android Authority

After experimenting for sometimes, I abandoned this approach. 2 reasons. One is that I need the background to become black while the text is in white color for better mirror experience. Next, i want it to be able to use in any OS platform and device.

####Web App in AngularJS

Since we are not using _Google Now_ for the project, I have decided to go for web app since it can be easily run on any platform. All I need will be the Speech Recognition engine and some UI elements using JavaScript, CSS and HTML. I found somewhere on the web about _AngularJS_. I have been working in Java for sometimes and I thought I will give a shot. It is a good learning opportunity and soon enough, I really love AngularJS for its MVC framework. Simple, clean and magical.. Kudo and two thumbs up to _Miško Hevery_ who created this framework.

####Annyang Speech Recognition While looking at **Evan Cohen** [[SmartMirror]](https://github.com/evancohen/smart-mirror) project, I found something interesting - _Annyang_ Speech Recognition JavaScript [[lib]](https://github.com/TalAter/annyang). [[Annyang]](https://github.com/TalAter/annyang) is a small lightweight library that uses the build-in Speech Recognition API. It was created by **TalAlter** and it it really very easy to use it. Chrome works really well with Annyang library and since chrome support full screen mode, it is my choice of platform for this project.

##How-to Now you are sold and you will build one for yourselve or someone special. I have prepared this **master** branch for you so that you can build and extend your own Smart Mirror version. In this branch, you have the main page and weather for sample.

###Hardware 1. Two-way mirror 2. A monitor with Computer or a Tablet (basically, you need a display panel behind a mirror. If you have any other idea, feel free)
###Software 1. First thing first, fork/download this **master** branch into your own. 2. Github gives you free web hosting. To make use it, in your github project, you have to create a branch **gh-pages**. You can click on **Branch:Master** button. Type __gh-pages__ in __find or create the branch__ textbox. After you create the branch, your project URL will be __https://[username].github.io/smart-mirror/__. Note: This is for people who fork the project in github. For peopel who download, go to step 3 instead.

3. Now you want to modify or use it in your own local computer. To do it, you will need Web Server. I recommend using MAMP for Mac users and LAMP for Win users. Once you have installed and setup, change the directories to point to the downloaded directory.