Smart Mirror

The Smart Mirror is a mirror with an interface, powered by a Raspberry Pi and a small monitor. The project is very software heavy, using React.js to create an app that will become the display for the mirror.

Engineer	School	Area of Interest	Grade
Alicia F	Lynbrook High School	Software Engineering	Rising Senior

demo

Reflections

I learned through this project that I am much more interested in software than hardware. The precision required to assemble even simple hardware proved too stressful for me, and I would rather stick to purely coding. In this coming year, when I apply to colleges, I will likely only choose majors that pertain to software engineering. I also learned that instruction can go a long way, I had to learn a lot from scratch due to my inexperience but coming to office hours and getting help in class made it much easier to create my project. I also liked the design element of my project and formatting things to work correctly, I definitely have an interest in UI/UX design and would love to pursue it in the future.

Final Milestone

My final milestone was setting up the hardware portion of the project. I glued the monitor to the bottom left of the acrylic screen using a hot glue gun, lining it up first and carefully lifting corners in order to apply a small amount of glue. After that all that was left to do was install my website software onto my Raspberry Pi, which I first uploaded to Github to make it easier to download. Once I pulled it onto my Pi, I used npm i and npm run build in order to install all the packages and get it to run. Some issues were the Pi constantly crashing or not booting properly, but with a lot of patience and unplugging the Pi everything worked out well at the end.

Second Milestone

My second milestone was finishing the additional software of my Smart Mirror. The first part is a date and time section, formatted to my liking. There is also a birthday section, which displays the days until someone’s birthday. The birthdays are hard coded into the program with the dates, and they display different messages the day before and of someone’s birthday. There is also a weather section which displays the degrees in my city in Fahrenheit, and the current status of the weather from OpenWeather API. The image of the folder also changes depending on the status.

The birthday list, this can be edited to add/remove/change birthdays.

let BirthdayList = [
  {Name: "helena", Date: new Date("july 14," + new Date().getFullYear())},
  {Name: "tyler", Date: new Date("september 6," + new Date().getFullYear())},
  {Name: "snow", Date: new Date("september 17," + new Date().getFullYear())},
  {Name: "lauren", Date: new Date("november 9," + new Date().getFullYear())}
]

The finished daily component on my website.

The Interval component that updates the time every second.

const interval = setInterval( ()=>{
      setCurrentHour(editTime((new Date()).getHours()));
      setCurrentMinutes(editTime((new Date()).getMinutes()));
      setCurrentSeconds(editTime((new Date()).getSeconds()));
},1000); 

The code to create a flexible window with the icons, this can be used to wrap any component. The category variable can take different text for the input in order to display a different word for the top of the window.
Different versions of the folder icon depending on the current status of the weather.

First Milestone

My first milestone was setting up the hardware of the Raspberry Pi as well as downloading the base software of the Smart Mirror onto it. The Imaging software used to install Raspbian was not opening properly on my Mac, so I switched to a Windows laptop to install Raspbian onto my SD Card. With the software installed, I attached the heatsinks, plugged in the power and HDMI cables as well as the USB keyboard and mouse. With the general setup of the Raspberry Pi complete and it succesfully hooked up to the monitor, I began to install the basic Smart Mirror software. I forked this repository and followed the instructions to install it onto both my Raspberry Pi and Mac. I also planned out a layout for my Smart Mirror website using Clip Studio Paint and the font Gaegu. Image Layout