How to Make a Magic Mirror with Raspberry Pi

Pages
Contributors: Ell C
Favorited Favorite 6

config.js

This file is essentially the brains of the operation. This is where you layout how you want your Magic Mirror to look. You can add modules, delete modules, move modules, and customize to your heart's content.

Navigate to your /home/pi/MagicMirror/config directory and open up config.js in Geany (right click and select Geany).

We're going to skip over most of the setup code. That said, let's look at one little bit here - scroll down until you see the outlined bit below:

Outlined settings for language, time format, and units

Click the image for a closer look.

Outlined in the image are the following settings:

  • language: defaults to english, but can be set to nl, ru, fr, etc
  • timeFormat: defaults to 24. Change this to 12 if you prefer.
  • units: metric or imperial? the battle rages on... (I prefer metric)

Scroll a little further down and you'll find the modules section:

modules section of config.js

Click the image for a closer look.

Hopefully, this section is also fairly straight forward. You'll notice that for each module:, you'll need the position: you'd like it to be on the screen. 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
  • fullscreen_below

If you put multiple modules in the same position, they will be shown in the order they are listed in the config file.

Moving the Clock

Remember the initial Magic Mirror image above?

Default Magic Mirror screen

Let's move that clock from the top left to the top right!

Find the following in your config file:

Clock module in the config file - top left

Click the image for a closer look.

Change top_left to top_right:

Clock module in the config file - top right

Click the image for a closer look.

Save the config file, go back to your terminal window, and start up Magic Mirror (npm start) aaaaaaand...

Magic Mirror with the clock at top right

VOILA! Easy peasy, right? Each module has its own default requirements and in the default config.js file, these requirements are set up for us. We'll look at some more customization in subsequent sections.