Get the weather, news and even commute times all while grooming in the morning with the aid of a Raspberry Pi and the official Raspberry Pi touch screen.
You will use Magic Mirror, an open-source application. MagicMirror is an information dashboard app written in Node.js. You can customise the data and look with standard web technologies like Javascript and CSS. MagicMirror comes with a set of built-in modules for things like the weather, calendars and news but also has a large community of third party modules for things like tracking your commute or integration with smart home devices like Amazon Alexa. With a little JavaScript knowledge, you can even write your own modules.
You should start with a Raspberry Pi running the latest Raspbian.
This will erase all data on the SD card. Take care to select the correct destination for the install, Etcher usually detects the SD card by default but check to make sure. Cancel any requests to format the drive on Windows.
The steps on the link are for Raspberry Pi 4 but are the same for Raspberry Pi 3.
sudo apt-get install xscreensaver
This will install screensaver, which we’ll need to stop the Pi from going to sleep.
Yes, this is counter-intuitive, but that’s the way to prevent a sleeping pi.
ifconfig
For the next steps, we will connect to the Pi from our host computer.
ssh pi@YOUR-PIs-IP-ADDRESS
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt install -y nodejs
git clone https://github.com/MichMich/MagicMirror
cd MagicMirror/
npm install
The installation step for npm install will take a long time, often with no terminal activity. Do not interrupt the task or you risk getting a corrupted Pi.
cp config/config.js.sample config/config.js
npm run start
sudo npm install -g pm2
This will install PM2 which is a node.js application which allows you to keep applications running constantly and to automatically reload them amongst other things.
pm2 startup
cd ~
nano mm.sh
You’ll now be presented with a script window inside Terminal.
cd ~/MagicMirror
DISPLAY=:0 npm start
chmod +x mm.sh
After a short while, you should get confirmation that the script is executable.
pm2 start mm.sh
pm2 save
If you want to change the orientation of your Magic Mirror, you can follow the following steps which are optional:
sudo nano /boot/config.txt
# Rotate display vertically
display_rotate=1
sudo reboot
This is the basic setup completed. You should now have a remotely accessible Pi which automatically boots into Magic Mirror displaying the default modules and doesn’t sleep.
Now you’ll need to customise the modules displayed. There are unlimited possibilities regarding this so the next steps are just an introduction. You’ll find a list of resources for further customisation at the end of this step.
scp pi@YOUR PI's IP ADDRESS:MagicMirror/config/config.js .
pwd
and the path to it will be displayed.
Config.js is a javascript file which contains all of Magic Mirror’s configurations. If you know Javascript you can edit it to your heart’s content but don’t despair if you don’t, it’s simple enough to do some basic tweaking.
scp [Path of File To Copy to Pi]@ [IP Address of Raspberry Pi]:MagicMirror/config/config.js .
For information on configuring the default modules, you can check out the documentation here.
You can also use a number of 3rd party modules that allow for all kinds of integrations, including Alexa, and Google Maps, as well as for adding hardware like PIR sensors.
To control your Magic Mirror you’ll need to connect to it as described above using
ssh pi@YOUR-PIs-IP-ADDRESS
from your host computer. Then you can use the following commands for different tasks.
pm2 restart mm
pm2 stop mm
pm2 logs mm
pm2 show mm
To make my mirror I used a roll of window mirror film but you can also use two-way mirrored acrylic, this will make a better mirror and is easier to install but will be more expensive.
Unless your screen covers the entire mirror area you will want to place a piece of black paper directly behind the acrylic. This will disappear behind the mirror. You will need a cut hole the size of the display. I made mine opening a little smaller than the screen so as to hide any edges.
My frame came with a pressboard back. I used a drill and small hand saw to cut out a hole exactly the width and height of the Raspberry Pi Touchscreen. I wanted a snug fit so the screen can’t move around at all.
To install the touchscreen. I cut two pieces of aluminium flashing about 5 to 10cm longer than the screen height. I then marked and drilled holes in the flashing the same distance as the mounting holes on the back of the touchscreen. I then used the mounting screws to attach the flashing to the touchscreen. Then I placed the screen in the whole and used duct tape to attach the flashing to the frame back.
Using the aluminium flashing created a snugged yet flexible fit holding the screen against the acrylic. It also lets me unscrew the touchscreen from the frame without removing the duct tape if I need to.
After installing it behind the glass you may need to adjust the brightness of the screen.
sudo bash -c "echo [VALUE] > /sys/class/backlight/rpi_backlight/brightness"
Magic Mirror is a big well-documented project, with an active user base, you can join the community and find answers, updates and suggestions here.
***
Have you enjoyed creating this project? If you’re now ready to jump onto the next one, visit our Project Hub for more exciting projects to try. Also, discover our Raspberry Pi shop for more amazing products for your next projects.
From a quick tap to smashing that love button and show how much you enjoyed this project.