There are 3 components to the Magic Mirror: The mirror, the monitor, and the frame. The monitor is powered by a Raspberry Pi 3 that displays the Magic Mirror interface. The frame encases both the mirror and monitor to create the Magic Mirror illusion. I decided to modify this project by customizing the display and adding a remote control feature so I can control the display from my phone and laptop.
Area of Interest
Lick-Wilmerding High School
After this project, I gained a lot more experience in coding and general software of projects rather than the hardware which is what I had been focused on for so long. I learned how tedious the process can be and that each and every character must be exact to get the code to run smoothly. I also experienced how rewarding it is when the code does work after trying to debug the code for so long. With this experience, I now understand a little bit more about the software side of engineering and have a much deeper appreciation for people who have written code for just about everything.I think BlueStamp has helped me think more critically while being even more detail oriented because coding is very specific. BlueStamp has also helped me improve my problem solving skills by using my resources to solve problems and not to be afraid to ask for help or simply search on the internet for similar errors. I also improved upon my time management skills which was a goal of mine starting the program. I am incredibly proud that I was able to finish my project while documenting my process and present the final product to my peers.
The biggest challenge I faced during this project was while I was following an online tutorial about how to integrate my google assistant to have it control my display. Installing the module required me to write over my SD card, but I didn’t realize that it would completely erase everything I had done to get to my first milestone. So, I reinstalled the magic mirror code and started to reinstall all of the modules I had before, but the modules wouldn’t show on the display. I added them to my configuration file, but when I ran the code they weren’t on the display and no errors came up in the log after I ran it. I also couldn’t get the google assistant module to work with my monitor because the tutorial I was following used an older version of different websites and kits that use a different process now. After a few days, I decided to start over again and reinstall the original raspberry pi system again. Knowing that it would write over all my old progress, I saved the modules folder as a zip file and emailed it to myself so I could easily add it to the default magic mirror after reinstalling the code. Although it was frustrating to have to restart twice, I didn’t allow my frustration to get in the way of my progress because I didn’t want to waste any more time. As a result, I was able to completely customize my display with even more modules than before.
My second milestone was getting my frame built and adding more modules. I made my frame out of cardboard boxes. I encased the monitor in cardboard and duct taped that to a larger piece of cardboard with a rectangle cut out the size of the monitor screen. I put black duct tape on the rest of the cardboard so no other light would shine through and to make the display as clear as possible. I went for a frameless look because I wanted to keep it simple and I didn’t have access to wood to make it look as clean as I would have liked. I have the mirror leaning against the wall on my desk, so I can easily take off the one way mirror and edit the display as needed. I also changed the display quite a bit since my first milestone because I faced a challenge while trying to install a google assistant module (which is described in my final milestone). Now, in addition to the time and date, google calendar, and Spotify modules, I added a trivia, poem of the day, and astrology module (all linked in customization section). I also got the remote control module to work, so I can use my phone or laptop to change the display of the module. I was able to do this by adding the IP address of my phone and laptop to the configuration file and accessing it through a web browser specific to the IP address of my raspberry pi. The remote control allows me to turn off certain modules so there’s more space for others for example, the poem of the day takes up the most space right in the middle, so I usually turn off all the other modules to get a clear image of it. The remote control also allows me to have the display sleep so I can just use the mirror if I need.
My first milestone was getting my monitor to display the MagicMirror² code from this website and making modifications to my liking. The default display shows the time and date in the top left corner, a US Holiday calendar below that, a changing compliment in the middle, and a constant update of news headers from the New York Times on the bottom. I added a current weather module which shows the time of sunset, wind speed, and a two day forecast and I modified the display to show the temperature in Fahrenheit instead of Celsius. I changed the calendar from displaying US Holidays to my google calendar events by adding my personal link to the configuration file. I also added a module to display the song that I play on Spotify in the bottom left corner which displays the song cover, artist, album name, and where you are in the song.
How to customize the modules
I customized the display by changing the default code in the config.js file within the MagicMirror folder. In order to add third party modules, I cloned the repository into the MagicMirror/modules folder first. In the config.js file, I can choose where to display the module (top_left, center, bottom_bar, etc), the header, and the configurations specific to the individual modules. For example, I chose to have the album cover show on the display, so I made sure the command was ‘true’ for cover art. I was also able to change the link in the default code for the US Holidays to a personalized link to my google calendar which did not need a third part module. The configurations can be found at the GitHub repository.
Most modules use an Application Programming Interface. An API is set of protocols and routines to build software applications. For example, I use an API key to show what I’m listening to from another device. API keys are used to track and control how to the API is being used i.e to prevent malicious use of the API. It also acts as unique identifier and as a secret token for authentication which is how it shows what specific song I am listening to.