Introduction: Smart Mirror
This instructable will teach you how to create a Smart Mirror which displays your email inbox, the latest news and updates from The New York Times, and the date and time on a background from Unsplash.
Link of it working:
A frame for the monitor, two way mirror, black material (only needed if monitor is smaller than the two way mirror), a monitor, a raspberry pi 2, an HDMI cord or adapter to HDMI (I used a bidirectional DVI to HDMI adapter), the included raspberry pi 2 power cable, a micro sd card, a micro sd card adapter, and a mouse and keyboard pair to navigate the raspberry pi display on the monitor.
Raspbian, Balena.io, and MagicMirror2
Github (for installing 3rd party modules), MagicMirror2 to install the program onto the pi, and Unsplash to generate the background images
Step 1: Installing Raspbian and Magic Mirror
Using a computer download Raspbian and Balena onto a micro sd using a sd. After the programs are downloaded insert the micro sd in the adapter into the computer. Using Balena select the raspbian program and the sd to transfer the files. After this insert the micro sd into the raspberry pi. On mine it was on the bottom on the pi to the side. Hook up the pi to the moditor you're using and complete the set-up guide. To do this plug the power cable into the wall and the pi. Then plug the HDMI cable into your adapter or HDMI plug on the monitor. After updating and setting up the software go to Magic Mirror software onto the pi. Some commands will be given to run onto the pi which will prompt the installation of the program. It will ask you questions throughout installation about preferences. Answer the questions and follow the code it displays for you to copy into the command line. It will then boot the basic program if done correctly after entering npm run start.
Some commands I learned that are important to remember on this website when navigating directions and programs:
Go to the root directory = cd ~
Go to the previous directory = cd -
Go to the next directory = cd ..
Go to the Magic Mirror directory = cd MagicMirror/
Go to the module directory = cd module
When in the Magic Mirror directory (not module) to run the Magic Mirror program = npm run start
To quit the program = hit ALT and click quit
Step 2: Removing Preset Modules
When opening the Magic Mirror program for the first time the user will be greeted with the time, date, a calendar, and a news updater. You can easily remove any preset module by removing it from the code. To access this code go into the raspberries folders and open the Magic Mirror folder. You can enter the folders by clicking the folder icon on the top left area of the screen. After this go into the config folder, you will see an editable text called config/config.js in the folder. Double click on the text and the module programming for the Mirror will appear. Be careful to not delete any brackets or text or the program will not run. As seen in the picture above I deleted the calendar module from my program as I foresee myself not using it. Any other module can be removed as well but again be careful removing chunks on code from the program.
Step 3: Installing Modules
To install 3rd party modules to the mirror Github is used. This website is a culmination of usermade modules available for use. There are a lot that include different widgets, backgrounds, or social media feeds. Programs like Alexia and Nest can be incorporated into the Mirror with the use of a few extra parts. After browsing the website I decided on an Email Feed module and a module that pulled images from Unsplash.
Email Feed -
Random Photo -
There are two ways to install modules, extracting zip files and moving them into the module folder or using the given code in the command prompt. I used the second option but either works and is pretty simple to use. You may have noticed the posts on GitHub have lines of code inserted into the page of instructions. We use these to download copy the module and then download the npm into the folder. Npm stands for Node Package Manager and is the package that downloads during the code npm install. To begin the downloading process follow these steps after opening the command prompt.
1) cd MagicMirror/
2) cd modules
3) git clone "the link of the git hub page"
4) (enter the new folder) cd "folder name"
How to check for the folder name:
Usually the folder name is the name of the module itself. For example MMM-EmailFeed was simply named MMM-EmailFeed. But is you are using the name of the module and it's saying there is no such directory, type ls while in the module directory to get a list of all the installed folders in the module folder. This will give you the name of the folder to travel to.
*Note quotations are only used here as an example and should be removed when actually entering the link and folder name*
6) (while now in the new folder) npm install
Great! Now we've downloaded the module folder, but we still need the copy the entry into the config/config.js folder. To do this navigate back into the text we were into to delete the preset modules and paste the text given to you. Be careful when placing the code to not break any brackets. If you look in the included photos above you will see a safe location to paste the code. If it's not clear paste it after the last ], in the paragraph. Keep in mind that most modules require some text to be changed or some information to be entered. For example the email feed required my gmail account information to access the presented information. After the npm has been installed, the entry has been posted into the code, and you have entered the required info start up the Magic Mirror program and make sure it's working properly. The next steps will offer more pictures of my process while installing the modules if there is still confusion.
Step 4: Installing My Modules
The photos above show exactly what I put into my Pi to get the programs working. The first four images are pulled from the GitHub websites as example for the instructions I followed. The last photo is an example of the entry pasted into the config.js code. I hope this serves as a better more visual example compared to the last step.
Step 5: Creating the Mirror's Appearance
Now that the Raspberry Pi is running it's time to create the mirror. This step was the hardest because it was hard to find a frame that will fit the monitor. Even after disassembling the monitor, it is still 19x15x3 and I'm still having trouble with this step. I've looked at many stores and online stops to try and find a frame that will fit the monitor but I'm not seeming to have any luck.
Steps for when I obtain a frame and my two way mirror:
1) Put the two way mirror into the frame
2) Set the monitor in along with the raspberry pi and cords
3) Come up with a way to run the cords through the frame (possibly drilling a hole?)
4) Putting black material over the monitor to give the monitor a solid look and putting the back in the frame
5) Hanging it up on my wall