Docker and Magic Mirror

My son and I were going to start a Magic Mirror project with an old Raspberry Pi B+ I had laying around.  It turns out, the Pi I bought a million years ago is too old to handle the current Magic Mirror builds, so I was looking at alternatives.  I figured someone had to have made a Docker image for Magic Mirror and low and behold I found one.

I ended up spinning up a Magic Mirror image and did some light configuring to see how to make changes to the UI and tried adding/deleting modules to see what it can handle.  The idea now is trying to get just a browser to open up on the old Pi and point it to the Magic Mirror web.  No plans on doing that yet, this post was just more to document the build out of the Magic Mirror in Docker.

Build Out

Just a quick preview, in case you're wondering what the Magic Mirror front end looks like:

So, the setup. I have a server running Docker, pull down the Magic Mirror image and used docker-compose to spin it all up.

• Install Docker
  • I'm not gonna write out those instructions, because I'm lazy. If you don't have Docker installed you can follow their instructions here.
  • If you want to follow the rest of my instructions, you probably want to follow their instructions on also installing docker-compose
• Pull down the Magic Mirror image and build the container
  • Here's a copy of the docker-compose.yml I used:

version: '3'
services:
  magicmirror:
    container_name: magicmirror
    image: bastilimbach/docker-magicmirror
    restart: unless-stopped
    environment:
      - PGID=1000
      - PUID=1000
      - TZ="America\/Los_Angeles"
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - /home/raph/git/magicmirror/config:/opt/magic_mirror/config
      - /home/raph/git/magicmirror/modules:/opt/magic_mirror/modules
    ports:
      - 8080:8080

That's basically it. You should be able to hit your localhost and pull up your Magic Mirror.

Modules

Adding modules to Magic Mirror was simple.  cd into you modules directory.  In my example I would cd /home/raph/git/magicmirror/modules.  Typically you just need to clone down the module that you want, make the little configuration changes and just refresh your browser running Magic Mirror.  No need to restart docker or rebuild Magic Mirror when adding new modules.  Here is a great list of Magic Mirror modules you can use.

Making the configuration changes will typically be done/added to the /home/raph/git/magicmirror/config/config.js.  

In that file you will make changes inside the modules array block.  In that block you find an array of all the modules currently installed.  If you installed a new one, simply just create a new entry in there and follow the instructions found from the repo you cloned from.

Some of the updates I made to the base install of Magic Mirror were to:

• Calendar - Adding my own personal calendar

    {
      module: "calendar",
      header: "What's up?",
      position: "top_left",
      config: {
        calendars: [
          {
            symbol: "calendar-check",
            url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"
          },
          { //Adding my personal calendar
            symbol: "Odrallag",
            url: "https://calendar.google.com/calendar/###CALENDAR###/basic.ics"
          }
        ]
      }
    },

• Compliments - Changing the randomized compliments being displayed

{
      module: "compliments",
      position: "lower_third",
      config: {        
        compliments: {
          anytime: [
            "You just lost the game!"
          ],
          morning: [
            "Damn, it's still early!",
            "Neeeeeed cooffeeeeeee..."
          ],
          afternoon: [
            "What's for lunch?",
            "Why aren't you at work?"
          ],
          evening: [
            "Getting late, better sleep!",
            "Did you lock the door?",
            "Are all the lights still on?"
          ],
        }
      }
    },

• Both weather modules - Adding my local weather and measurements

    {
      module: "currentweather",
      position: "top_right",
      config: {
        location: "Tacoma",
        locationID: "5812944",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
        appid: "asdf1234asdf1234asdf1234asdf",
        units: "imperial"
      }
    },
    {
      module: "weatherforecast",
      position: "top_right",
      header: "Weather Forecast",
      config: {
        location: "Tacoma",
        locationID: "5812944",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
        appid: "asdf1234asdf1234asdf1234asdf",
        units: "imperial"
      }
    },

• Newsfeed - Pulling newfeed from Reddit/r/news instead of New York Times.

    {
      module: "newsfeed",
      position: "bottom_bar",
      config: {
        feeds: [
          {
            title: "Reddit News",
            // url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
            url: "https://old.reddit.com/r/news.rss"
          }
        ],
        showSourceTitle: true,
        showPublishDate: true,
        broadcastNewsFeeds: true,
        broadcastNewsUpdates: true
      }
    },

That's probably about it.  I think the only hiccup I ran into was with that config.js file.  When Magic Mirror created the folders and files it made it with permissions from a different user and not my PGID/PUID.  So I just and to chmod that file with the right permissions for my user account and I was able to make edit.

Next on this, maybe I'll build that Raspberry Pi finally.  Although it's super ass old now so I might just buy a new one and try again.