Magic Mirror Coding Guide

Magic Mirror Coding Guide

Magic Mirror is an open-source project that gained traction due to its innovative blend of technology and decor. At the core, it’s a Raspberry Pi, equipped with a DVI monitor and housed inside a two-way mirror to display time, weather, news, calendar events and other interactive functionalities.

Getting started with the Magic Mirror requires a few initial set-ups – installing Raspberry Pi OS, setting up Raspberry Pi, installing Magic Mirror software, and finally, customizing the Magic Mirror to showcase your desired data.

Installing Raspberry Pi OS

Begin by installing the Raspberry Pi OS on an SD card. At present, the Magic Mirror software is compatible with the Raspberry Pi OS (previously known as Raspbian). Using Raspberry Pi Imager allows an incredibly effortless setup – download it, choose ‘Raspberry Pi OS (other)’ then ‘Raspberry Pi OS Lite’, insert your SD card and click on ‘Write’.

Setting Up Raspberry Pi

Once Raspberry Pi OS is installed, insert the SD card in your Raspberry Pi and connect it to your display. Boot up your Raspberry Pi and pass through the initial setup. Remember to set the correct timezone and connect it to your Wi-Fi network. Enable VNC for remote access, SSH for secure command-line interface over a network, and adjust the screen resolution to match your display.

Installing Magic Mirror Software

Open the terminal on your Raspberry Pi and run the following commands:

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

This script will setup the Magic Mirror software and the Node.js environment on your Raspberry Pi. Once completed, your Magic Mirror will immediately start-after a reboot or can be manually run with npm start from the Magic Mirror folder.

Configuring Your Magic Mirror

Configuring files to customize your Magic Mirror display is a crucial step in the set-up. The configurations are stored in a file named config.js within the /MagicMirror/config/ directory.

cd ~/MagicMirror/config/
nano config.js

Each module displayed on the Magic Mirror has particular properties in the config.js file. For instance, this is a sample of the clock module:

{
    module: "clock",
    position: "top_left", // This can be any of the regions.
    config: {
        // The config property is optional.
        // See 'clock' module for more information.
    }
},

Where 'module' denotes the module name, 'position' represents the location on the display, and 'config' encompasses additional configurations specific to each module.

Adding Modules

Magic Mirror modules are like plugins that add new features or display information. You can add news feeds, alerts, calendars, weather forecasts, and a lot more. Each module has its separate README.md file with detailed instructions for installation and configuration. You can also create your own modules with HTML, CSS, and JavaScript.

To add a new module, go to /MagicMirror/modules/, clone the desired GitHub repository and navigate to /MagicMirror/config/config.js to add the module.

Here’s an example of how to add the default weather forecast module:

{
    module: "weatherforecast",
    position: "top_right",  
    config: {
        location: "Amsterdam,Netherlands",
        locationID: "2759794",  //ID from http://bulk.openweathermap.org/sample/ 
        appid: "YOUR_OPENWEATHER_API_KEY"
    }
},

Magic Mirror makes API calls to obtain data for various modules. Some, like weather modules, require API keys, which can be obtained free from respective service providers.

Customizing your Magic Mirror

Magic Mirror allows massive customization options-MagicMirror² CSS custom.css file locates in /MagicMirror/css/ directory. You can change font sizes, colors, positions, and more for different modules.

Furthermore, utilize JavaScript augmentations like voice recognition, motion detection, fitting modules to suit your everyday tasks, and display meaningful data or tie in with home automation systems. Choices are limitless.

Monitoring Your Magic Mirror

Monitoring your Magic Mirror ensures it works efficiently. PM2 process manager automates some tasks and provides useful statistics. Install PM2 with the command: npm install -g pm2. To set Magic Mirror to start on boot, use pm2 startup. Then add the MagicMirror to PM2 with pm2 start ~/MagicMirror/installers/mm.sh and save this with pm2 save.

By following this step-by-step guide, you can gradually master the Magic Mirror coding process, from installation and configuration to customization and monitoring. Incorporating open-source technologies, Magic Mirror is a dynamic project offering immense space for adaptive learning and creativity. Whether you’re a newbie Raspberry Pi user or an experienced programmer, there is plenty to learn, explore, and create with Magic Mirror.