# Introduction
# Configuring your MagicMirror
Copy
/home/pi/MagicMirror/config/config.js.sample
to/home/pi/MagicMirror/config/config.js
.
Note: If you used a third-party installer script, this step may already have been done for you.Modify your required settings.
Note: You can check your configuration runningnpm run config:check
in/home/pi/MagicMirror
.
The following properties can be configured:
Option | Description |
---|---|
port | The port on which the MagicMirror² server will run on. The default value is 8080 . |
address | The interface ip address on which to accept connections. The default is localhost , which would prevent exposing the built-in webserver to machines on the local network. To expose it to other machines, use: 0.0.0.0 . |
ipWhitelist | The list of IPs from which you are allowed to access the MagicMirror². The default value is ["127.0.0.1", "::ffff:127.0.0.1", "::1"] , which is from localhost only. Add your IP when needed. You can also specify IP ranges with subnet masks (["127.0.0.1", "127.0.0.1/24"] ) or directly with (["127.0.0.1", ["192.168.0.1", "192.168.0.100"]] ). Set [] to allow all IP addresses. For more information see: follow post ipWhitelist HowTo |
zoom | This allows to scale the mirror contents with a given zoom factor. The default value is 1.0 |
language | The language of the interface. (Note: Not all elements will be localized.) Possible values are en , nl , ru , fr , etc., but the default value is en . |
timeFormat | The form of time notation that will be used. Possible values are 12 or 24 . The default is 24 . |
units | The units that will be used in the default weather modules. Possible values are metric or imperial . The default is metric . |
modules | An array of active modules. The array must contain objects. See module configuration for more information. |
electronOptions | An optional array of Electron (browser) options. This allows configuration of e.g. the browser screen size and position (example: electronOptions: { fullscreen: false, width: 800, height: 600 } ). Kiosk mode can be enabled by setting kiosk: true , autoHideMenuBar: false and fullscreen: false . More options can be found here. |
electronSwitches | An optional array of Electron switches. This allows configuration of electron app itself. This properties will not affect the serveronly mode. Usually normal MM users don't need this property, but if you are a hard-core hacker, you might need this to handle Electron itself over MagicMirror provides. More options can be found here (Not all available switches are described there.)example: electronSwitches:["enable-transparent-visuals", "disable-gpu"]; |
customCss | The path of the custom.css stylesheet. The default is css/custom.css . |
# Environment variables
As the config.js
is javascript code there is no direct way to provide environment variables. This feature was requested by some users, e.g. with environment variables it is easier to share the configuration with others (otherwise you have to delete all private data as e.g. api keys). There was a longer discussion on github where you can read the full story.
# config.js
and config.js.template
You can provide a config.js.template
instead of a config.js
file. The difference is, that you can use environment variables in the config.js.template
. When starting MagicMirror² a config.js
is created from config.js.template
and the variables are resolved.
Variables must be inserted as ${MY_VARIABLE}
, examples:
config.js.template
:
let config = {
address: "${MY_ADDRESS}",
port: ${MY_PORT},
useHttps: ${MY_HTTPS},
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
would become
config.js
:
let config = {
address: "localhost",
port: 8080,
useHttps: false,
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}
# Providing environment variables
There are 2 ways for declaring them, you can mix both. If a variable is declared in both ways the one declared as linux environment variable is used.
# Using a config.env
file
This file must be in the same folder as the config.js.template
and contains the variables, example from above:
File content of config.env
:
MY_ADDRESS=localhost
MYPORT=8080
MY_HTTPS=false
# Using linux environment variables
You have to declare them before you start MagicMirror², e.g. by executing:
export MY_ADDRESS=localhost
export MYPORT=8080
export MY_HTTPS=false
# Real world example of config.js.template
let config = {
address: "0.0.0.0",
port: 8080,
ipWhitelist: [],
language: "de",
logLevel: ["INFO", "LOG", "WARN", "ERROR"],
timeFormat: 24,
units: "metric",
modules: [
{
module: "MMM-RAIN-MAP",
position: "bottom_left",
config: {
animationSpeedMs: 400,
colorizeTime: false,
defaultZoomLevel: 8,
displayTime: true,
displayClockSymbol: true,
displayOnlyOnRain: false,
extraDelayLastFrameMs: 2000,
markers: [
{ lat: ${LAT}, lng: ${LON}, color: "black" },
],
mapPositions: [
{ lat: ${LAT}, lng: ${LON}, zoom: 9, loops: 1 },
{ lat: ${LAT}, lng: ${LON}, zoom: 8, loops: 1 },
{ lat: ${LAT}, lng: ${LON}, zoom: 7, loops: 1 },
{ lat: ${LAT}, lng: ${LON}, zoom: 6, loops: 1 },
],
mapUrl: "${MAPBOX_URL}",
mapHeight: "320px",
mapWidth: "520px",
updateIntervalInSeconds: 300,
}
},
{
module: "MMM-Strava",
header: "Strava",
position: "bottom_left",
config: {
client_id: "16228",
client_secret: "${STRAVA_API_KEY}",
activities: ["ride"],
period: "recent",
stats: ["count", "distance", "elevation", "achievements"],
auto_rotate: true,
updateInterval: 20000,
reloadInterval: 3600000,
showPrivateStats: true,
limitPrivateStats: 1200,
digits: 0
}
},
{
module: "MMM-OpenWeatherForecast",
header: "Wetter",
position: "top_center",
config: {
apikey: "${OPENWEATHER_API_KEY}",
latitude: "${LAT}",
longitude: "${LON}",
showHourlyForecast: false,
colored: false,
iconset: "3c",
label_days: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
concise: false,
forecastHeaderText: "",
label_sunriseTimeFormat: "k:mm",
label_high: "",
label_low: "",
displayKmhForWind: true
}
},
{
module: "calendar",
header: "Termine",
position: "top_right",
config: {
timeFormat: "absolute",
showEnd: false,
dateFormat: "DD.MM.",
maximumEntries: 10,
maximumNumberOfDays: 70,
colored: true,
calendars: [
{
symbol: "subway",
url: "${CAL_URL1}"
},
{
symbol: "cake-candles",
url: "${CAL_URL2}"
},
{
symbol: "angle-right",
color: "#999999",
url: "${CAL_URL3}"
}
]
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}