Getting the most out of the technology driving our Smart Mirrors often means customizing the features and apps or “modules” to suit one’s preferences. Doing so involves tinkering with mirror interfaces, module settings and code scripts. This article will guide you through the steps to customize various modules compatible with the popular MagicMirror² platform in an easy, user-friendly manner.
MagicMirror² is an open-source, Raspberry Pi-operated platform for Smart Mirrors. It supports several customisable modules, or apps, that display diverse information such as clocks, weather forecasts, and more. Here are the basic steps to customize Smart Mirror modules for those familiar with technology and those willing to dip their toes into coding.
Step1: Understanding the Configuration File
Each time the MagicMirror² application runs, it reads from a configuration file called config.js, located in the ~/MagicMirror/config/ directory. This file contains the list and configurations of all installed modules. Before customizing a module, familiarize yourself with its default configuration block within the config.js file.
Step 2: Module Configuration
Each module has an array parameter called config which is a list of key-value pairs dictating the module’s operational behaviour. You can alter these key-value pairs to change how the module works. Remember, changes only take effect after you save your changes and restart the MagicMirror² application.
Step 3: Positioning Modules
Positioning the modules on the smart mirror requires a simple understanding of position strings. The MagicMirror² interface has 16 different positions, each denoted by a string like “top_left”, “bottom_center”, “upper_third”, etc. Modify these strings to move your modules around.
header is another optional parameter that labels the module on the interface. This can be customized for better visibility especially when several modules are at play.
Step 4: Adding New Modules
Adding a new module is as simple as an npm install command in the module’s directory. However, after installation, it must be added manually to the config.js file. You need to supply the module name and position atleast. The rest of the parameters can be found in the module’s README file.
Step 5: Editing Module Javascript
The module’s main behaviour code resides in a file called MMM-xyz.js within the module folder where xyz is the module’s name. This is Javascript code. Hence, having basic expertise in Javascript would be a bonus to alter the codes according to your needs.
Step 6: Network Whitelisting
To ensure the smart mirror can be accessed from other IPs (say from your phone), you need to add that IP in the ipWhitelist within config.js. By default, localhost is whitelisted.
Over time, as you add, remove, and move modules around, your smart mirror starts to reflect your lifestyle, interests and needs. Thankfully with platforms like MagicMirror², there is a range of community-developed modules allowing customisation of everything we could think of and more.
Customizing Compliments Module
Compliments module is a fun feature available with MagicMirror². It shows random compliments on screen which can be customised. Following the below steps, one can personalise their compliments.
First, locate and open the config.js file and find the Compliments module block which has a parameter config containing a list of possible compliments. By default, it has three categories: ‘morning’, ‘afternoon’ and ‘evening’, corresponding to different parts of the day. In the default setup, a compliment from each list is randomly selected at the corresponding times of the day.
You can add as many compliments as you want to these existing categories, or even create new categories reflecting different types of days or events. As an example, you could add a “birthday” category with birthday-specific compliments. Drop a config.js code block at system startup on your birthday to surprise your loved ones.
Customizing Weather Forecast Module
The weather forecast module, a staple in smart mirror interfaces, is customizable as well. In the module configuration block, locate the ‘apiKey’ field under the config parameter and replace its value with your API key from OpenWeatherMap.
Adjust the latitude and longitude fields to get accurate weather forecasts for your current location. For extended forecasts, you can change the maxNumberOfDays field to a value up to 16 as per OpenWeatherMap API.
Wrapping up the conversation around module customization, it’s important to note the power customization personalizes our experience making the interaction smarter and more intuitive. Although this guide covered MagicMirror², these principles also apply in other platforms. Happy customising!
