Magic Mirror — my first ever Raspberry Pi project.

Stacha_C
7 min readNov 23, 2022

--

With step-by-step beginner-friendly tutorials on how to do a smart mirror yourself.

On day 61 of the #100DaysOfCode challenge, I got myself a Raspberry Pi. My favorite web development teacher Andrei Neagoie, in his blog, recommended getting one:

“What is a Computer/Server/OS? Buy a Raspberry Pi. Look up different projects on YouTube that you can do with your raspberryPi. [..] When I was starting out, doing this was one of the best “Aha” moments I had. It could be for you, too.”

I was excited to put my hands on it.

Isn’t it cute?

Naturally, my next steps were to set Raspberry Pi up and make sure it was working.

After my Raspberry Pi was up and running I started to browse the internet and watch dozens of videos about Raspberry Pi, Linux, and different DIY projects. When I came across the smart mirror tutorial I instantly loved the idea and decided to try it out. I mean, it is officially the best project — MagicMirror is voted number 1 in the MagPi Top 50.

The next day I started to work on my Magic Mirror project.

In this blog post, I am sharing my every step, that you can follow along if you want to get yourself a smart mirror.

STEP 1. Buy a Raspberry Pi computer.
(I’m using Raspberry Pi 3)

STEP 2. Inset micro SD onto your usual computer. I’m using MacBook, so I need a dozen adapters 🤭

STEP 3. Format SD card to FAT32. I used this method: link. https://havecamerawilltravel.com/how-to-format-sd-card-on-mac/

STEP 4. Go to the official Raspberry Pi website and download the software. I’ve downloaded the one for Mac: link. https://www.raspberrypi.com/software/

STEP 5. Connect your Raspberry Pi to any monitor, keyboard, and mouse. My initial setup:

Later I changed it from my TV screen to a smaller monitor.

STEP 6. Press Enter, then set up the user, password, location, and language

STEP 7. I’ve also added remote access to my raspberry Pi, so I can use my MacBook when I’m programming Raspberry Pi, but this is not a crucial step to set up the Magic Mirror, so I’ll skip the description of this step for now.

If you want to do it, check out this detailed official Raspberry Pi tutorial:

https://www.raspberrypi.com/documentation/computers/configuration.html#configuring-networking

After my Raspberry Pi was up and running I started to browse the internet and watch dozens of videos about Raspberry Pi, Linux, and different DIY projects. When I came across the smart mirror tutorial I instantly loved the idea and decided to try it out.

The next day I started to work on my Magic Mirror project.

STEP 8. Go to the Magic Mirror website and follow the installation steps.

One by one copy and paste those lines to your terminal.

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs
git clone https://github.com/MichMich/MagicMirror
cd MagicMirror/
npm run install-mm

(Note: this one may take up to 30 minutes to install, be patient)

cp config/config.js.sample config/config.js
npm run start

Now you will see the Magic Mirror default interface on your monitor.

STEP 9. Customize your smart mirror by installing modules.

9.1 Go to GitHub for Magic Mirror modules

There are hundreds of modules created by different developers, and you can create your own as well.

https://github.com/MichMich/MagicMirror/wiki/3rd-Party-Modules#wiki-pages-box

There are hundreds of modules put there

9.2 Pick those you like. I’ve decided to start with the clock, date, weather, and simple greeting.

9.3 Add code from the module README file to the terminal.

9.4 Add module to the config file, and customize module style.

Now the programming part of your Magic Mirror is complete, it’s time to add a mirror to the monitor.

Side note. And a few days later I decided to write my own code for my magic mirror. If you like my minimalistic approach feel free to use my code for your project, read about it here: https://github.com/Stachacl/magic-mirror.

STEP 10. Make a mirror

Here you have a few options.

One is a two-way mirror glass. You will achieve the best look with this option. Most commercial smart mirrors are using two-way mirrors for their products. It will look perfect.

3D render

The downside of this option is the price. A mirror of my size would cost me at least $300 and I wasn’t sure if I’m ready to spend this amount on my little hobby project.

The less expensive but still pricey option was an acrylic two-way mirror. My main problem with this one was that I had to cut it myself to fit the size of the screen. And then do a custom frame — this is what literally every person in the smart mirror tutorial does.But as I said I didn’t want to spend tons of money. So what I did instead.

  1. I’ve found the old picture frame in my garage,
  2. I ordered mirror-tinted glass film,

3. Cut it and sprayed it generously with the soapy solution,

4. Stuck it to the glass,

5. Placed glass back into the frame

The reflection looks a little bit wavy (okay, very wavy), not perfect like a glass mirror, but that might be because I was rushing to stick the film to the glass and left plenty of bubbles.

STEP 11. Place your monitor behind the two-way mirror.

The monitor is standing behind the mirror

My monitor is way smaller than my mirror, but still, it turned out to look totally fine. I know that lots of people are afraid of this project because they think that the mirror should match the size of the monitor exactly. I think it’s not necessary. The mirror is not see-through unless there’s a light coming from behind the glass. You can also cover the unused part of the mirror with thick paper or cardboard to make sure the will be no light from the other side except for the monitor. The border of the monitor is not visible from the outside, because you only see the bright white text through the mirror.

Cover with black paper parts of the mirror that are bigger than the monitor

I’ve decided to place my monitor in the bottom left corner. And I kept in mind that all my magic mirror data will be displayed at the bottom left corner of the mirror, and I’ve styled it accordingly. If this was a permanent project I would probably lift the screen and position it behind the top left corner of the mirror.

The reflection is wavy

Disclaimer: as I’ve mentioned earlier, I was interested in this project only because I wanted to learn more about what can I do with Raspberry Pi.

I’m not planning to leave this smart mirror in my bathroom, because I don’t want to leave my monitor and Raspberry Pi in the humid room, as well as I, want to keep making new projects with my Raspberry Pi. So please don’t judge the quality of my mirror. I am sure I would be able to make it look better if I was willing to spend extra few hours practicing sticking film to the glass.

I hope you guys liked my little project and found this blog post either helpful or entertaining. Let me know if you have any questions by contacting me via Twitter. https://twitter.com/Stacha_cl

--

--

Stacha_C

I’m writing about web accessibility, user experience, and web development.