Jeff Bailey
Written by Jeff Bailey
Learning resources, opinions, and facts about technology.

MagicMirror, the digital display platform

Reading Time: 3.5 minutes
Listen to this post

MagicMirror is an open-source project used to create a customizable fullscreen display. I recently read Scott Hanselman’s article about building a Wall Mounted display for your home. I’ve had a Raspberry PI for a while, so I bought a Sceptre E205W-16003R 20″ on Amazon for the screen. I also purchased a VideoSecu Tilt Rotation TV Monitor Wall Mount Bracket to mount a wall and rotate` to portrait mode.

The main configuration options I changed immediately were as follows. These edits are all in the ~/MagicMirror/config/config.js file, where you installed MagicMirror.

I found the position configuration option essential during setup. These options allow you to tell MagicMirror where to place your widgets.

Possible values are

top_bar, top_left, top_center, top_right, upper_third, middle_center, lower_third, bottom_left, bottom_center, bottom_right, bottom_bar, fullscreen_above, and fullscreen_below

Each of these entries is a module configuration within the modules section of the config.js.

I want to display the time and date.

{
  "module": "clock",
  "position": "top_right",
  "config": {
    "timeFormat": 12,
    "displaySeconds": false,
    "showPeriod": true,
    "showPeriodUpper": true
  }
},

I want to display calendar events.

{
  "module": "calendar",
  "header": "Calendar",
  "position": "top_left",
  "config": {
    "calendars": [
      {
        "symbol": "calendar-check",
        "url": "https://outlook.live.com/owa/calendar/.../calendar.ics"
      }
    ]
  }
}

I want to see the weather.

{
  "module": "currentweather",
  "position": "upper_third",
  "config": {
    "location": "<Some Town>",
    "units": "imperial",
    "locationID": "", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
    "appid": "<Appid>"
  }
},

I want to see the weather forecast.

{
  "module": "weatherforecast",
  "position": "upper_third",
  "header": "Weather Forecast",
  "config": {
    "location": "<Some Town>",
    "units": "imperial",
    "locationID": "", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
    "appid": "<Appid>"
  }
},

I want to see movies with the MovieInfo plugin.

{
  "module": "MMM-MovieInfo",
  "position": "middle_center",
  "config": {
    "api_key": "<ApiKey>"
  }
},

I want to display an arbitrary web page with the SmartWebDisplay plugin.

{
  "module": "MMM-SmartWebDisplay",
  "position": "bottom_bar", // This can be any of the regions.
  "config": {
    // See 'Configuration options' for more information.
    "logDebug": false,
    "height": "400px",
    "width": "800px",
    "updateInterval": 0, //in min. Set it to 0 for no refresh (for videos)
    "NextURLInterval": 0.5, //in min, set it to 0 not to have automatic URL change. If only 1 URL given, it will be updated
    "displayLastUpdate": true, //to display the last update of the URL
    "displayLastUpdateFormat": "ddd - HH:mm:ss", //format of the date and time to display
    "url": ["https://..."], //source of the URL to be displayed
    "scrolling": "no" // allow scrolling or not. html 4 only
  }
}

Tips

  • Keep your modules and MagicMirror up to date by pulling the latest code on a schedule using cronjobs or another technique.

The MagicMirror is looking good so far. The sky is the limit from here; there are so many options.

It is also possible to access this display on a mobile phone by changing the config file. Update the config to listen on all addresses and make sure you allow all IP addresses to access your mirror.