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
  • Álex Navarro Morales

    There is no link for the image file. Could you please update the post with it? Thanks

    • Emmanuel Contreras

      Sure no problem! I ran into a problem trying to shrink the 8gb image to something smaller, I got it down to 2gb but keep getting an error when uploading, likely file size. I’m also trying to shrink the image file significantly to reduce bandwidth.

      • Álex Navarro Morales

        Thanks for uploading the image Emmanuel! its one of the few up to date images for Magic Mirror that you can find on internet right now.

        Everything is working fine for the moment. Just two small weird things that I hope you can help me about:

        – When I exit Magic Mirror (Ctrl + X) and go to the command line, after 45s aprox. the system automatically restarts Magic Mirror, being a hassle to change any parameters under that time. Do you know why is doing that and if there is any way to change it?

        – In order to SSH it, I would need to know the password (even if I want to change the password I would need to know it). Otherwise is really time consuming to manually change the config.js document every time you add a new module.

        Thanks a lot again for your efforts and helping people like me to build a low budget MM!

        • Emmanuel Contreras

          1) How are you exiting with Ctrl + X, it doesn’t work for me, it usually is ctrl + c to exit a program but also doesn’t work for me, weird. Try exiting Midori with Ctrl+alt+ F1, this will take you to the terminal to edit your configuration files, I’ve left this terminal open for 10 minutes and Midori doesn’t re-launch. If that still doesnt work, stop pm2 from running the script.

          2) I left the jessie lite install as close to stock as possible, the password for the user pi is still raspberry, modify the wifi wpa_supplicant listed on the steps above to add your SSID and password, you should then be able to SSH to the pi, a lot of this setup I did through SSH from my laptop.

          Good luck!

    • Emmanuel Contreras

      Ok finally got an image file that uploaded, I tried it on an sd card and worked fine. Please let me know if it works! 🙂

  • Emmanuel Contreras

    Hey Álex, yea I think this is related, I tried loading compliments from a remote file and they don’t work. I’ve been looking at the javascript code to fix it but haven’t been successful. I am loading my compliments directly from the compliments.js file which is why I didn’t notice the problem. I’ll see if I can fix the problem, but let me know if you do.

  • Emmanuel Contreras

    I got the fix from this page, I used a stock copy of the compliments.js file and making those edits suggested does prevent the module from loading a remote compliments file. I’ll post on the page and hopefully they have some insight.
    https://github.com/MichMich/MagicMirror/issues/694

  • Jonny Gilson

    how do i do this
    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

    • Emmanuel Contreras

      Hey Jonny,
      Take a look at how to create and run scripts in linux. This command (sudo vim mmstart.sh) creates a file with the name mmstart.sh and in that file you should put those other commands, you can then run the script from the terminal and it will run all those commands.

  • Emmanuel Contreras

    Hey Alex, not sure if you followed the Github issue, but moving one line to the outside the function solve the problem. Take a look at the issue for the fix 🙂

  • Walter Paris

    Hello
    I followed your tutorial to the letter (several times) and I still have the same problem:
    midori
    does not launch the localhost I have a black screen, if I replace it by
    the google page it works. I changed port, tried with chromium, modified
    the type of launch lxde session … same problem an idea?

    • Emmanuel Contreras

      Are you sure there are no problems with your config file? when I had an error, it loaded mirodir but with a 404 error. “run npm run config:check” to make sure your config file is working. Also try the image I uploaded, you can load it and see if everything is configured correctly.

      • Walter Paris

        pi@raspberrypi ~/MagicMirror $ npm run config:check

        > magicmirror@2.1.3 config:check /home/pi/MagicMirror
        > node tests/configs/check_config.js

        Checking file… /home/pi/MagicMirror/config/config.js
        Your configuration file don’t containt syntax error 🙂

        • Emmanuel Contreras

          ssh into the pi, stop pm2 script with “$pm2 stop all” , start magic mirror with “$node serveronly” and see if there are any errors, wait until magic mirror fully starts , if there aren’t errors, try running the midori sh script “$./start_midori.sh”, look for any errors

  • Ruben Laureys

    Hi,

    I used your image to install MM2 on my RPI B+, and it works!
    But do you know how to update MM2?
    I can’t use the following command:

    git pull && npm install

    Thank you!

    Ruben

    • Emmanuel Contreras

      That’s cool that it works! Is your rpi connected to the internet? if yes, are you running those commands from within the MagicMirror folder? What error do you get?

      • Ruben Laureys

        Thank you for the reply.
        I’m running them in the terminal. Is that the wrong way to do it?

        “fatal: Not a git repository (or any of the parent directories): .git”

        • Emmanuel Contreras

          Nope, you want to run those commands from the terminal but from within the MagicMirror folder, so change directories into the magic mirror folder and then run the update commands, two commands. (Note: the dollar sign just denotes you are in the terminal)
          $ cd ~/MagicMirror
          $ git pull && npm install

          • Ruben Laureys

            Thank you!

  • Canton Dude

    My Magic Mirror/PiHole bit the dust (corrupt SD card) and I can’t locate my image i took (or my steps to install) Followed your directions 2 times and still get connection refused.

    Any thoughts?