How to: Create a Magic Mirror 2 with Pi Zero W! (deprecated)

Emmanuel How To's 45 Comments

photo of magic mirror project

I’ve seen a lot of magic mirror projects and finally decided to make my own 🙂 I don’t spend much time looking in the mirror so I decided to make it instead an entry way mirror.  As I leave the house, I can see my calendar, what the weather should be like, and  motivational quotes. I relied heavily on the post below, just followed step by step, added missing steps, and took out some of the wordiness of the post. Will post pictures once I finish!

Some other pictures of the project 🙂

Mirror Update 1/31/2019!!

Sources:

Materials:

Update 10/20/2022:  I’ve tried updating this guide but electron for 32 bit hasn’t been supported for over 1.5yrs so I’m running into many problems getting this up and running. It may be time to upgrade to a new pi :/ . I do have a RPI 3 which I will use to bring my magic mirror back to life

Update 5/4/2020: New updated Image! With this new image, there was a popup that kept saying that chromium needed to update, and then it would fail to update. I disabled that pop up by following this link which tells it to check for a new version every year. Hopefully chromium will have a new version for the pi zero before then, enjoy!!

Update 8/17/2019: Yay! I’ts up are running again!! Thanks Igor 🙂 I’ve updated the guide with latest steps, specifically this line is needed to install latest version of electron on the pi zero “npm install –arch=armv7l” 

Update 7/27/2019: electron won’t install on armv6, it even after specifying ^2.0.0 it tries to install 1.8.0 and it doesn’t find it in the electron repository. I think it was removed for security reasons. Magic mirror on pi zero is broken until further notice :/ please leave a comment if you know of a fix!

Update 4/16/2019: Latest magic mirror install fails because armv6l is not supported for electron 3.0.0 or higher. I need to troubleshoot this further but was able to install the magic mirror by modifying the package.json file and changing electron version to “^2.0.0” Will try to find a way to get this working on latest electron.

Update 9/28/2018 : with Raspbian Stretch, Midori would display a white screen due to “connection refused” when trying to access http:localhost:8080, I switched to chromium-browser and updated the guide to reflect that.

Other Magic Mirror with Pi Zero Projects!

Steps in Order of execution

Download and install the latest version of raspbian

Enable SSH, change locale, change keyboard layout

  • On the boot up screen
    • Change Keyboard Layout
      • Select  US
    • Change WiFi Country
      • US

Setting up WiFi

    • This is now on the boot up screen, connect your raspberry pi to your wifi network through the built in gui.

Update OS

  • The gui wizard will ask you if you want to update the OS, chose yes. Otherwise execute $sudo apt update && sudo apt upgrade

SSH into Rpi

Once you are booted into the desktop, go to system preferences > interface and enable SSH

  • Figure out what IP address the rpi has, run the command
    • ifconfig
  •  From your computer
    • ssh pi@<IP address> 
    • Enter Rpi password raspberry

Optional : Install Vim

  • sudo apt install vim

Install Node.js and electron 

Install NPM

  • sudo apt install npm

Install git

  • sudo apt install git

Get back to home folder

  • cd or cd ~/

Clone magic mirror repo

  • git clone https://github.com/MichMich/MagicMirror

Install magic mirror

  • cd MagicMirror
  • npm run install-mm
  • ** grab a beer and wait like 20 minutes

Install a Chromium Browser ( already install on latest raspbian version!)

  • sudo apt install chromium-browser
  • ** grab another beer (but don’t get drunk, we aren’t done)
  • disable the popup by executing this command
    • $ sudo touch /etc/chromium-browser/customizations/01-disable-update-check;echo CHROMIUM_FLAGS=\”\$\{CHROMIUM_FLAGS\} –check-for-update-interval=31536000\” | sudo tee /etc/chromium-browser/customizations/01-disable-update-check

AutoLogin to raspberry pi

  • sudo raspi-config
  •  System Options -> S5 Boot/Auto Login  -> B2 Console Autologin

Install Xorg (display server)

  • sudo apt install xorg

Install matchbox (window manager)

  • sudo apt install matchbox

Get rid of cursor with Unclutter

  • sudo apt install unclutter

