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

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 ūüôā

Sources:

Materials:

Steps in Order of execution

Enable SSH, change locale, change keyboard layout (you will need this to be able to use a normal US keyboard layout and enter passwords)

  • sudo raspi-config
  • Change Localisation Options
    • Change Locale
      • Deselect en_GB
      • Select en_US.UTF-8 UTF-8
    • Change timezone
      • US>Central
    • Change Keyboard Layout
      • Select ¬†US
    • Change WiFi Country
      • US
  • Interfacing Options
    • Enable SSH

Setting up WiFi

  • sudo vi¬†/etc/wpa_supplicant/wpa_supplicant.config
  • Add the following to the file (make sure you don’t misspell your SSID and spend 20 minutes figuring out why it isn’t working :/)
    • network={
      ssid=”Your_wifi_name”
      psk=‚ÄúYour_wifi_password‚ÄĚ
      }

Update OS

  • sudo apt update && sudo apt upgrade

SSH into Rpi

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

Optional : Install Vim

  • sudo apt install vim

Install Node.js

  • Untar
    • tar xvf node-v8.3.0-linux-armv6l.tar.xz
  • Install it
    • cd node-v8.3.0-linux-armv6l
      sudo cp -R * /usr/local/
      sudo reboot

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
  • sudo npm install
  • ** grab a beer and wait like 20 minutes

Install a Browser

  • sudo apt-get install midori
  • ** grab another beer (but don’t get drunk, we aren’t done)

AutoLogin to raspberry pi

  • sudo raspi-config
  • ¬†Boot Options -> B1 Desktop/CLI -> B2 Console Autologin

Install xinit (program that allows you to start “x” server)

  • sudo apt-get install xinit

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,

  • mmstart.sh –¬† for starting MagicMirror and xserver/midori on startup
  • sudo vim mmstart.sh ¬†
    • #!/bin/bash
      cd ~/MagicMirror

      node serveronly &
      sleep 30
      sudo xinit /home/pi/midori_start.sh
  • start_midori.sh –> for starting xserver and midori
  • sudo vim midori_start.sh
    • #!/bin/sh
      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 &
      midori -e Fullscreen -a http://localhost:8080
  • Make both files executable
  • $ sudo chmod a+x mmstart.sh
  • $ sudo chmod a+x midori_start.sh

**** Note ran into a problem with clock.js module “ReferencError: Can’t find variable:moment”¬†

This post suggested running npm install  again so cd ~/magicmirror and npm install
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

  • $ sudo¬†xinit ~/midori_start.sh

Note: I also had a problem with xinit if not run with sudo
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) 

  • sudo npm install -g pm2
  • pm2 startup
    • Copy and paste the command that the screen prints out
  • pm2 start mmstart.sh
    • magic mirror should start running and midori displaying it
  • 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!

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

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

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.js 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