Building a smart mirror – MagicMirror² on a Raspberry Pi Zero W
I am currently building a smart mirror and want to use a small Raspberry Pi Zero W for that. Unfortunately MagicMirror² does not support it out of the box. Here is how I got it to run anyways.
The magic mirror
For those who do not know what a magic mirror is: it is a normal semi transparent mirror with a screen behind it. If shown with a high contrast (white on black most of the time) the picture on the screen shows through the mirror making the elements shown appear like they are floating in the mirror. It looks very futuristic so naturally I wanted one.
While the hardware part is described in this article I needed to fix another problem first: Raspberry Pis are crazy expensive right now. A Pi 4 is too expensive right now for such a project but I still had a small Pi Zero W which would be perfect for this project – but is unfortunately not officially supported by the software I am going to use: MagicMirror².
This great open software usually makes it very easy to set up your smart mirror but does not support the Pi Zero W by default. I found a couple of guide like this one and this one but to my surprise none of them worked completely. Some were outdated other just did not work. So here is how I got it to work.
If you are looking for a simpler method jump to this part of the article. The method described below works nevertheless and very well in my case.
Prepare your Pi
The first step, which I will not describe in detail here, is to set up your Raspberry Pi. Some general steps are described here but this time I used the Raspberry Pi Imager to install the Pi OS Lite. Make sure to provide Wifi credentials, enable SSH and set a username/password. I suggest also uploading a ssh key.
If you want to support this blog and are working on a similar project consider buying the hardware via these affiliate links:
– Raspberry Pi Zero W
– USB-Power for the Pi
– HDMI cable to connect it to the screen
Afterwards you can just plug in the power, let the Pi boot up and connect to it via SSH for configuration. You can also use a mini HDMI to HDMI cable to connect it to your screen. I use Putty or MobaXTerm to connect to my remote devices. Now lets get to the installation.
Installing MagicMirror² on the Pi Zero W
Installation is a bit more complicated because you need to install a new version of NodeJS (which is not officially supported) and install the needed components to show images on the Lite version of the OS. Here are the steps:
# Preparation: # install Pi OS lite # setup wifi and SSH in imager # connect via key # =========================================== # update all software and install git sudo apt update && sudo apt upgrade sudo apt install git # install LTS 16.13.0 of node on zero w and reboot wget https://unofficial-builds.nodejs.org/download/release/v16.13.0/node-v16.13.0-linux-armv6l.tar.xz tar -xvf node-v16.13.0-linux-armv6l.tar.xz # the v is optional and more verbose sudo cp -R node-v16.13.0-linux-armv6l/* /usr/local rm -rf node-v16.13.0-linux-armv6l/* sudo reboot # now check if the installation worked - if you see the expected version as output it did node -v npm -v # start installation of MagicMirror² git clone https://github.com/MichMich/MagicMirror cd MagicMirror/ npm install --only=prod --omit=dev # copy example config to have a backup cp config/config.js.sample config/config.js # now change the config to your liking via nano config/config.js # change interface to be listen to LAN traffic address: "::", # allow clients from my network 192.168.2.x ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.2.0/24"], # or ipWhitelist: , # then save and exit the file. Now we can run the server component via npm run server # you should now be able to see the UI if you go to http://ipOrNameOfPi:8080
This is the main part of the installation. Unless you see any errors the MagicMirror software should now be running. Go to the web page to check if everything works. If you see any messages about denied access you might have to change your
ipWhitelist config. By default your UI should look something like this.
How to show MagicMirror on the screen
Now that we can manually run the server part of the software we want to also show that image on the screen connected directly to the Pi. For that we need to install the X window server to get a “UI”, install a browser to show the website and use the
unclutter program and some configuration to hide the mouse cursor.
# install all the needed software sudo apt install chromium-browser xinit xorg matchbox unclutter # create some autostart scripts cd nano start_magic.sh nano start_chromium.sh
Now that the needed software is installed we can create two files for starting everything. The first one is called
start_magic.sh, sets up everything and starts the server. The second one,
start_chromium.sh starts the browser and points it to the right (local) website.
I am using nano to create the files. You can use CTRL+O to save and then CTRL+X to leave the editor again. Here is the content of the first file.
#!/bin/bash cd ~/MagicMirror npm run server & sleep 30 sudo chmod 660 /dev/tty* xinit /home/pi/start_chromium.sh
This starts the server in the background (via the
&) and then updates the rights to the tty devices. I am not sure why the xinit program needs those but in my case it did not start otherwise. Also make sure that the user you are using is in the tty group. If your user is called pi you can use the
sudo usermod -a -G tty pi command to add it.
Finally the file starts the x server environment and calls the second script.
#!/bin/sh DISPLAY=:0 xrandr --output HDMI-1 --rotate right unclutter & xset -dpms # disable DPMS (Energy Star) features. xset s off # disable screen saver xset s noblank # don’t blank the video device matchbox-window-manager & chromium-browser --incognito --kiosk http://localhost:8080/ # MagicMirror runs on 8080 by default
The display line rotates the connected screen by 90° to the right as I am using it this way (you can also use
left/normal/inverted). This setting does not survive a restart which is why I added it here. Delete it if you do not need it. You are supposed to use
/boot/config.txt on some models to rotate the screen but that did not work for me here.
Afterwards it start the unclutter program to hide the cursor, disabled some screen saver settings and finally starts the chromium browser to show the website. If you changed the port in the MagicMirror config file you need to also update it here.
That’s it, now you should be able to start the software via
./start_magic.sh. It will only run until you restart the Pi.
How to auto start MagicMirror² on the Pi Zero W
To fix this we can also automatically start the software after each reboot. There are a couple of different ways to achieve this but for now I am using this one:
# enable auto login sudo raspi-config # -> system options, console auto login # now add some lines to your profile file to start the scripts nano .profile # then save and reboot to test sudo reboot
In the .profile file you can add any command and it will be run at startup. I added this to start the program:
#Start mirror on profile load, but only if this isn't an ssh session if [ -n "$SSH_CLIENT" ] || [ -n "$SSH_TTY" ]; then echo "Hello, SSH!" # SSH session, do not try to launch SmartMirror, or it will make configuring things difficult else sh ~/start_magic.sh # Not an SSH session, run SmartMirror fi
Now the software should start after each reboot. It will take 1-2 minutes though so be patient. I will also investigate some other ways and add my findings here later.
Using a the MagicMirror_scripts
An alternative to this straight forward but a bit time consuming installation process is using a premade installation script. The (semi)official MagicMirror_scripts repository provides such a script. The installation even supports the Pi Zero W and the newest version of Pi OS. Make sure to install the full version though, not the lite one I used. Installation is as simple as:
bash -c "$(curl -sL https://raw.githubusercontent.com/sdetweil/MagicMirror_scripts/master/raspberry.sh)"
Then the software can be controlled via the pm2 task manager like:
pm2 start MagicMirror pm2 restart MagicMirror pm2 stop MagicMirror pm2 logs
In my case everything was working but the screen rotation was still wrong. I fixed this by adding the
DISPLAY=:0 xrandr --output HDMI-1 --rotate right line to the
MagicMirrors/installers/mm.sh file. I have also switched to using the lightweight Midori browser as Chrome in this setup pretty much maxes out the CPU. All of this results in a
mm.sh file that looks like this:
cd ~/MagicMirror export external_browser=midori DISPLAY=:0 xrandr --output HDMI-1 --rotate right DISPLAY=:0 npm start
I also had to manually add unclutter to get rid of the cursor.
Control the TV via CEC from the Pi Zero W
Now the Pi will show the MagicMirror image on the TV. You can control the Pi itself in various ways including SSH but what about the TV itself? I was looking for an automated way of doing that and thankfully the Pi supports CEC – a way of controlling a screen via HDMI.
This is a good tutorial on CEC with the PI but here is how to do it quickly:
sudo apt install cec-utils # now you can use it like echo 'scan' | cec-client -s -d 1 # which will show something like this if your TV supports CEC: opening a connection to the CEC adapter... requesting CEC bus information ... CEC bus information =================== device #0: TV address: 0.0.0.0 active source: no vendor: Philips osd string: TV CEC version: 1.4 power status: on language: ger device #1: Recorder 1 address: 126.96.36.199 active source: no vendor: Philips osd string: CECTester CEC version: 1.4 power status: on language: eng currently active source: unknown (-1) # 0 is the TV, 1 is the pi itself # now you can turn the screen off echo 'standby 0.0.0.0' | cec-client -s -d 1 # or on echo 'on 0.0.0.0' | cec-client -s -d 1 # or get the current state echo 'pow 0.0.0.0' | cec-client -s -d 1
More to come
After a couple of days of trial and error I finally managed to get everything working like described here. I hope this will also help others in the same situation. If you find anything here that is not working or could be done better please send me an email or a message on Twitter and I will update this post.
I am also still experimenting with better ways to run the software and might also add some monitoring in the future.
There will also be other posts here describing how I built the mirror itself and how I set up my current screen. Here is a sneak peek: