MagicMirror is an open-source project used to create a customizable full screen 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

```text
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.

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

I want to display calendar events.

```json
{
  "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.

```json
{
  "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.

```json
{
  "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].

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

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

```json
{
  "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

- Read tips about [CSS in MagicMirror].
- Create a css/custom.css file to override CSS globally

- 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 allow all IP addresses to access your mirror.

[scott hanselman's article]: https://www.hanselman.com/blog/HowToBuildAWallMountedFamilyCalendarAndDashboardWithARaspberryPiAndCheapMonitor.aspx
[the position configuration option]: https://github.com/MichMich/MagicMirror#configuration
[the movieinfo plugin]: https://github.com/fewieden/MMM-MovieInfo
[the smartwebdisplay plugin]: https://github.com/AgP42/MMM-SmartWebDisplay
[css in magicmirror]: https://forum.magicmirror.builders/category/8/custom-css
[are so many options.]: https://github.com/MichMich/MagicMirror/wiki/3rd-Party-Modules