Reading Time: 3 minutes

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 lying around for a while so I bought a Sceptre E205W-16003R 20″ on Amazon for the display. I also bought a VideoSecu Tilt Rotation TV Monitor Wall Mount Bracket for mounting on a wall and rotating 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_bartop_lefttop_centertop_rightupper_thirdmiddle_centerlower_thirdbottom_leftbottom_centerbottom_rightbottom_barfullscreen_above, and fullscreen_below

Each of these entries are module configurations 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
    }
}
MagicMirror Screenshot
MagicMirror on the wall

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.

var config = {
    address: "0.0.0.0", // Address to listen on, can be:
                          // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
                          // - another specific IPv4/6 to listen on a specific interface
                          // - "", "0.0.0.0", "::" to listen on any interface
                          // Default, when address config is left out, is "localhost"
    port: 8080,
    ipWhitelist: [], // Set [] to allow all IP addresses
Sharing is caring!

Leave a comment