Listen to this post
Reading Time: 3 minutes
image_pdfimage_print

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 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: "",
            units: "imperial",
            locationID: "", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
            appid: ""
    }
}

I want to see the weather forecast.

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

I want to see movies with the MovieInfo plugin.

{
	module: 'MMM-MovieInfo',
	position: 'middle_center',
	config: {
		api_key: ""
	}
},

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.

Share this post