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

In this project, we are going to explain how to create a smart mirror using a Raspberry Pi and several other components including a computer monitor, mirror glass, and HDMI cables.

Documentation

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!

enter image description here

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.

enter image description here

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.

enter image description here

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.

enter image description here

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!

Code

GitHub Repository

https://github.com/HackerShackOfficial/Smart-Mirror

Commits

Aaron Tainter
pushed c9569c2fb3e96799271b8790d2989e0445f9ae0f
Remove IP variable
2017-02-12 21:08:39 UTC
atainter
pushed f215d5334d7eaf8adc1d96e8c7ac827126c33705
Add credits and license for icons
2016-11-28 21:32:14 UTC
atainter
pushed d4766ec4c3afe3ac2c0daca5561cc3b99900333d
Add Wind.png
2016-11-28 21:17:48 UTC
Aaron Tainter
pushed 8e8516c33741957fad3df8638175b9905ef55541
Add parameters for lat/long, font sizes
2016-10-22 18:56:14 UTC
Aaron Tainter
pushed 2737991ced6b2d2f4535c48d87892fef0c44c923
Merge pull request #13 from smileyn64/Locale-Lang-Time
2016-10-12 02:47:34 UTC
smileyn64
pushed 98b9024a49ef773a68aa1a4ba95a85f8623595d4
AM/PM for 12h clock format
2016-10-12 00:37:41 UTC
smileyn64
pushed 26c9f6537c5fcc16acb69f3485a7bdb45131c4bd
RAZ for pull request
2016-10-11 17:37:56 UTC
smileyn64
pushed ede7b08b4651c56718ac5818fbeaaa3ada73ced1
Locale, Lang, Time
2016-10-11 17:35:15 UTC
Aaron Tainter
pushed e52d58fbbf3e5670484ed768108d834e7882c986
Update weather API to use darksky.net
2016-09-26 16:11:00 UTC
Aaron Tainter
pushed 5160bda1b3584252a12e76f78a65eeedb221a739
Update README.md
2016-09-24 01:46:08 UTC
Aaron Tainter
pushed c6ff6cd02bc997e2bdfbd2c86f3469248e3dc93e
Update README.md
2016-09-24 01:37:53 UTC
Aaron Tainter
pushed bc8a8503e80db19decd56c5dc308a281e3d9de4b
Merge pull request #5 from ewized/setuptools
2016-09-08 17:30:59 UTC
Joshua Rodriguez
pushed 59508765f9e334c21aacf198bc7a7c6688f894b2
Generate the requirements from the file
2016-09-08 15:48:05 UTC
Aaron Tainter
pushed 6643d7dd390a78a78f35a160ab2dd0061384aa38
Merge pull request #6 from sdkayy/patch-3
2016-09-08 04:32:30 UTC
Aaron Tainter
pushed cd1224e8f75542524c0905495c55abe06a1de8e7
Merge pull request #4 from sdkayy/patch-1
2016-09-08 04:29:14 UTC
SDK
pushed 864dc924ebaa62cc17724c82bd8d63482494041a
Added the logic if Country code == None
2016-09-08 03:53:15 UTC
SDK
pushed 2dcb56fd9141acb794474ce5db8dd1af09d56b9b
Found a bug and fixed it ontop of my code.
2016-09-07 22:16:40 UTC
Joshua Rodriguez
pushed 88eca9a6fa1c005bb45b937744631f6e7dc61f45
State the command should be ran in the folder
2016-09-07 22:01:41 UTC
Joshua Rodriguez
pushed f1d542d9d1738dcde2d4c30295eb50d21ad028fa
Add header for image to describe it
2016-09-07 21:51:07 UTC
Joshua Rodriguez
pushed 880486c92dd6ee0fe4c80c8a8dfc1ef79206744c
Use setuptools to install smartmirror
2016-09-07 21:48:33 UTC
SDK
pushed 1074a41cecdf357bd16e0f1a8e6d4b4770eaa572
Forgot something
2016-09-07 19:35:59 UTC
SDK
pushed 745c2978bb74620fb8805d0f0704b03f5c474551
Added automatic IP detection
2016-09-07 17:56:36 UTC
Aaron Tainter
pushed bf5447b650ef17405676f49993adb5cb11c228ca
Merge pull request #2 from Droogans/show-video-inline
2016-09-07 16:52:36 UTC
Droogans
pushed 88721a415e5c5410d208672ca9dab08256089db1
Show how-to video inline on the readme page.
2016-09-07 16:42:26 UTC
Aaron Tainter
pushed 6675fb0e81933cfd7465f023c6b4083bb10dc0b6
Update README.md
2016-09-06 16:04:19 UTC
Aaron Tainter
pushed 70f199bc2315c17e5884ddc77393ccb40b708ab4
Update README.md
2016-09-04 20:36:56 UTC
atainter
pushed 4c6e925275010846be1fa7a6f5686020f4c9c7c3
Add project files
2016-09-04 20:35:49 UTC
Aaron Tainter
pushed a312f4ee1650b3a1b32ddf589510cce8b2390912
Initial commit
2016-08-22 00:49:21 UTC
Bill of materials
Name Article number Link Quantity Unit Price
Two-way mirror 1
Computer monitor 1
Raspberry Pi 1
SD Card 1
Network Adapter 1
HDMI-to-VGA Adapter 1
Wooden frame 1
Total 0.00 $
Info

Project State

Public Project

Licences

Software Licence: Project has no software
Hardware Licence: Project has no hardware

Project Tags

Admins

Asifr

Does this project pique your interest?

Login or register to join or follow this project.

Comments
Back to top

Your comments, please!

Want to comment this ... Show more