Make two script files at the root of the operating system ($cd ),

  • mmstart.sh –  for starting MagicMirror and xserver/chromium on startup
  • sudo vim mmstart.sh  
    • #!/bin/bash
      cd ~/MagicMirror
      node serveronly &
      sleep 30
      xinit /home/pi/chromium_start.sh
  • chromium_start.sh –> for starting xserver and chromium
  • sudo vim chromium_start.sh
    • x
  • Make both files executable
  • $ sudo chmod a+x mmstart.sh
  • $ sudo chmod a+x chromium_start.sh

At this point, you should be able to run “node serveronly” from the Magic Mirror folder and start magic mirror successfully.
From a different terminal, run the following command and chrome should load the magic mirror (http://localhost:8080)

  • $ xinit ~/chromium_start.sh

To quit magic mirror while running:

  • press ctrl +alt + f1 and press ctrl+c, this is also a good place to see any errors with your magic mirror config file

Auto Starting MagicMirror (I followed the guide on the MM github page) 

  • Before doing this, make sure any user can launch an Xorg process(IhadtodothisSinceISSHintoThePi)
    • Change the value of “allowed_users=console” to “allowed_users=anybody” in /etc/X11/Xwrapper.config.
  • $ sudo npm install -g pm2
  • $ pm2 startup
    • Copy and paste the command that the screen prints out, otherwise the pm2 process won’t save
    • Note: Latest version of pm2 didn’t provide this link below but you need to run it or pm2 will not save or start automatically on reboot
    • $ sudo env PATH=$PATH:/usr/local/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u pi –hp /home/pi
  • $ pm2 start mmstart.sh
    • magic mirror should start running in chromium
  • $ pm2 save

NOTE: Upon reboot, it takes about 1-2 minutes for magic mirror to startup, be patient! 

Your Magic Mirror should now be up and running, time to add your modules and configure it!

If you want to skip all these steps, I’ve created an image file!

  • Backup and Restore of Image files for raspberry pi! 
  • Shrunk it with this script 
  • Download and restore with the link above (Backup and Restore).
  • Things to do after restoring:
    • Press ctrl +alt + f1 to quit magic mirror
    • Setup wifi by updating the /etc/wpa_supplicant/wpa_supplicant.config file.
    • Expand the image file by doing $sudo raspi-config and selecting advanced options and expand filesystem
    • Update Magic mirror to the latest version, change directory to MagicMirror ($cd MagicMirror) and do $ git pull && npm install

To configure the wifi and edit the config file, you will need to exit Chromium and stop pm2. After that, rebooting will auto start magic mirror again. 

  • Exit MagicMirror/Midori –>  ctrl-w
  • Stopping PM2  –>  $ pm2 stop all

Additional Steps – Take a look at Christians comment below (Thanks Christian!)

  • Expanding the filesystem
  • Updating Raspbian Stretch
  • Updating MagicMirror

Note: Small bug in Compliments module

CONFIGURATION AND MODULES!

  • custom.css – increase contrast and make fonts brighter 
    • body { color: #fff; }
      .region.below {
      width: 100%;
      text-align: center;
      bottom: 100%;}
      .normal { color: #fff; }
  • Disable “fade” for future events, this is a config edit in the JSON of the module
  • WUnderground app –> better icons!
    • Change icons to “Colourful”
    • change so fonts are all white (#fff) and NOT gray
  • Add your own compliments!
    • Edit  the /MagicMirror/modules/default/compliments/compliments.json file

Other Notes:

  • I did get the following errors, and went away after running them through the midori_start.sh file
    • matchbox: can’t open display! check your DISPLAY variable!
    • midori – Cannot open display:
  • Failed at using init.d to run script –> midori would start with error loading http://localhost:8080
  • I tried running the script as suggested using the lines below, but the magic mirror “serveronly” would not start and I would get an error when running midori. booting up the pi, and then running /etc/init.d/mmstart.sh worked fine, it just didnt like starting the script when booting up, probably node.js hasn’t started before node serveronly  is called.
    • sudo mv /home/pi/start.sh /etc/init.d/startMagicMirror.sh
    • sudo update-rc.d startMagicMirror.sh defaults 100
  • Crontab also didn’t work to auto start magic mirror –> midori would start with error loading http://localhost:8080
    • sudo crontab -e
    • Select your editor, I selected vim
    • Add the following line to the last line of the script
      • @reboot /home/pi/mmstart.sh
  • Modified compliments.js file