Software Setup for My Smart Mirror

How I set up the software for my smart mirror

Mitchell Marino
6 min readNov 17, 2018

This post covers setting up the Raspberry Pi, installing and configuring the MagicMirror² software, and developing a module for my smart mirror!

The Raspberry Pi

The software for my smart mirror was run on a Raspberry Pi 3B+, a credit-card sized single-board computer. The model 3B+ has a 1.4 GHz processor, 4 USB 2.0 ports, a full size HDMI port, and on-board wireless connectivity — pretty much everything you could ask for in a device its size.

Some photos of the Pi, with a Tim Hortons gift card for perspective. (It really is the size of a credit card)

I used a 32 GB SanDisk micro-SD card for the long-term storage of the system. It can be seen beside the Pi on the left image above.

Setting Up Raspbian

I decided to use Raspbian, the Raspberry Pi Foundation’s official supported operating system (a Linux distribution), to run my Raspberry Pi.

Downloading Raspbian

I downloaded a Raspbian OS Image from the Raspberry Pi Foundation’s website on my PC. I made sure to download Raspbian Stretch with Desktop and not the minimal image (which only has a command-line interface) because the Operating System requires a GUI to display the MagicMirror interface.

Once the download was completed I used 7zip, an open source file archiver that supports many formats, to unzip the Raspbian Image.

Flashing the Micro-SD Card

“Flashing the SD card” refers to writing an OS image to the SD card. My PC did not have an SD card reader, so I used a Kingston USB 3.0 Card Reader which allowed the micro-SD to be read from and written to like a USB device.

A Kingston USB 3.0 Multi-Card Reader.

I used a free open-source software called Etcher to flash the Raspbian OS image onto my micro-SD card. Etcher is a simple SD card flasher app that works on any platform.

Using Etcher is a three step process:

  1. Select the OS image on your file system.
  2. Select the drive to flash the OS image onto.
  3. Press Flash!
Some screenshots of the Etcher interface, before and while flashing the micro-SD.

Booting the Raspberry Pi

Now that the OS image was flashed onto the micro-SD card, it was time to boot the Raspberry Pi! I slotted the micro-SD into my Raspberry Pi and turned on the power, where I was greeted by the Raspbian Desktop.

The Raspbian Desktop on the Raspberry Pi.

The first thing I did was setup RealVNC so that I could control the Raspberry Pi from my PC. This required RealVNC connect on the Raspberry Pi and realVNC viewer on my own PC. After some configuration, this allowed me to remotely control the Raspberry Pi with ease from my PC, rather than plugging my mouse, keyboard, and monitor directly into the Pi.

Setting Up MagicMirror

I cloned the MagicMirror² repository and ran npm install, which installed the dependencies for the module. Once the installer was complete, I setup my MagicMirror configuration file.

Running the installer for MagicMirror.

Integrating the Weather With MagicMirror

I used the Current Weather module to display the weather, and the Weather Forecast module to display the upcoming forecast.

Both modules require you to make an OpenWeatherMap.org account and configure the module with your account’s allocated API key. This API key can be added to the module configurations and in turn be used by the modules to access real-time weather data.

Integrating My Calendar With MagicMirror

Rather than using the default Calendar module, I decided to use MMM-MyCalendar because I felt it was more aesthetically appealing.

I added the private URL for my Google iCal Calendar to my module configuration file. The MagicMirror program was now successfully integrated with my Google Calendar!

Booting MagicMirror

After the configuration file was fully configured, I started the MagicMirror process. After running npm start, I was greeted by the default interface below.

The MagicMirror interface, before my custom arrangements.

Building My Own Module

I could not find a convenient way to change the compliments or photos for MagicMirror, so I thought, why not provide this functionality via Google Drive?

  • Everyone with a Gmail account has access to Google Drive for free, so it is super convenient and accessible!

The Learning Curve

Before building on top of the MagicMirror platform, I had to learn Node.js, study the module development documentation, and observe other modules built for the MagicMirror platform to see how they work.

Node.js

Learning Node.js was a familiar task because it is essentially just server-side JavaScript. I started from the basics, but quickly grasped the language and really started to enjoy it. Here’s what I liked most:

  • Mature libraries like moment and fs helped with complex tasks, dealing with a lot of necessary logic and conveniently handling errors.
  • Promises really simplified the workflow for my module while still allowing asynchronous code and the avoiding of callback hell.

The MagicMirror² Platform

Integrating my module with the MagicMirror platform was a smooth process. Here’s what I enjoyed about the platform:

  • The module development documentation is extensive, so I could find most things I needed there.
  • Communicating between the module client process and server process was a breeze, since MagicMirror provides an instance of Socket.io to easily communicate between them.

My Module: MMM-Remote Compliments

MMM-RemoteCompliments provides seamless integration with Google Drive to display compliments and images on the MagicMirror² interface.

A preview of the model I developed, MMM-RemoteCompliments.

How it works

The module retrieves information from Google Drive using the Google Drive REST API V3 and the Google Sheets API V4. Access to the documents of a user is granted by using OAuth 2.0 which is conveniently set up by running the module’s setup script.

Why “remote compliments”?

I named the module remote compliments because you can change the compliments (and photos) that the module displays without a direct connection to the mirror. (i.e. the contents can be changed remotely) The inspiration for the module was to use it to compliment my girlfriend, who was gifted the mirror. :)

You can learn more about MMM-RemoteCompliments by visiting the module repository and checking out the demo on YouTube embedded below!

MMM-RemoteCompliments demo on YouTube.

The Final Interface

After integrating my module, fine-tuning configuration values, and some custom styling, the interface was set up to how I liked it!

My custom MagicMirror interface. (Say hi to my parrot, George!)

Backing Up the Micro-SD

I backed up the micro-SD using Win32 Disk Imager. Now, in the case of catastrophic failure, I can simply restore the micro-SD image onto another card and boot up the mirror as if nothing happened!

Win32 Disk Imager before (left) and while (right) creating a disk image of the micro-SD card.

Thanks For Reading!

Thanks for taking interest in my project! Check out the main post for this project, encapsulating the entire process of making the mirror: How I Made a Smart Mirror that Integrates with Google Drive

Or, check out the next step in the process: Building My Smart Mirror

If you have any questions, please feel free to reach out to me at mitchelltmarino@gmail.com.

--

--