Saturday, April 1, 2017

How I built My Smart Mirror from scratch

It all started while learning JavaScript. I was looking for some practice projects. I wanted to build something which not just helps me in learning JS but is also interesting enough to keep me motivated. While reading a blog I learnt about the idea of a Smart Mirror. I found it very interesting so I instantly knew I am going to build one.

My smart mirror looks like this:

My Smart Mirror

It displays current temperature, weather summary and humidity at top left. Time, day and date at top right and Namaz timings below it.

Main components:

A two-way mirror:

I couldn’t find any online options for buying a two-way mirror in Delhi. I went to a local hardware store on Vikas Marg and obviously they never heard of anything called “two-way mirror”. Then I explained them my requirements which they understood. They call it something else in India but it is readily available at hardware stores. I bought a 15X10 inches mirror and got holes drilled on all its corners.

An Android based tablet:

Many people have used an old monitor for building a smart mirror. However, I realized that using a monitor makes whole process a bit complex. If you are using a monitor, you need one more device where you will run your app and both of them need to be connected. I simply bought a 7 inches tablet and installed my app on it. It has a limitation that you only get 7 inches space to display content. Anyway, I do not wanted to display a lot of information because it may not leave any space for a user to view his image and it also defeats the purpose of a mirror. I found 7 inches space enough to display all I needed on my mirror.

An android app:

Developing a new app for my requirements was the most technical and time consuming thing. I used JavaScript for all the back-end processing. And later built an Android app using Phonegap framework. I used Openweathermap API for weather updates and PrayerTime API from for Namaz updates.
When the app is ready you simply need to deploy it on the Android tablet and fix your tablet at the back of the mirror. Also cover the unoccupied space with a black chart paper or paint.

Issues I Faced:

I faced issues with my application’s background not matching with that of my mirror. Adjusting background color and brightness fixed it. 
One issue was about installing and configuring my application on the tablet. You can connect a mouse with your tablet using OTG cable for interacting with it.
Also make sure the room/place where you install the mirror is brightly lit. Another drawback of using a display smaller than the size of mirror is that the display will be distinctly visible in darkness. One reason is that I configured it with lights on. You can try auto brightness feature of Android if it works for you.

What’s next:

I have a plan to add news headlines, calendar and traffic updates to my mirror.

Overall it was a great learning experience for me.

No comments:

Post a Comment