A Step by Step Guide: How to Build a Smart Mirror with Raspberry Pi

Documentation:

Smart mirrors have become insanely popular after they’ve been featured in numerous futuristic Hollywood films. You’ve probably seen smart mirrors in many tech stores but they tend to be a bit pricey, which is why we are going to help you create your own. It is possible to create a smart mirror using nothing but an old computer monitor, a two-way mirror, along with some cables and adapters. A smart mirror can conveniently display a variety of information including temperature, time, your personal schedules, and other important data. Follow the steps below to learn how to create this project on your own!

Step #1 – Finding the right components

The first step of the project is to find a suitable mirror that goes along the monitor that you’re going to use. Keep in mind that the size of the mirror has to depend on the size of the monitor, because the two have to fit one another perfectly. Therefore, measure your monitor and look for a two-way mirror of similar dimensions. When it comes to choosing your monitor, it is best to choose one that has inputs located at its center rather than on the sides because centered inputs make it easier to fit the monitor with the frame and HDMI cords. You can find high-quality hardware components at planaronline.com.

Step #2 – Build the Mirror Case

Mirror cases are usually built out of wood. If you don’t have a custom case, you can create one by placing wood together to form a frame. This is definitely one of the easiest parts of the project, since all I did was measure all the pieces properly to make sure the monitor will fit in the case, and then put it all together. The case should have holes at the top and at the bottom to provide the necessary airflow for the Raspberry Pi, which will be supplying power to the smart mirror. It is also important to make a larger hole for a power plug in order to ensure enough space to wire the monitor.

Step #3 – Install the Monitor and Raspberry Pi

Once you have the frame put together, all components should fit in nicely in the back of it. I used some high quality tape to secure all cords and components within the case and prevent them from moving around. There should only be one cord coming out of the bottom of the mirror, which is the cord that supplies power. You can use a 2-way power splitter to ensure there’s only one power cord necessary. Keep in mind that the single power supply cable needs to supply both the monitor and Raspberry Pi. To achieve this, connect the Raspberry Pi with a single cable, and connect Ethernet to the router.

Step #4 Initiate the Installation Process

If you haven’t already done this, you need to install the Raspberry Pi’s operating system known as Raspbian. The installation process might take a few minutes but once it is done, you will be presented with the Raspberry Pi boot sequence displayed on the mirror.

Step #5 Turn Raspberry Pi into a Kiosk

Once you install Raspberry Pi, it is going to display its desktop on the mirror, which is not what I was initially looking for. Instead, you need to turn it into a kiosk by installing Chromium, which is the easiest browser to set up for this purpose. Here are the links you can use for the installation process: wget http://ftp.us.debian.org/debian/pool/main/libg/libgcrypt11/libgcrypt11_1.5.0-5+deb7u3_armhf.deb wget http://launchpadlibrarian.net/218525709/chromium-browser_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb wget http://launchpadlibrarian.net/218525711/chromium-codecs-ffmpeg-extra_45.0.2454.85-0ubuntu0.14.04.1.1097_armhf.deb sudo dpkg -i libgcrypt111.5.0-5+deb7u3armhf.deb sudo dpkg -i chromium-codecs-ffmpeg-extra45.0.2454.85-0ubuntu0.14.04.1.1097armhf.deb sudo dpkg -i chromium-browser45.0.2454.85-0ubuntu0.14.04.1.1097armhf.deb

Once you run Chromium on startup, you will have to configure it to work in full screen mode. To do so, follow these steps: Open the autostart settings: sudo nano /etc/xdg/lxsession/LXDE-pi/autostart Disable the screensaver by adding a # in front of the line: @xscreensaver -no-splash And add the following lines: @xset s off @xset -dpms @xset s noblank /usr/bin/chromium --noerrdialogs --kiosk --incognito "http://localhost"

This process will disable the screensaver and unwanted management settings, as well as boot the Chromium browser into a kiosk mode.

Step #6 Configuring Your Wi-Fi Network

The next step of the process is to make your Raspberry Pi run on wireless. To do so, you need to edit your wpa_supplicant file. Go to: sudo nano /etc/network/interfaces Once there, edit the network setting: network={ ssid="Network name here" psk="password" } Proceed to restart your Wi-Fi connection using these two commands: ifdown wlan0 ifup wlan0

Step #7 Set up the Webpage

When it comes to page setup, I highly recommend writing your own application for this step using the PHP micro-framework Lumen with jQuery and Moment.js.

Step #8 Ensure a Way to Host the Webpage

To be able to host your webpage, you have to install a web server. You will also need php installed in order to run Lumen. I recommend using the following line: sudo apt-get update sudo apt-get install nginx php5-fpm php5-cli php5-mcrypt git

Once this installation completes, you need to configure Nginx to know where the MirrorMirror site is located: sudo nano /etc/nginx/sites-available/mirror.conf

Then paste the configuration in this gist: mirror.conf

Don’t forget to save and exit before proceeding. In order to activate this configuration, you need to have a php enabled server running on your Pi. The configuration goes as follows: sudo ln -s /etc/nginx/sites-available/mirror.conf /etc/nginx/sites-enabled/mirror.conf sudo service nginx reload

Step #9 Install MirrorMirror

Installing MirrorMirror, the actual webpage, is the final step of the process. For starters, create a folder named “projects” inside of “/home/pi”: mkdir /home/pi/projects cd /home/pi/projects

Use this command to clone the MirrorMirror web app: git clone https://github.com/ctrlaltdylan/MirrorMirror.git

Install Composer which will install Lumen’s dependencies using the following: curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin –filename=composer

Get MirrorMirror to start running: cd MirrorMirror composer install

It is important to keep in mind that Nginx has to be able to write and read files in the storage directory in order for the Lumen application to function properly.

sudo chmod -R 777 storage

Now go to http://localhost and you should see your version of MirrorMirror activated

At the end of the process, your smart mirror will be able to display features such as animated weather icons and forecast, date and time, as well as a random greeting.

Thank you for following our guide for this project and leave a comment below to let me know how you liked it!