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:

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.

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-v10.11.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

Install a Browser

  • sudo apt install chromium-browser
  • ** 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 at the root of the flash drive ~/,

  • 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
    • #!/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
      chromium-browser –incognito –kiosk http://localhost:8080/
  • 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
    • 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
  • $ 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!

  • 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 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