MartinX_BSE_Portfolio

This website details Martin's progress in building his Smart Mirror over the course of three weeks.


Project maintained by maartoon Hosted on GitHub Pages — Theme by mattgraham

Martin’s Smart Mirror

The smart mirror is a mirror that has the ability to display useful information, such as time, date, weather, news, and much more. With the help of a two-sided mirror, a monitor, and the power of coding, I was able to build a smart mirror that displays all the information listed above in just under three weeks.

Engineer School Area of Interest Grade
Martin X Saratoga High School Software Engineer Incoming Junior

Headstone Image

Demo Night Video

During Demo Night, I presented my progress on the Smart Mirror project to an audience of around 25 people and explained the thought process behind all of the features. The explanation included how the code functioned, how APIs grab information from the internet and displays it on your own project, and also future modifications I may make to the mirror. Overall, this project was both fun and educational. I have learned a lot from the coding process for the mirror and gained knowledge on how to use both Javascript and APIs to create a fun and interactive project.

Martin's Demo Night Video

Final Milestone

My final milestone was finishing the final touches for the features I had implemented and to attach the monitor to the two-sided mirror. After finishing the code for all the features I wanted, I started using flexbox, a CSS Flexible Box Layout tool to help me design the layout of the smart mirror. I also downloaded some free fonts on the internet and customized my display that way. After I finished with all of that, I hot glued the monitor to the back of the mirror.

Here are some of my code for FlexBox to design the spaces between each of the four text sections. The display: “flex” line initalizes FlexBox and tells the system taht we are using FlexBox. After initalizing FlexBox, using FlexBox’s justifyContent: “space-between” just puts the two section of text on either side of the screen. I used this with both the weather and time and todo list and news so it’ll display all four sections on the top and bottom of each side. The height just moves the news and todo list to the bottom of the screen, to add on to the four corner display.

Screen Shot 2021-07-23 at 12 34 09 PM

Final Milestone

Second Milestone

My second milestone was completing the code for the date, time, and weather for my smart mirror display. First, I installed the Smart Mirror repository from GitHub so I could write my code from scratch using said repository. Then, I started coding the date and time for my smart mirror. Although I wasn’t used to coding in Javascript, I looked at a pre-made clock class for reference and completed it successfully. Then, I moved onto the weather display feature which forced me to work with APIs for the first time. It was a challenge at first, trying to figure how to pull data from an API. But, after watching a few tutorials and seeking help from my instructor, I was able to complete it successfully as well. Lastly, I started the code for my Calendar but didn’t finish yet. It is very similar to the code for the Weather class, so I will be able to finish easily. Below is some pictures and videos of my milestone:

This is the code that updates the time every second, which displays like this:

Screen Shot 2021-07-16 at 1 48 56 PM

Screen Shot 2021-07-16 at 2 02 49 PM

This is my code that gets the weather data from the API and returns it onto the smart mirror. Here is how it looks currently:

Screen Shot 2021-07-16 at 2 03 45 PM

Screen Shot 2021-07-16 at 2 04 44 PM

Here is my code that loops through the most recent 5 items on my To-Do List and prints it onto the smart mirror:

Screen Shot 2021-07-16 at 2 05 57 PM

Screen Shot 2021-07-16 at 2 10 18 PM

Finally, I added a daily news section that displays the most popular headlines of the day from the New York Times using their API:

Screen Shot 2021-07-21 at 1 56 24 PM

Second Milestone

First Milestone

My first milestone was setting up the Raspberry Pi and all the necessary software on my computer. First, I followed a guide to set up a Raspberry Pi on the internet and plugged everything into the right place. In order to set up the Raspberry Pi, I had to plug the Micro SD card into my computer and use the Raspberry Pi Imager software and write everything necessary into the SD card. Following this step, I could then plug the SD card into the Raspberry Pi and continue with the set up through the monitor that’s connected to the Raspberry Pi. I had to install the Secure Shell Protocol (SSH) on both my computer and the Raspberry Pi then download a Virtual Network Computing (VNC) software in order to set up my Raspberry Pi with the Smart Mirror software.

First Milestone

Initial Design

Below is my inital design and drawing of the Smart Mirror. Although I’m not sure if I can implement all of these features within the three week period at BlueStamp Engineering, I will be sure to build on my progress and improve my mirror in the future. Prototype Image